inline icons

29 files changed, 171 insertions, 116 deletions

diff --git a/src/components/404.svelte b/src/components/404.svelte
index 317ff968..e34b4363 100644
--- a/src/components/404.svelte
+++ b/src/components/404.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+  import CoinosLogo from "virtual:icons/coinos/logo";
+  import PhQuestionBold from "virtual:icons/ph/question-bold";
   import { t } from "$lib/translations";
 </script>
 
 <div class="flex justify-center items-center mt-20">
   <div class="space-y-5 text-center">
     <a href="/" aria-label="Go to homepage">
-      <iconify-icon noobserver icon="coinos:logo" width="224" class="mx-auto"></iconify-icon>
+      <CoinosLogo width="224" class="mx-auto" />
     </a>
 
-    <iconify-icon noobserver icon="ph:question-bold" class="mx-auto w-56"></iconify-icon>
+    <PhQuestionBold class="mx-auto w-56" />
 
     <h1 class="font-bold text-5xl">{$t("404.404")}</h1>
     <p>{$t("404.pageNotFound")}</p>
diff --git a/src/components/About.svelte b/src/components/About.svelte
index 4ad54cb7..3160f537 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhMapTrifoldBold from "virtual:icons/ph/map-trifold-bold";
   import { onMount } from "svelte";
   import Image from "$comp/Image.svelte";
   import { t } from "$lib/translations";
@@ -54,7 +55,7 @@
 
   <div class="flex justify-center">
     <a href="/map" class="btn btn-accent !w-auto !rounded-full px-10 text-xl gap-2">
-      <iconify-icon noobserver icon="ph:map-trifold-bold" width="28"></iconify-icon>
+      <PhMapTrifoldBold width="28" />
       {$t("about.locations.viewMap")}
     </a>
   </div>
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 66b1cf12..8388a9a7 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+  import PhClockCounterClockwiseBold from "virtual:icons/ph/clock-counter-clockwise-bold";
+  import CryptocurrencyColorBtc from "virtual:icons/cryptocurrency-color/btc";
+  import PhFadersBold from "virtual:icons/ph/faders-bold";
+  import PhHandCoinsBold from "virtual:icons/ph/hand-coins-bold";
+  import PhPaperPlaneRightBold from "virtual:icons/ph/paper-plane-right-bold";
   import { bytesToHex } from "@noble/hashes/utils.js";
   import { run } from "svelte/legacy";
   import { onMount } from "svelte";
@@ -135,7 +140,7 @@
       <!--   aria-label="Payment history" -->
       <!--   onclick={(e) => setAccount(e, "/payments")} -->
       <!-- > -->
-      <!--   <iconify-icon noobserver icon="ph:clock-counter-clockwise-bold" width="38"></iconify-icon> -->
+      <!--   <PhClockCounterClockwiseBold width="38" /> -->
       <!-- </a> -->
       <a
         href={`/account/${id}`}
@@ -147,17 +152,12 @@
           <img src="/images/ark.png" class="w-8 h-8 rounded-full object-cover bg-neutral" alt="Ark" />
         {:else if seed || fingerprint}
           <div class="w-8 h-8 flex items-center justify-center">
-            <iconify-icon noobserver icon="cryptocurrency-color:btc" width="32"></iconify-icon>
+            <CryptocurrencyColorBtc width="32" />
           </div>
         {:else}
           <img src="/images/icon.png" class="w-8 h-8" alt="Coinos" />
         {/if}
-        <!-- <iconify-icon -->
-        <!--   noobserver -->
-        <!--   icon="ph:faders-bold" -->
-        <!--   width="20" -->
-        <!--   class="absolute -bottom-1 -right-1 text-base-content bg-base-100 rounded-full" -->
-        <!-- ></iconify-icon> -->
+        <!-- <PhFadersBold width="20" class="absolute -bottom-1 -right-1 text-base-content bg-base-100 rounded-full" /> -->
       </a>
     </div>
   </div>
@@ -165,15 +165,14 @@
   <div class="flex w-full text-xl gap-2">
     <a href={"/invoice"} class="contents" onclick={(e) => setAccount(e, "/invoice")}>
       <button class="btn !w-auto flex-1" data-testid="account-receive">
-        <iconify-icon noobserver icon="ph:hand-coins-bold" width="32" flip="horizontal"
-        ></iconify-icon>
+        <PhHandCoinsBold width="32" style="transform: scaleX(-1)" />
         <div class="my-auto">{$t("user.dashboard.receive")}</div>
       </button>
     </a>
 
     <a href={`/send`} class="contents" onclick={(e) => setAccount(e, "/send")}>
       <button type="button" class="btn !w-auto flex-1">
-        <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"></iconify-icon>
+        <PhPaperPlaneRightBold width="32" />
         <div class="my-auto">{$t("user.dashboard.send")}</div>
       </button>
     </a>
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index 1f2b1f29..0c504ec6 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhLockFill from "virtual:icons/ph/lock-fill";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { copy, s, f, toFiat } from "$lib/utils";
   import { fiat } from "$lib/store";
   const {
@@ -11,7 +13,6 @@
     locked = false,
   }: any = $props();
 
-  const icon = $derived(locked ? "ph:lock-fill" : "ph:lightning-fill");
   const canShowFiat = $derived($fiat && rate && currency);
 
   const toggleFiat = (e) => {
@@ -33,7 +34,13 @@
         onclick={toggleFiat}
         aria-label="Toggle currency display"
       >
-        <iconify-icon noobserver {icon} class="text-yellow-300" class:hidden={canShowFiat}></iconify-icon>
+        {#if !canShowFiat}
+          {#if locked}
+            <PhLockFill class="text-yellow-300" />
+          {:else}
+            <PhLightningFill class="text-yellow-300" />
+          {/if}
+        {/if}
         <span class:hidden={!canShowFiat}>{f(toFiat(amount, rate), currency, locale)}</span>
         <span class:hidden={canShowFiat}>{s(amount, locale)}</span>
       </button>
diff --git a/src/components/AmountField.svelte b/src/components/AmountField.svelte
index dc88089c..6b096445 100644
--- a/src/components/AmountField.svelte
+++ b/src/components/AmountField.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { t } from "$lib/translations";
   import { tick } from "svelte";
   import Numpad from "$comp/Numpad.svelte";
@@ -38,7 +39,7 @@
 
   <button type="button" class="flex w-full" onclick={startSetting}>
     <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
-      <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+      <PhLightningFill class="text-yellow-300" />
     </div>
 
     <div class="border-l-0 rounded-l-none pl-2 w-full p-4 border rounded-2xl text-left">
diff --git a/src/components/AppForm.svelte b/src/components/AppForm.svelte
index db8d97a1..86338a11 100644
--- a/src/components/AppForm.svelte
+++ b/src/components/AppForm.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhDiceThreeBold from "virtual:icons/ph/dice-three-bold";
+  import PhTrashBold from "virtual:icons/ph/trash-bold";
   import { browser } from "$app/environment";
   import { applyAction, deserialize } from "$app/forms";
   import { page } from "$app/stores";
@@ -115,7 +118,7 @@
         class="btn !w-auto shrink"
         aria-label="Copy public key"
       >
-        <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
+        <PhCopyBold width="32" />
       </button>
     </div>
   </div>
@@ -128,10 +131,10 @@
 
         <div class="space-y-2 w-24">
           <button type="button" onclick={generate} class="btn" aria-label="Generate secret">
-            <iconify-icon noobserver icon="ph:dice-three-bold" width="32"></iconify-icon>
+            <PhDiceThreeBold width="32" />
           </button>
           <button type="button" onclick={() => copy(secret)} class="btn" aria-label="Copy secret">
-            <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
+            <PhCopyBold width="32" />
           </button>
         </div>
       </div>
@@ -142,7 +145,7 @@
     <button type="submit" class="btn btn-accent">{$t("payments.submit")}</button>
     {#if pubkey}
       <button type="button" class="btn" onclick={del}>
-        <iconify-icon icon="ph:trash-bold" width="32"></iconify-icon>
+        <PhTrashBold width="32" />
         {$t("accounts.delete")}
       </button>
     {/if}
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 5f99cdc3..586332e6 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhHouseBold from "virtual:icons/ph/house-bold";
   import { banner, theme, newPayment } from "$lib/store";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
@@ -28,7 +29,7 @@
       ? [
           {
             href: `/${user?.username}`,
-            icon: "ph:house-bold",
+            icon: PhHouseBold,
             label: "Home",
           },
         ]
@@ -75,10 +76,10 @@
   >
     <nav class="flex justify-end items-center space-x-4 p-5">
       {#if user}
-        {#each links as { href, icon, label }}
+        {#each links as { href, icon: Icon, label }}
           <a {href} data-sveltekit-preload-code="eager" aria-label={label}>
             <button class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity(href)}" aria-label={label}>
-              <iconify-icon noobserver {icon} width={(w ?? 0) > 640 ? 32 : 24}></iconify-icon>
+              <Icon width={(w ?? 0) > 640 ? 32 : 24} />
             </button>
           </a>
         {/each}
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 33cb7b39..66507383 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
   import Amount from "$comp/Amount.svelte";
   import Pin from "$comp/Pin.svelte";
   import { loc, f, toFiat, s, si, sat, sats } from "$lib/utils";
@@ -29,7 +30,7 @@
 <div>
   {#if user.haspin && !$pin}
     <button onclick={toggleShow} class="flex gap-2 text-xl" data-testid="balance-show">
-      <iconify-icon noobserver icon="ph:eye-slash-bold" width="32"></iconify-icon>
+      <PhEyeSlashBold width="32" />
       <div class="my-auto">{$t("user.showBalance")}</div>
     </button>
   {:else if !isNaN(rate)}
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index 48c132b0..23d5df77 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import { copyNoNewlines as copy } from "$lib/utils";
   import samples from "$lib/samples";
   let { sample } = $props();
@@ -6,7 +7,7 @@
 
 {#snippet cp(something)}
   <button type="button" class="ml-auto" onclick={() => copy(something)} aria-label="Copy value">
-    <iconify-icon noobserver icon="ph:copy-bold" width="42"></iconify-icon>
+    <PhCopyBold width="42" />
   </button>
 {/snippet}
 
diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte
index f2cb97db..cd0dd02b 100644
--- a/src/components/DarkToggle.svelte
+++ b/src/components/DarkToggle.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhSunBold from "virtual:icons/ph/sun-bold";
+  import PhMoonStarsBold from "virtual:icons/ph/moon-stars-bold";
   import { t } from "$lib/translations";
   import { theme } from "$lib/store";
   let dark = () => {
@@ -8,11 +10,11 @@
 </script>
 
 <button class="flex justify-center items-center hover:opacity-80 gap-2 font-bold whitespace-nowrap" onclick={dark}>
-  <iconify-icon
-    noobserver
-    icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"}
-    width="30"
-  ></iconify-icon>
+  {#if $theme === "dark"}
+    <PhSunBold width="30" />
+  {:else}
+    <PhMoonStarsBold width="30" />
+  {/if}
 
   {$t(`nav.${$theme === "dark" ? "light" : "dark"}`)}
 </button>
diff --git a/src/components/Event.svelte b/src/components/Event.svelte
index 9d25e26e..53970848 100644
--- a/src/components/Event.svelte
+++ b/src/components/Event.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import Avatar from "$comp/Avatar.svelte";
   import Media from "$comp/Media.svelte";
   import { goto } from "$app/navigation";
@@ -43,7 +44,7 @@
       </div>
       {#if author.lud16}
         <div class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
           {author.lud16}
         </div>
       {/if}
@@ -96,8 +97,7 @@
   <div class="justify-center flex">
     <button type="button" onclick={zap} class="btn btn-accent items-center">
       <div class="flex gap-1 items-center">
-        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300" width={32}
-        ></iconify-icon>
+        <PhLightningFill width={32} class="text-yellow-300" />
         <div>Zap</div>
       </div>
     </button>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 9878b392..9a271309 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoinosLogo from "virtual:icons/coinos/logo";
   import DarkToggle from "$comp/DarkToggle.svelte";
   import LocaleSelector from "$comp/LocaleSelector.svelte";
   import { t } from "$lib/translations";
@@ -21,7 +22,7 @@
   <div class="space-y-5">
     <div class="text-center w-full hidden md:block">
       <a href="/" aria-label="Home">
-        <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
+        <CoinosLogo width="224" />
       </a>
     </div>
     <div class="sm:hidden flex justify-center">
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index d548a481..05db9dd5 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,11 +1,22 @@
 <script>
+  import CoinosHand from "virtual:icons/coinos/hand";
+  import CoinosBolt from "virtual:icons/coinos/bolt";
+  import CoinosSmile from "virtual:icons/coinos/smile";
   import { t } from "$lib/translations";
   let { image, stepID, size = 128 } = $props();
+
+  const iconMap = {
+    "coinos:hand": CoinosHand,
+    "coinos:bolt": CoinosBolt,
+    "coinos:smile": CoinosSmile,
+  };
+
+  let Icon = $derived(iconMap[image]);
 </script>
 
 <div class="space-y-5">
   <div class="h-32 flex items-center justify-center">
-    <iconify-icon noobserver icon={image} class="mx-auto" width={String(size)}></iconify-icon>
+    <Icon class="mx-auto" width={String(size)} />
   </div>
   <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p>
   <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index e7fb57e3..6e7ee186 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+  import PhPencilSimpleBold from "virtual:icons/ph/pencil-simple-bold";
+  import PhArrowSquareOutBold from "virtual:icons/ph/arrow-square-out-bold";
+  import PhChatCenteredTextBold from "virtual:icons/ph/chat-centered-text-bold";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { amountPrompt } from "$lib/store";
   import { types } from "$lib/utils";
   import { page } from "$app/stores";
@@ -48,20 +52,20 @@
   <div class="flex flex-wrap gap-2 justify-around text-secondary w-full">
     {#if user?.id === invoice?.user?.id}
       <button class="btn grow !w-auto" onclick={toggleAmount}>
-        <iconify-icon noobserver icon="ph:pencil-simple-bold" width="32"></iconify-icon>
+        <PhPencilSimpleBold width="32" />
         <div class="my-auto">{t("payments.setAmount")}</div>
       </button>
     {:else}
       <a href={link} class="block">
         <button class="btn grow !w-auto">
-          <iconify-icon noobserver icon="ph:arrow-square-out-bold" width="32"></iconify-icon>
+          <PhArrowSquareOutBold width="32" />
           <div class="my-auto">{t("payments.openLink")}</div>
         </button>
       </a>
     {/if}
 
     <button class="btn grow !w-auto" onclick={toggleMemo}>
-      <iconify-icon noobserver icon="ph:chat-centered-text-bold" width="32"></iconify-icon>
+      <PhChatCenteredTextBold width="32" />
       <div class="my-auto">{t("invoice.setMemo")}</div>
     </button>
   </div>
@@ -82,8 +86,7 @@
       >
         <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
           <div class="m-auto">
-            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
-            ></iconify-icon>
+            <PhLightningFill class="text-yellow-300 text-2xl" />
           </div>
         </div>
         <div class="my-auto text-lg">Lightning</div>
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 0e5be51f..b4a9ce98 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhWarningBold from "virtual:icons/ph/warning-bold";
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import Amount from "$comp/Amount.svelte";
 
   import { btc, copy, f, sat, sats, types } from "$lib/utils";
@@ -38,7 +40,7 @@
 
 {#if invoice.type === types.liquid}
   <div class="flex justify-center p-4 shadow items-center gap-2">
-    <iconify-icon noobserver icon="ph:warning-bold" width="48" class="text-warning"></iconify-icon>
+    <PhWarningBold width="48" class="text-warning" />
     <div>
       <div class="my-auto text-xl text-center text-secondary">
         {t("payments.onlyLbtc")}
@@ -56,7 +58,7 @@
     class="w-full text-center text-secondary text-xl flex gap-1 items-center justify-center cursor-pointer hover:opacity-70"
   >
     <span class:truncate={!expanded} class="break-all">{txt}</span>
-    <iconify-icon noobserver icon="ph:copy-bold" width="32" class="shrink-0"></iconify-icon>
+    <PhCopyBold width="32" class="shrink-0" />
   </button>
 
 {#each invoice.items as i}
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index 706b5c31..329b057c 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
+  import PhXBold from "virtual:icons/ph/x-bold";
   import { types } from "$lib/utils";
   import { page } from "$app/stores";
   import { amountPrompt } from "$lib/store";
@@ -72,8 +74,7 @@
     >
       <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
         <div class="m-auto mt-1">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
-          ></iconify-icon>
+          <PhLightningFill class="text-yellow-300 text-2xl" />
         </div>
       </div>
       <div class="my-auto text-lg">LNURL</div>
@@ -87,8 +88,7 @@
     >
       <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
         <div class="m-auto mt-1">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
-          ></iconify-icon>
+          <PhLightningFill class="text-yellow-300 text-2xl" />
         </div>
       </div>
       <div class="my-auto text-lg">Bolt 12</div>
@@ -111,8 +111,7 @@
     >
       <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
         <div class="m-auto mt-1">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
-          ></iconify-icon>
+          <PhLightningFill class="text-yellow-300 text-2xl" />
         </div>
       </div>
       <div class="my-auto text-lg">Bolt 11</div>
@@ -157,7 +156,7 @@
 
   <div></div>
   <button type="button" class="btn" onclick={toggleType}>
-    <iconify-icon noobserver icon="ph:x-bold" width="32"></iconify-icon>
+    <PhXBold width="32" />
     <div class="my-auto">{t("payments.cancel")}</div>
   </button>
 {/if}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 5f00b8a7..a875e80a 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoinosLogo from "virtual:icons/coinos/logo";
   import { goto } from "$app/navigation";
   import { scroll } from "$lib/utils";
   import { t } from "$lib/translations";
@@ -18,7 +19,7 @@
   <nav class="block lg:flex justify-between items-center">
     <div class="flex justify-start lg:justify-center items-center lg:space-x-5">
       <a href="/" onclick={() => scroll(header)} aria-label="Home">
-        <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
+        <CoinosLogo width="224" />
       </a>
     </div>
 
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 8ae610f4..247b4fdd 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoinosRays from "virtual:icons/coinos/rays";
   import { focus } from "$lib/utils";
   import { goto } from "$app/navigation";
   import Image from "$comp/Image.svelte";
@@ -10,11 +11,7 @@
     <h1
       class="relative text-5xl md:text-6xl lg:text-7xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto"
     >
-      <iconify-icon
-        noobserver
-        icon="coinos:rays"
-        class="absolute -top-14 md:-top-20 left-2/3 -translate-x-1/2"
-      ></iconify-icon>
+      <CoinosRays class="absolute -top-14 md:-top-20 left-2/3 -translate-x-1/2" />
       {$t("landing.header_before_icon")}
       {$t("landing.header_with_icon")}
       {$t("landing.header_after_icon")}
diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte
index 8ed0429f..988a991a 100644
--- a/src/components/LoadingSplash.svelte
+++ b/src/components/LoadingSplash.svelte
@@ -1,4 +1,7 @@
+<script>
+  import CoinosLogo from "virtual:icons/coinos/logo";
+</script>
+
 <div class="flex justify-center items-center">
-  <iconify-icon noobserver icon="coinos:logo" width="224" class="mt-[calc(50vh-72px)]"
-  ></iconify-icon>
+  <CoinosLogo width="224" class="mt-[calc(50vh-72px)]" />
 </div>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 7529edcb..d4b4b05a 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+  import PhArrowLeftBold from "virtual:icons/ph/arrow-left-bold";
+  import PhXBold from "virtual:icons/ph/x-bold";
+  import PhMagnifyingGlassBold from "virtual:icons/ph/magnifying-glass-bold";
+  import PhFunnelBold from "virtual:icons/ph/funnel-bold";
+  import PhListBold from "virtual:icons/ph/list-bold";
+  import PhPlusBold from "virtual:icons/ph/plus-bold";
   import { tick, onMount, onDestroy, mount } from "svelte";
   import { browser } from "$app/environment";
   import Popup from "$comp/Popup.svelte";
@@ -610,7 +616,7 @@
       class="rounded-full border-2 border-black bg-base-100/80 w-16 h-16 flex items-center justify-center"
       onclick={back}
     >
-      <iconify-icon noobserver icon="ph:arrow-left-bold" width="24"></iconify-icon>
+      <PhArrowLeftBold width="24" />
     </button>
   </div>
   <div class="relative">
@@ -622,15 +628,15 @@
             <div class="flex items-center absolute right-2 top-1/2 -translate-y-1/2">
               {#if search}
                 <button type="button" onclick={clearSearch} aria-label="Clear">
-                  <iconify-icon noobserver icon="ph:x-bold" width="20"></iconify-icon>
+                  <PhXBold width="20" />
                 </button>
               {:else}
-                <iconify-icon noobserver icon="ph:magnifying-glass-bold" width="20" class="opacity-40"></iconify-icon>
+                <PhMagnifyingGlassBold width="20" class="opacity-40" />
               {/if}
             </div>
           </div>
           <button onclick={() => showList = false} aria-label="Close" class="opacity-40 hover:opacity-100">
-            <iconify-icon noobserver icon="ph:x-bold" width="18"></iconify-icon>
+            <PhXBold width="18" />
           </button>
         </div>
         <div class="space-y-1 text-sm h-[250px] max-h-[calc(100vh*0.35)] overflow-y-scroll px-4 pb-4 text-ellipsis overflow-x-hidden">
@@ -679,7 +685,7 @@
             class="text-xs px-3 py-1 rounded-full border border-primary"
           >{$t("map.none")}</button>
           <button onclick={() => showFilters = false} aria-label="Close" class="ml-auto opacity-40 hover:opacity-100">
-            <iconify-icon noobserver icon="ph:x-bold" width="18"></iconify-icon>
+            <PhXBold width="18" />
           </button>
         </div>
         <div class="flex flex-wrap gap-2">
@@ -710,18 +716,18 @@
           onclick={toggleFilters}
           aria-label="Filter categories"
         >
-          <iconify-icon noobserver icon="ph:funnel-bold" width="24"></iconify-icon>
+          <PhFunnelBold width="24" />
         </button>
         <button
           class="rounded-full border-2 border-primary w-16 h-16 flex items-center justify-center {showList ? 'bg-primary text-white' : 'bg-base-100/80'}"
           onclick={toggleList}
           aria-label="Toggle location list"
         >
-          <iconify-icon noobserver icon="ph:list-bold" width="24"></iconify-icon>
+          <PhListBold width="24" />
         </button>
       </div>
       <a href="/map/add" class="whitespace-nowrap rounded-full bg-black text-white h-12 flex items-center justify-center gap-2 px-6 text-sm font-semibold hover:opacity-80 transition-opacity">
-        <iconify-icon noobserver icon="ph:plus-bold" width="20"></iconify-icon>
+        <PhPlusBold width="20" />
         {$t("mapAdd.addLocation")}
       </a>
     </div>
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index 6a7c488a..94fc7c3a 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -1,4 +1,12 @@
 <script lang="ts">
+  import PhListBold from "virtual:icons/ph/list-bold";
+  import PhFadersBold from "virtual:icons/ph/faders-bold";
+  import PhLifebuoyBold from "virtual:icons/ph/lifebuoy-bold";
+  import PhMapTrifoldBold from "virtual:icons/ph/map-trifold-bold";
+  import PhChatBold from "virtual:icons/ph/chat-bold";
+  import PhMoonStarsBold from "virtual:icons/ph/moon-stars-bold";
+  import PhSignOutBold from "virtual:icons/ph/sign-out-bold";
+  import CoinosLogo from "virtual:icons/coinos/logo";
   import { theme } from "$lib/store";
   import DarkToggle from "$comp/DarkToggle.svelte";
   import { OutClick } from "svelte-outclick";
@@ -8,17 +16,12 @@
   let showMenu = $state(false);
 
   let menuButtons = [
-    { key: "nav.settings", icon: "ph:faders-bold", href: `/settings` },
-    { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` },
-    { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` },
-    // {
-    //   key: "nav.merch",
-    //   icon: "ph:storefront-bold",
-    //   href: `https://coinosmerch.com`,
-    // },
-    { key: "nav.dm", icon: "ph:chat-bold", href: `/messages` },
-    { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` },
-    { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` },
+    { key: "nav.settings", icon: PhFadersBold, href: `/settings` },
+    { key: "nav.support", icon: PhLifebuoyBold, href: `/support` },
+    { key: "nav.map", icon: PhMapTrifoldBold, href: `/map` },
+    { key: "nav.dm", icon: PhChatBold, href: `/messages` },
+    { key: "nav.dark", icon: PhMoonStarsBold, href: `/dark` },
+    { key: "nav.signOut", icon: PhSignOutBold, href: `/logout` },
   ];
 
   let hideMenu = () => (showMenu = false);
@@ -28,7 +31,7 @@
 <div>
   <OutClick onOutClick={hideMenu}>
     <button class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu">
-      <iconify-icon noobserver icon="ph:list-bold" width={w > 640 ? 32 : 24}></iconify-icon>
+      <PhListBold width={w > 640 ? 32 : 24} />
     </button>
 
     <div
@@ -37,7 +40,7 @@
       class:block={showMenu}
     >
       <ul class="space-y-5 w-48">
-        {#each menuButtons as { href, icon, key }}
+        {#each menuButtons as { href, icon: Icon, key }}
           <li>
             {#if key.includes("dark")}
               <DarkToggle />
@@ -51,7 +54,7 @@
                 <button
                   class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
                 >
-                  <iconify-icon noobserver {icon} width="32"></iconify-icon>
+                  <Icon width="32" />
                   {t(key)}
                 </button>
               </a>
@@ -61,7 +64,7 @@
       </ul>
       <hr class="my-4" />
       <a href="/?stay=true" aria-label="Coinos home">
-        <iconify-icon noobserver icon="coinos:logo" width="160"></iconify-icon>
+        <CoinosLogo width="160" />
       </a>
     </div>
   </OutClick>
diff --git a/src/components/Nostr.svelte b/src/components/Nostr.svelte
index f80e36de..2d85d847 100644
--- a/src/components/Nostr.svelte
+++ b/src/components/Nostr.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+  import PhArrowSquareOutBold from "virtual:icons/ph/arrow-square-out-bold";
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhPaperPlaneRightBold from "virtual:icons/ph/paper-plane-right-bold";
+  import LucideLabBee from "virtual:icons/lucide-lab/bee";
+  import PhKeyBold from "virtual:icons/ph/key-bold";
+  import PhXBold from "virtual:icons/ph/x-bold";
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
@@ -133,11 +139,11 @@
               <div class="break-all">{connectUrl}</div>
             </a>
             <a href={connectUrl} class="btn">
-              <iconify-icon noobserver icon="ph:arrow-square-out-bold" width="32"></iconify-icon>
+              <PhArrowSquareOutBold width="32" />
               {$t("payments.openLink")}
             </a>
             <button class="btn" onclick={() => copy(connectUrl!)}>
-              <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+              <PhCopyBold width="32" />
               {$t("payments.copy")}
             </button>
           </div>
@@ -145,7 +151,7 @@
           {#if $signer?.method === "nsec"}
             <input bind:value={nsec} placeholder="nsec..." />
             <button type="button" class="btn btn-accent" onclick={nsecSign}>
-              <iconify-icon icon="ph:paper-plane-right-bold" width="32"></iconify-icon>
+              <PhPaperPlaneRightBold width="32" />
               <div class="my-auto">Submit</div>
             </button>
           {/if}
@@ -153,8 +159,7 @@
           {#if !$signer}
             {#if extensionAvailable}
               <button type="button" class="btn" onclick={extensionSign}>
-                <iconify-icon icon="lucide-lab:bee" width="32" class="text-yellow-400"
-                ></iconify-icon>
+                <LucideLabBee width="32" class="text-yellow-400" />
                 <div class="my-auto">Browser extension</div>
               </button>
             {/if}
@@ -165,14 +170,14 @@
             </button>
 
             <button type="button" class="btn" onclick={toggleNsec}>
-              <iconify-icon icon="ph:key-bold" width="32"></iconify-icon>
+              <PhKeyBold width="32" />
               <div class="my-auto">Secret key</div>
             </button>
           {/if}
         {/if}
 
         <button type="button" class="btn" onclick={cancel}>
-          <iconify-icon icon="ph:x-bold" width="32"></iconify-icon>
+          <PhXBold width="32" />
           <div class="my-auto">Cancel</div>
         </button>
       {/if}
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 8e4cba13..b4b6547b 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { onMount } from "svelte";
   import Left from "$comp/Left.svelte";
   import { f, s, focus, warning, sat, sats, localeMap } from "$lib/utils";
@@ -258,8 +259,7 @@
           <span class:hidden={!fiat}>
             {#if position === "before"}{symbol}{/if}
           </span>
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300" class:hidden={fiat}
-          ></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
         </div>
 
         <!-- contenteditable input -->
@@ -302,7 +302,7 @@
         }}
       >
         <span class="flex items-center" class:hidden={!fiat}>
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
           {s(amount, locale)}
         </span>
         <span class:hidden={fiat}>{f(amountFiat, currency, locale)}</span>
diff --git a/src/components/OfflineBanner.svelte b/src/components/OfflineBanner.svelte
index 5b59513d..d0d2afcc 100644
--- a/src/components/OfflineBanner.svelte
+++ b/src/components/OfflineBanner.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import PhWifiSlashBold from "virtual:icons/ph/wifi-slash-bold";
   import { offline } from "$lib/store";
 </script>
 
 {#if $offline}
   <div class="alert alert-warning sticky top-0 z-50 rounded-none justify-center gap-2">
-    <iconify-icon icon="ph:wifi-slash-bold" width="20"></iconify-icon>
+    <PhWifiSlashBold width="20" />
     You're offline — showing cached data
   </div>
 {/if}
diff --git a/src/components/PasswordInput.svelte b/src/components/PasswordInput.svelte
index 8d16aad6..8901fa27 100644
--- a/src/components/PasswordInput.svelte
+++ b/src/components/PasswordInput.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhEyeBold from "virtual:icons/ph/eye-bold";
+  import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
   let {
     name = $bindable("password"),
     show = $bindable(),
@@ -11,8 +13,6 @@
     e?.preventDefault();
     show = !show;
   };
-
-  let icon = $derived(show ? "ph:eye-bold" : "ph:eye-slash-bold");
 </script>
 
 <label for="password" class="input flex items-center justify-center gap-2 w-full">
@@ -22,6 +22,10 @@
     <input {name} type="password" bind:value class="clean" use:focus {placeholder} />
   {/if}
   <button type="button" aria-label="Toggle" onclick={toggle} class="contents">
-    <iconify-icon noobserver {icon} width="32"></iconify-icon>
+    {#if show}
+      <PhEyeBold width="32" />
+    {:else}
+      <PhEyeSlashBold width="32" />
+    {/if}
   </button>
 </label>
diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index a16bf4ea..881da11d 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
+  import LogosBitcoin from "virtual:icons/logos/bitcoin";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
   import { get, f, s, si, sat, loc, sats, types } from "$lib/utils";
@@ -26,8 +28,7 @@
         <button class="font-bold flex items-center" onclick={(e) => { e.stopPropagation(); $fiat = !$fiat; }}>
           <div class:hidden={!$fiat}>{f(Math.abs(amount) * (p.rate / sats), p.currency, locale)}</div>
           <div class="flex items-center" class:hidden={$fiat}>
-            <iconify-icon noobserver icon="ph:lightning-fill" width="24" class="text-yellow-300"
-            ></iconify-icon>
+            <PhLightningFill width="24" class="text-yellow-300" />
             <div>{s(Math.abs(amount), locale)}</div>
           </div>
         </button>
@@ -51,8 +52,7 @@
           {:else}
             <a href={`/fund/${p.memo}`}>
               <div class="text-secondary flex">
-                <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-3xl"
-                ></iconify-icon>
+                <PhLightningFill class="text-yellow-300 text-3xl" />
 
                 <div class="my-auto">{$t("payments.fund")}</div>
               </div>
@@ -68,12 +68,11 @@
         {:else}
           <div class="text-secondary flex items-center gap-1">
             {#if p.type === types.lightning || p.type === types.bolt12}
-              <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-3xl"
-              ></iconify-icon>
+              <PhLightningFill class="text-yellow-300 text-3xl" />
             {:else if p.type === types.ecash}
               <img src="/images/cash.png" class="w-12" alt="Ecash" />
             {:else if p.type === types.bitcoin}
-              <iconify-icon noobserver icon="logos:bitcoin" class="text-3xl"></iconify-icon>
+              <LogosBitcoin class="text-3xl" />
             {:else if p.type === types.liquid}
               <div class="my-auto">
                 <img
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 6d528a98..081e6a42 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
+  import PhEyeBold from "virtual:icons/ph/eye-bold";
   import Left from "$comp/Left.svelte";
   import { focus, post, warning } from "$lib/utils";
   import { t } from "$lib/translations";
@@ -67,8 +69,11 @@
     onclick={toggle}
     aria-label={hide ? "Show PIN" : "Hide PIN"}
   >
-    <iconify-icon noobserver icon={hide ? "ph:eye-slash-bold" : "ph:eye-bold"} width="32"
-    ></iconify-icon>
+    {#if hide}
+    <PhEyeSlashBold width="32" />
+  {:else}
+    <PhEyeBold width="32" />
+  {/if}
   </button>
 </label>
 
diff --git a/src/components/Success.svelte b/src/components/Success.svelte
index bd3214ce..71acfe7f 100644
--- a/src/components/Success.svelte
+++ b/src/components/Success.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCheckFatFill from "virtual:icons/ph/check-fat-fill";
   import { browser } from "$app/environment";
   import { scale } from "svelte/transition";
   import Amount from "$comp/Amount.svelte";
@@ -57,13 +58,7 @@
       </div>
     </div>
 
-    <iconify-icon
-      noobserver
-      icon="ph:check-fat-fill"
-      class="text-green-400"
-      width="160"
-      in:scale={{ start: 0.2, duration: 500 }}
-    ></iconify-icon>
+    <PhCheckFatFill width="160" class="text-green-400" />
   {/if}
   <h1 class="text-3xl md:text-4xl font-bold mb-6">{title}</h1>
   <Amount {amount} {tip} {rate} {currency} {locale} />
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
index 052f9fd0..a3f00994 100644
--- a/src/components/WalletPass.svelte
+++ b/src/components/WalletPass.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhEyeBold from "virtual:icons/ph/eye-bold";
+  import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
   import { preventDefault } from "svelte/legacy";
 
   import { focus } from "$lib/utils";
@@ -55,11 +57,11 @@
           class="absolute right-5 top-1/2"
           aria-label={revealPassword ? "Hide password" : "Show password"}
         >
-          <iconify-icon
-            noobserver
-            icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
-            width="32"
-          ></iconify-icon>
+          {#if revealPassword}
+    <PhEyeBold width="32" />
+  {:else}
+    <PhEyeSlashBold width="32" />
+  {/if}
         </button>
       </div>
       <div class="mb-5 space-y-2">