inline icons

author: Adam Soltys <[email protected]> 2026-03-02 22:37:05 -0800
committer: Adam Soltys <[email protected]> 2026-03-02 22:37:05 -0800
commit: 11d358ad0412b794ecf89b4da9f99ac41ed9c3fe (patch)
tree: 61808f5d31df326ad7c3d459e16d4f6085368ad0 /src
parent: c0da099aa48f6bbc168159293bfae9e60daffeda (diff)
download: coinos-ui-11d358ad0412b794ecf89b4da9f99ac41ed9c3fe.tar.gz
coinos-ui-11d358ad0412b794ecf89b4da9f99ac41ed9c3fe.zip
81 files changed, 403 insertions, 302 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">
diff --git a/src/icons/bolt.svg b/src/icons/bolt.svg
new file mode 100644
index 00000000..0ab7e529
--- /dev/null
+++ b/src/icons/bolt.svg
@@ -0,0 +1 @@
+<svg width="96" height="121" viewBox="0 0 96 121" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36.3513 0.537301C35.0349 1.04923 34.3767 1.7805 34.523 2.58495C34.7424 3.8282 7.90261 40.1019 1.02817 62.1147C-1.09267 68.9891 2.3447 69.9398 17.995 66.9414C27.5022 65.1131 27.1365 63.2117 20.8471 80.9098C16.1666 93.9273 12.7296 104.824 11.1206 111.479C8.92668 120.255 13.5339 124.862 24.9426 112.942C29.8425 107.822 40.9586 96.3407 66.9937 66.649C89.0797 41.4914 89.0064 42.1496 71.6009 41.4914L60.8506 41.0526C65.8968 35.714 84.7646 15.3831 90.5421 10.6295C96.3195 5.80278 98.1481 3.82826 90.396 2.73127C81.4008 1.41489 50.9776 0.902981 42.0555 0.0985249C40.0078 -0.120872 37.4483 0.098507 36.3513 0.537301ZM79.7186 7.92365L75.9156 11.0684C66.6278 18.6741 48.2717 40.5406 48.2717 43.9047C48.2717 47.5613 54.4149 47.1957 70.2846 47.1957C46.8823 74.3278 28.5991 95.463 28.1603 95.463C28.0141 95.463 29.6963 90.6364 31.9634 84.6395C40.4467 61.8953 40.8855 57.6536 34.8887 58.385C24.5039 59.6282 14.3385 61.0177 12.949 61.4565C11.7057 61.8222 12.51 59.8476 17.1905 51.0717C25.5276 35.1289 28.8917 30.5215 43.5181 6.16846C71.3816 7.41171 71.089 7.41172 79.7186 7.92365Z" fill="currentColor"/></svg>
diff --git a/src/icons/hand.svg b/src/icons/hand.svg
new file mode 100644
index 00000000..4690a225
--- /dev/null
+++ b/src/icons/hand.svg
@@ -0,0 +1 @@
+<svg width="106" height="100" viewBox="0 0 106 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M79.11 1.52264C73.8346 3.89945 70.9939 8.53715 70.5881 15.3777C70.0664 24.5371 67.9794 27.6676 65.6026 22.914C56.9649 5.87048 27.2838 1.05889 24.2693 16.2473C23.9215 17.8705 23.8634 17.8705 20.0953 17.8705C3.5156 17.7545 -6.04939 50.3922 5.83467 66.5661C6.64626 67.6676 5.48684 71.5516 2.06655 79.1459C0.153509 83.3777 0.385336 84.0734 3.74766 85.5806C6.82012 86.9719 7.80568 85.5227 13.9506 70.4502C14.8781 68.1893 14.8781 65.6386 13.9506 63.3777C12.5593 60.0154 10.8781 56.3053 9.54476 53.8125C5.13896 45.1748 8.03757 33.0009 16.2695 25.6966C23.8057 19.0299 31.5158 24.5371 24.9071 31.8995C15.8056 41.9864 24.4432 54.2183 37.8345 50.2183C49.8345 46.6821 50.2983 29.9284 38.4722 26.74C32.2114 25.0589 29.5446 16.2473 34.2982 13.0589C46.1243 5.05889 60.849 21.4647 59.2838 40.9429C58.4722 51.0879 68.6752 46.4502 68.6752 39.4937C68.6752 37.6966 69.139 36.711 70.994 34.5661C74.9361 29.9864 76.7911 25.1748 77.6607 16.885C78.4723 9.23279 88.4433 2.85597 91.2839 8.18931C93.081 11.5516 90.2402 29.5226 87.0518 34.6821C84.5011 38.856 75.4576 49.1168 72.5591 51.0879C68.791 53.6386 69.197 55.8415 73.6608 56.5951C75.8637 56.9429 76.2115 56.827 80.3274 53.4067C90.5883 44.885 93.8347 40.7111 96.2695 32.7111C98.0086 27.0299 100.559 28.3053 100.617 34.2183C100.675 46.3343 87.9794 60.4792 75.8055 65.4647C72.907 66.6821 72.7331 68.0154 75.2258 69.8705C78.936 72.5951 85.5446 69.7546 93.1388 62.1603C97.8924 57.4067 98.1244 57.2908 97.6027 59.2038C94.7621 70.2183 85.6028 79.3198 73.9506 82.7401C66.2405 85.0009 59.0521 86.6241 53.6608 87.3197C52.9071 87.5516 48.3273 87.3777 44.5012 91.4357C38.878 97.4067 47.5158 102.16 50.4724 97.4067C52.6753 93.8125 53.3708 93.4647 57.6607 93.4067C61.8926 93.4067 62.1244 93.3488 74.1244 89.9864C84.3273 87.1459 90.3563 84.1893 94.7041 79.9575C103.864 70.9719 107.69 57.9864 102.936 51.7256C101.893 50.3343 101.892 50.2763 103.574 46.6241C106.994 39.3198 106.182 29.6966 101.661 24.2473C100.037 22.2763 99.9216 21.7545 99.7477 17.0009C99.5158 5.75453 88.3274 -2.65127 79.11 1.52264ZM37.5446 30.2763C42.3562 32.7111 39.5158 45.2908 33.8926 46.6821C31.9216 47.2038 23.1678 42.6821 30.0084 33.2328C33.1388 28.885 34.0664 28.4792 37.5446 30.2763Z" fill="currentColor"/></svg>
diff --git a/src/icons/logo.svg b/src/icons/logo.svg
new file mode 100644
index 00000000..92efa374
--- /dev/null
+++ b/src/icons/logo.svg
@@ -0,0 +1 @@
+<svg width="224" height="72" viewBox="0 0 224 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M69.8823 36C69.8823 54.7127 54.7127 69.8823 36 69.8823C17.2873 69.8823 2.11764 54.7127 2.11764 36C2.11764 17.2873 17.2873 2.11761 36 2.11761C54.7127 2.11761 69.8823 17.2873 69.8823 36Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M36 4.23529C18.4568 4.23529 4.23529 18.4568 4.23529 36C4.23529 53.5432 18.4568 67.7647 36 67.7647C53.5432 67.7647 67.7647 53.5432 67.7647 36C67.7647 18.4568 53.5432 4.23529 36 4.23529ZM0 36C0 16.1177 16.1177 0 36 0C55.8823 0 72 16.1177 72 36C72 55.8823 55.8823 72 36 72C16.1177 72 0 55.8823 0 36Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36 58.5882C48.4751 58.5882 58.5882 48.4751 58.5882 36C58.5882 23.5248 48.4751 13.4117 36 13.4117C23.5249 13.4117 13.4118 23.5248 13.4118 36C13.4118 48.4751 23.5249 58.5882 36 58.5882ZM36 54C45.9411 54 54 45.9411 54 36C54 26.0589 45.9411 18 36 18C26.0589 18 18 26.0589 18 36C18 45.9411 26.0589 54 36 54Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0001 22.8988C36.0001 22.8988 36 22.8988 36 22.8988C28.7644 22.8988 22.8988 28.7644 22.8988 36C22.8988 43.2356 28.7644 49.1012 36 49.1012C36 49.1012 36.0001 49.1012 36.0001 49.1012V22.8988Z" fill="currentColor"/><path d="M97.608 27.704C99.544 27.704 101.248 28.088 102.72 28.856C104.192 29.624 105.368 30.688 106.248 32.048C107.144 33.408 107.68 34.952 107.856 36.68H102.864C102.752 35.928 102.48 35.216 102.048 34.544C101.616 33.856 101.032 33.304 100.296 32.888C99.56 32.456 98.672 32.24 97.632 32.24C95.776 32.24 94.264 32.928 93.096 34.304C91.944 35.68 91.368 37.792 91.368 40.64C91.368 43.264 91.92 45.352 93.024 46.904C94.128 48.456 95.704 49.232 97.752 49.232C98.776 49.232 99.648 49.008 100.368 48.56C101.104 48.096 101.68 47.528 102.096 46.856C102.528 46.168 102.808 45.48 102.936 44.792H107.784C107.64 46.472 107.112 47.968 106.2 49.28C105.304 50.592 104.12 51.624 102.648 52.376C101.192 53.112 99.512 53.48 97.608 53.48C95.336 53.48 93.312 52.984 91.536 51.992C89.776 50.984 88.392 49.528 87.384 47.624C86.376 45.704 85.872 43.392 85.872 40.688C85.872 38.112 86.344 35.856 87.288 33.92C88.232 31.968 89.584 30.448 91.344 29.36C93.104 28.256 95.192 27.704 97.608 27.704ZM122.09 53.48C119.722 53.48 117.658 52.976 115.898 51.968C114.138 50.944 112.77 49.48 111.794 47.576C110.834 45.672 110.354 43.384 110.354 40.712C110.354 38.12 110.818 35.848 111.746 33.896C112.69 31.944 114.042 30.424 115.802 29.336C117.562 28.248 119.666 27.704 122.114 27.704C124.482 27.704 126.538 28.224 128.282 29.264C130.026 30.304 131.37 31.792 132.314 33.728C133.274 35.664 133.754 37.992 133.754 40.712C133.754 43.224 133.298 45.44 132.386 47.36C131.49 49.264 130.17 50.76 128.426 51.848C126.698 52.936 124.586 53.48 122.09 53.48ZM122.114 49.04C123.458 49.04 124.562 48.672 125.426 47.936C126.306 47.2 126.954 46.192 127.37 44.912C127.802 43.632 128.018 42.176 128.018 40.544C128.018 39.024 127.826 37.624 127.442 36.344C127.074 35.064 126.45 34.04 125.57 33.272C124.706 32.488 123.554 32.096 122.114 32.096C120.754 32.096 119.626 32.456 118.73 33.176C117.85 33.88 117.186 34.872 116.738 36.152C116.306 37.416 116.09 38.88 116.09 40.544C116.09 42.048 116.282 43.448 116.666 44.744C117.066 46.024 117.706 47.064 118.586 47.864C119.466 48.648 120.642 49.04 122.114 49.04ZM143.518 28.184V53H137.902V28.184H143.518ZM143.59 18.32V23.84H137.806V18.32H143.59ZM149.367 53V28.184H155.079V31.736C155.463 31.096 155.983 30.48 156.639 29.888C157.311 29.296 158.135 28.816 159.111 28.448C160.087 28.08 161.231 27.896 162.543 27.896C164.079 27.896 165.503 28.2 166.815 28.808C168.143 29.416 169.207 30.368 170.007 31.664C170.823 32.96 171.231 34.632 171.231 36.68V53H165.375V37.376C165.375 35.744 164.927 34.536 164.031 33.752C163.135 32.952 162.007 32.552 160.647 32.552C159.719 32.552 158.839 32.712 158.007 33.032C157.175 33.336 156.495 33.808 155.967 34.448C155.455 35.072 155.199 35.856 155.199 36.8V53H149.367ZM186.348 53.48C183.98 53.48 181.916 52.976 180.156 51.968C178.396 50.944 177.028 49.48 176.052 47.576C175.092 45.672 174.612 43.384 174.612 40.712C174.612 38.12 175.076 35.848 176.004 33.896C176.948 31.944 178.3 30.424 180.06 29.336C181.82 28.248 183.924 27.704 186.372 27.704C188.74 27.704 190.796 28.224 192.54 29.264C194.284 30.304 195.628 31.792 196.572 33.728C197.532 35.664 198.012 37.992 198.012 40.712C198.012 43.224 197.556 45.44 196.644 47.36C195.748 49.264 194.428 50.76 192.684 51.848C190.956 52.936 188.844 53.48 186.348 53.48ZM186.372 49.04C187.716 49.04 188.82 48.672 189.684 47.936C190.564 47.2 191.212 46.192 191.628 44.912C192.06 43.632 192.276 42.176 192.276 40.544C192.276 39.024 192.084 37.624 191.7 36.344C191.332 35.064 190.708 34.04 189.828 33.272C188.964 32.488 187.812 32.096 186.372 32.096C185.012 32.096 183.884 32.456 182.988 33.176C182.108 33.88 181.444 34.872 180.996 36.152C180.564 37.416 180.348 38.88 180.348 40.544C180.348 42.048 180.54 43.448 180.924 44.744C181.324 46.024 181.964 47.064 182.844 47.864C183.724 48.648 184.9 49.04 186.372 49.04ZM210.995 53.48C209.267 53.48 207.627 53.208 206.075 52.664C204.539 52.104 203.243 51.232 202.187 50.048C201.147 48.864 200.491 47.336 200.219 45.464H205.355C205.579 46.376 205.971 47.12 206.531 47.696C207.107 48.272 207.787 48.696 208.571 48.968C209.355 49.224 210.155 49.352 210.971 49.352C212.459 49.352 213.659 49.096 214.571 48.584C215.499 48.072 215.963 47.28 215.963 46.208C215.963 45.424 215.707 44.8 215.195 44.336C214.683 43.872 213.867 43.52 212.747 43.28L208.019 42.2C205.923 41.736 204.235 40.968 202.955 39.896C201.691 38.824 201.051 37.312 201.035 35.36C201.019 33.888 201.387 32.576 202.139 31.424C202.891 30.272 204.011 29.368 205.499 28.712C206.987 28.04 208.827 27.704 211.019 27.704C213.915 27.704 216.235 28.352 217.979 29.648C219.723 30.928 220.619 32.76 220.667 35.144H215.699C215.523 34.072 215.019 33.24 214.187 32.648C213.355 32.04 212.275 31.736 210.947 31.736C209.571 31.736 208.443 32 207.563 32.528C206.683 33.056 206.243 33.864 206.243 34.952C206.243 35.704 206.579 36.296 207.251 36.728C207.923 37.16 208.931 37.528 210.275 37.832L214.739 38.912C216.019 39.232 217.067 39.664 217.883 40.208C218.699 40.752 219.339 41.352 219.803 42.008C220.267 42.648 220.587 43.312 220.763 44C220.955 44.672 221.051 45.296 221.051 45.872C221.051 47.472 220.635 48.84 219.803 49.976C218.987 51.096 217.827 51.96 216.323 52.568C214.819 53.176 213.043 53.48 210.995 53.48Z" fill="currentColor"/></svg>
diff --git a/src/icons/rays.svg b/src/icons/rays.svg
new file mode 100644
index 00000000..c9fab7ed
--- /dev/null
+++ b/src/icons/rays.svg
@@ -0,0 +1 @@
+<svg width="158" height="60" viewBox="0 0 158 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.9439 8.95955C30.653 9.76766 32.7864 14.1314 36.4713 20.2731C49.1102 41.2516 47.4293 41.4455 49.7243 41.4455C52.181 41.4455 51.8254 40.5404 44.3262 26.641C36.2774 11.7394 32.0429 6.115 30.9439 8.95955Z" fill="currentColor"/><path d="M28.7782 44.8716C28.3579 45.2918 28.5842 45.6477 30.0711 47.2639C32.3015 49.6559 36.0188 50.6579 36.0188 48.8801C35.9865 47.4255 29.7156 43.9341 28.7782 44.8716Z" fill="currentColor"/><path d="M23.5093 55.2477C7.92899 50.0758 2.53086 48.7828 0.688371 49.8818C-0.830874 50.7546 0.0742067 51.4011 4.3087 52.4678C7.92902 53.3405 14.5232 55.3447 20.9881 57.5104C26.2892 59.2882 27.5175 59.4822 29.0044 58.9327C31.0409 58.1245 29.8449 57.3488 23.5093 55.2477Z" fill="currentColor"/><path d="M56.4801 1.16938C56.1892 1.94516 57.8378 9.31479 59.2924 13.8725C59.6479 14.9715 60.3591 17.8807 60.8763 20.3051C61.846 25.0244 62.0076 25.2833 63.8501 25.2833C65.5956 25.2833 65.5956 25.3477 63.4945 17.4605C59.8419 3.72268 57.5468 -1.61052 56.4801 1.16938Z" fill="currentColor"/><path d="M18.2728 35.0776C20.7618 37.3403 21.5376 39.3121 23.9295 39.3121C27.7761 39.3121 27.9377 39.0535 23.3477 34.4311C14.8464 25.8651 6.70073 19.9175 4.95522 21.0165C3.30668 22.1155 9.57757 26.0914 18.2728 35.0776Z" fill="currentColor"/><path d="M135.351 28.0309C137.808 25.9621 139.424 23.8287 139.424 22.665C139.424 21.0488 137.42 20.5636 135.707 21.8243C124.297 30.1316 112.757 42.2856 114.664 43.9341C116.539 45.5503 118.446 44.322 126.786 36.144C130.471 32.5559 134.317 28.9036 135.351 28.0309Z" fill="currentColor"/><path d="M90.2267 2.07445C89.2247 5.33921 88.1903 13.0324 84.1498 29.2915C83.3417 32.524 83.3417 32.5883 84.376 33.558C85.2165 34.3338 86.8327 34.6251 87.6408 34.1079C88.3196 33.6877 93.7178 11.0606 95.0107 3.27045C95.4633 0.231962 91.3581 -1.67517 90.2267 2.07445Z" fill="currentColor"/><path d="M149.93 41.4455C140.103 44.1931 122.196 51.4011 121.193 53.0496C120.482 54.181 123.359 55.28 125.299 54.6012L132.507 52.0152C143.594 48.0394 157.235 42.221 157.235 41.4775C157.203 39.9583 155.231 39.9586 149.93 41.4455Z" fill="currentColor"/><path d="M114.502 8.24841C113.953 9.18582 112.304 11.7394 107.326 18.6245C105.064 21.7277 101.314 28.1925 101.314 28.9683C101.314 30.5199 105.71 25.154 113.209 14.4224C114.826 12.095 116.442 9.92928 116.83 9.60603C118.575 8.02214 115.537 6.5029 114.502 8.24841Z" fill="currentColor"/></svg>
diff --git a/src/icons/shield.svg b/src/icons/shield.svg
new file mode 100644
index 00000000..70a01ae2
--- /dev/null
+++ b/src/icons/shield.svg
@@ -0,0 +1 @@
+<svg width="96" height="122" viewBox="0 0 96 122" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.9721 93.8449C34.3435 92.6292 33.6075 92.6292 33.187 93.7392C32.6087 95.272 38.2338 99.1835 41.1252 99.1835C44.0167 99.1835 41.4932 95.9063 36.9721 93.8449Z" fill="currentColor"/><path d="M20.5703 79.9963C19.3086 80.472 19.8869 81.6348 22.6732 84.172C27.2469 88.3477 29.8755 88.7177 27.8777 84.912C26.248 81.8991 22.3577 79.2563 20.5703 79.9963Z" fill="currentColor"/><path d="M15.523 67.6268C14.6818 70.7454 15.8384 73.8116 17.8361 73.8116C19.6761 73.8116 20.2544 69.054 18.7298 67.0983C17.8361 65.9354 15.8384 66.3054 15.523 67.6268Z" fill="currentColor"/><path d="M16.4172 25.3949C17.9943 21.272 15.6286 14.3478 13.4206 16.5678C12.7898 17.2021 13.0526 24.3377 13.7886 25.342C14.6298 26.452 15.9966 26.5049 16.4172 25.3949Z" fill="currentColor"/><path d="M17.5732 58.2712C18.7298 57.8484 18.5726 52.5627 17.3634 51.4527C15.3657 49.6027 14.6292 50.2898 14.6292 53.9898C14.6292 57.5312 15.6281 58.9584 17.5732 58.2712Z" fill="currentColor"/><path d="M16.8898 41.1987C17.5207 37.8158 16.2589 33.6406 14.6292 33.6406C13.7355 33.6406 13.6304 34.0101 13.6304 36.9701C13.5778 41.6215 16.1538 44.9515 16.8898 41.1987Z" fill="currentColor"/><path d="M77.5572 35.5959C76.8738 36.2831 77.1892 40.9874 78.0304 41.7802C82.4989 46.1674 80.7641 32.3188 77.5572 35.5959Z" fill="currentColor"/><path d="M81.395 67.2044C81.395 65.3016 78.9241 64.1387 77.8201 65.513C76.979 66.5173 77.347 69.6887 76.243 71.8559C75.4544 73.4416 75.7173 74.023 77.5047 74.5516C78.8716 74.9216 81.395 73.5473 81.395 67.2044Z" fill="currentColor"/><path d="M79.555 26.7684C81.3424 26.7684 81.6052 26.1341 81.1847 22.2227C80.659 17.0958 77.8201 15.2455 76.7161 19.2627C75.4544 23.7027 76.611 26.7684 79.555 26.7684Z" fill="currentColor"/><path d="M94.2229 8.84999C93.8023 2.08427 87.3355 0.12898 80.659 0.0232653C62.9949 -0.293878 67.6218 2.71898 5.90264 3.72327C2.59064 3.77612 1.43386 3.51173 0.960713 7.05316C0.802999 8.32173 2.22232 55.417 2.69546 69.107C3.01089 78.6213 3.79941 77.0356 8.11027 82.427C12.6841 88.1356 22.0944 100.028 38.6018 117.048C49.2738 128.043 58.2635 118.212 93.0658 77.459C93.9595 76.4018 94.4852 75.1333 94.5378 73.759C95.3264 59.4876 95.5898 30.3627 94.2229 8.84999ZM90.3321 73.019C90.2795 73.0718 52.376 116.943 49.0115 116.943C47.8023 116.943 33.6601 104.68 25.4064 95.219C18.9401 87.819 13.8407 82.7447 9.8978 78.7804C8.89895 77.7761 8.32092 76.4542 8.26835 75.027C7.90035 63.9799 6.27027 15.0343 6.27027 14.9286C5.42913 8.47999 5.11365 8.5858 27.0361 8.69152C58.8418 8.90295 66.5698 5.67877 89.5961 5.8902C89.5435 49.709 91.9618 72.0676 90.3321 73.019Z" fill="currentColor"/><path d="M70.1447 80.2073C68.7252 81.3702 66.1492 85.0174 66.1492 85.9159C66.1492 87.8188 70.9858 85.3345 72.7207 82.5859C74.8235 79.1502 73.2464 77.6702 70.1447 80.2073Z" fill="currentColor"/><path d="M54.6361 96.0114C51.7446 99.5 51.64 99.7114 52.5863 100.663C54.1109 102.196 61.2601 96.4877 60.7869 94.1091C60.3664 91.6777 57.5275 92.5228 54.6361 96.0114Z" fill="currentColor"/><path d="M78.8715 59.1699C80.6064 59.8042 81.6058 55.1004 80.2915 52.6161C79.5029 51.189 77.347 51.2941 76.979 52.827C76.1904 55.9984 76.9264 58.4299 78.8715 59.1699Z" fill="currentColor"/></svg>
diff --git a/src/icons/smile.svg b/src/icons/smile.svg
new file mode 100644
index 00000000..736532a8
--- /dev/null
+++ b/src/icons/smile.svg
@@ -0,0 +1 @@
+<svg width="112" height="108" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M108.05 39.1961L105.823 31.6789L108.329 28.4074C117.586 16.2267 100.394 -2.84494 86.7513 4.46352C85.2896 5.22917 83.5497 5.29877 81.0439 4.67233C76.45 3.48905 61.4154 0.983301 58.3528 0.635279C48.1905 -0.617602 50.9745 4.32429 55.3596 4.74192C65.2434 5.78598 65.0347 5.22916 62.3897 8.01334C58.283 12.3984 61.8329 29.5211 68.3757 36.9688C74.2921 43.7204 88.6307 47.3399 93.0853 43.1636C101.925 34.8111 99.489 73.5111 90.3708 85.3439C61.9722 122.304 2.11214 86.6664 12.9008 39.1961L14.1539 33.6278L19.3046 37.0384C28.2836 43.0244 31.9725 40.0314 25.0816 32.3749C13.8057 19.9157 17.6341 4.04587 29.4669 14.1385C33.4344 17.5491 38.3067 18.0364 40.3253 15.3218C46.3113 7.10848 49.8608 10.0319 49.7912 18.802C49.7912 23.5351 47.564 26.7369 38.4458 35.2287C30.4413 42.6763 30.0933 45.1821 37.0537 45.1821C41.7172 45.1821 56.8213 27.2938 58.1438 20.2637C60.0231 10.3799 46.6591 2.30578 38.7242 8.50058C36.9145 9.96227 35.801 10.2407 35.1049 9.54464C34.4089 8.8486 34.548 7.59569 36.7754 6.34281C39.0027 5.08993 42.4133 4.1155 41.6477 2.02737C40.6036 -0.756811 32.8775 2.8626 31.8334 3.48905C30.7893 4.04588 27.0307 6.48203 23.8289 6.48203C12.8314 6.48203 8.6551 9.82303 9.55996 17.8275C10.0472 22.2822 9.76891 23.5351 7.26315 27.9898C-12.2957 62.6529 14.1539 106.434 55.1509 107.269C96.844 108.244 119.744 78.6619 108.05 39.1961ZM93.9901 31.9573C86.4728 40.3098 85.3592 40.6578 79.1644 37.0384C74.2225 34.115 70.1854 26.5281 69.3501 18.5236C68.5149 10.1015 72.8304 7.87413 80.2085 12.8856L83.8281 15.3914L87.4473 13.0249C97.8184 6.13402 111.461 12.6072 93.9901 31.9573Z" fill="currentColor"/><path d="M21.6716 54.7179C22.1588 56.1796 23.2028 61.0519 24.038 65.5762C30.2328 99.3344 84.3853 98.7079 87.1694 64.8802C87.5175 60.7039 88.283 57.0149 88.8399 56.6668C93.7122 53.5346 80.6962 49.3584 71.5084 51.1681C68.6546 51.7249 57.7267 51.8641 44.7107 51.5161C20.6276 50.8201 20.4883 50.82 21.6716 54.7179ZM80.6964 57.0149V62.1656C80.6964 81.3068 46.5203 91.8171 35.1748 76.0865C31.2769 70.7269 31.3466 67.4555 30.7898 57.3629C62.8079 56.3188 63.5737 56.458 80.6964 57.0149Z" fill="currentColor"/></svg>
diff --git a/src/icons/symbol.svg b/src/icons/symbol.svg
new file mode 100644
index 00000000..fdf32df3
--- /dev/null
+++ b/src/icons/symbol.svg
@@ -0,0 +1 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM36 67.2C53.2313 67.2 67.2 53.2313 67.2 36C67.2 18.7687 53.2313 4.8 36 4.8C18.7687 4.8 4.8 18.7687 4.8 36C4.8 53.2313 18.7687 67.2 36 67.2Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.001 12.7998C36.0009 12.7998 36.0008 12.7998 36.0008 12.7998C23.1878 12.7998 12.8008 23.1868 12.8008 35.9998C12.8008 48.8128 23.1878 59.1998 36.0008 59.1998C36.0008 59.1998 36.0009 59.1998 36.001 59.1998V12.7998Z" fill="white"/></svg>
diff --git a/src/routes/(app)/+error.svelte b/src/routes/(app)/+error.svelte
index d94eed63..5b52eda6 100644
--- a/src/routes/(app)/+error.svelte
+++ b/src/routes/(app)/+error.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoinosLogo from "virtual:icons/coinos/logo";
   import { back } from "$lib/utils";
   import { page } from "$app/stores";
 
@@ -10,7 +11,7 @@
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
   <div class="w-full flex">
     <a href="/" class="mx-auto" aria-label="Go to homepage">
-      <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
+      <CoinosLogo width="224" />
     </a>
   </div>
 
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 55fffb71..30e1cdaa 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+  import PhFadersBold from "virtual:icons/ph/faders-bold";
+  import PhChatBold from "virtual:icons/ph/chat-bold";
+  import PhNoteBold from "virtual:icons/ph/note-bold";
+  import PhUserBold from "virtual:icons/ph/user-bold";
+  import PhClock from "virtual:icons/ph/clock";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { f, loc, post, s, sats, success, fail } from "$lib/utils";
 
   let { data, children } = $props();
@@ -37,15 +43,15 @@
       <div class="break-words">{display || username}</div>
       {#if subject.id === user?.id}
         <a href="/settings/profile" class="flex items-center" aria-label="Profile settings">
-          <iconify-icon noobserver icon="ph:faders-bold" width="32"></iconify-icon>
+          <PhFadersBold width="32" />
         </a>
       {:else}
         <a href="/messages/{subject.pubkey}" aria-label="Direct Message">
-          <iconify-icon noobserver icon="ph:chat-bold" width="32"></iconify-icon>
+          <PhChatBold width="32" />
         </a>
       {/if}
       <!-- <a href={`/${subject.pubkey}/notes`}> -->
-      <!--   <iconify-icon noobserver icon="ph:note-bold" width="32"></iconify-icon> -->
+      <!--   <PhNoteBold width="32" /> -->
       <!-- </a> -->
     </div>
 
@@ -72,14 +78,12 @@
       <!-- {#if user &#38;&#38; user.username !== subject.username &#38;&#38; subject.pubkey} -->
       <!--   {#if following} -->
       <!--     <button class="btn" onclick={unfollow}> -->
-      <!--       <iconify-icon noobserver icon="ph:user-bold" width="32" -->
-      <!--       ></iconify-icon> -->
+      <!--       <PhUserBold width="32" /> -->
       <!--       <div class="my-auto">{$t("user.unfollow")}</div> -->
       <!--     </button> -->
       <!--   {:else} -->
       <!--     <button class="btn" onclick={follow}> -->
-      <!--       <iconify-icon noobserver icon="ph:user-bold" width="32" -->
-      <!--       ></iconify-icon> -->
+      <!--       <PhUserBold width="32" /> -->
       <!--       <div class="my-auto">{$t("user.follow")}</div> -->
       <!--     </button> -->
       <!--   {/if} -->
@@ -107,7 +111,7 @@
             aria-label="Reset password"
           >
             <div class="mx-auto flex">
-              <iconify-icon noobserver icon="ph:clock" width="32"></iconify-icon>
+              <PhClock width="32" />
             </div>
           </button>
         </form>
@@ -138,12 +142,12 @@
       {#if satsPerCurrency >= 1}
         <div>{f(1, currency, locale)} &#61;</div>
         <div class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
           {s(satsPerCurrency)}
         </div>
       {:else}
         <div class="flex items-center">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
           1
         </div>
         <div>&#61; {f(1 / satsPerCurrency, currency, locale)}</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 9c0d2203..69fdfed6 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import PhGearBold from "virtual:icons/ph/gear-bold";
+  import PhPlusBold from "virtual:icons/ph/plus-bold";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { browser } from "$app/environment";
   import { onMount } from "svelte";
   import Account from "$comp/Account.svelte";
@@ -100,7 +103,7 @@
       <div>{$t("user.settings.confirmAutoWithdrawalDesc")}</div>
 
       <a href="/settings/account" class="btn">
-        <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon>
+        <PhGearBold width="32" />
         Settings
       </a>
     </div>
@@ -117,7 +120,7 @@
     </div>
 
     <a href="/settings/profile" class="btn">
-      <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon>
+      <PhGearBold width="32" />
       {$t("user.settings.continueSettingUp")}
     </a>
   {/if}
@@ -130,7 +133,7 @@
         {#if adding}
           <Spinner />
         {:else}
-          <iconify-icon noobserver icon="ph:plus-bold" width="24"></iconify-icon>
+          <PhPlusBold width="24" />
           {$t("accounts.addAccount")}
         {/if}
       </button>
@@ -164,7 +167,7 @@
       class="contents"
     >
       <button class="btn btn-accent !text-2xl items-center !w-full sm:!max-w-[400px] mx-auto">
-        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+        <PhLightningFill class="text-yellow-300" />
         <div>{$t("user.pay")} {subject.username}</div>
       </button>
     </a>
diff --git a/src/routes/(app)/[username]/(profile)/notes/+page.svelte b/src/routes/(app)/[username]/(profile)/notes/+page.svelte
index 6a452be3..2d9a731c 100644
--- a/src/routes/(app)/[username]/(profile)/notes/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/notes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhNoteBold from "virtual:icons/ph/note-bold";
   import { t } from "$lib/translations";
   import Event from "$comp/Event.svelte";
   import { post } from "$lib/utils";
@@ -16,7 +17,7 @@
 
   {#if user?.id === subject.id}
     <a href={`/${user.username}/notes/new`} class="btn">
-      <iconify-icon noobserver icon="ph:note-bold" width="32"></iconify-icon>
+      <PhNoteBold width="32" />
       <div>Post a note</div>
     </a>
   {/if}
diff --git a/src/routes/(app)/[username]/accepted/[text]/+page.svelte b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
index be4cfe55..be3f5ec2 100644
--- a/src/routes/(app)/[username]/accepted/[text]/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import Qr from "$comp/Qr.svelte";
   import { back, copy } from "$lib/utils";
   import { t } from "$lib/translations";
@@ -43,7 +44,7 @@
   </div>
 
   <button onclick={() => copy(lnurl)} class="flex gap-1 m-auto my-8">
-    <iconify-icon icon="ph:copy-bold" width={32}></iconify-icon>
+    <PhCopyBold width={32} />
     {$t("user.copyLnurl")}
   </button>
 </div>
diff --git a/src/routes/(app)/[username]/accepted/create/+page.svelte b/src/routes/(app)/[username]/accepted/create/+page.svelte
index bb3d3395..c5648522 100644
--- a/src/routes/(app)/[username]/accepted/create/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/create/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhClipboardTextBold from "virtual:icons/ph/clipboard-text-bold";
+  import PhPaperPlaneRightBold from "virtual:icons/ph/paper-plane-right-bold";
   import { run, preventDefault } from "svelte/legacy";
 
   import { goto } from "$app/navigation";
@@ -49,8 +51,7 @@
         class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full bg-primary justify-center gap-2"
         onclick={paste}
       >
-        <iconify-icon noobserver icon="ph:clipboard-text-bold" width="32" class="my-auto"
-        ></iconify-icon>
+        <PhClipboardTextBold width="32" class="my-auto" />
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
 
@@ -59,8 +60,7 @@
         type="submit"
         class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
       >
-        <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32" class="my-auto invert"
-        ></iconify-icon>
+        <PhPaperPlaneRightBold width="32" class="my-auto invert" />
         <div class="my-auto">{$t("user.dashboard.go")}</div>
       </button>
     </div>
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index 3880d715..a5aacca5 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+  import CryptocurrencyColorBtc from "virtual:icons/cryptocurrency-color/btc";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
+  import PhEyeBold from "virtual:icons/ph/eye-bold";
+  import PhTrashBold from "virtual:icons/ph/trash-bold";
+  import PhWarningBold from "virtual:icons/ph/warning-bold";
   import { page } from "$app/stores";
   import Numpad from "$comp/Numpad.svelte";
   import Toggle from "$comp/Toggle.svelte";
@@ -139,7 +144,7 @@
     {#if account.type === "ark"}
       <img src="/images/ark.png" class="w-8 h-8 rounded-full object-cover bg-neutral" alt="Ark" />
     {:else if seed}
-      <iconify-icon noobserver icon="cryptocurrency-color:btc" width="32"></iconify-icon>
+      <CryptocurrencyColorBtc width="32" />
     {:else}
       <img src="/images/icon.png" class="w-8 h-8" alt="Coinos" />
     {/if}
@@ -199,7 +204,7 @@
             <label for="threshold" class="font-bold mb-1 block">{$t("user.settings.threshold")}</label>
             <button type="button" class="flex w-full" onclick={editThreshold}>
               <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">
                 {threshold}
@@ -218,7 +223,7 @@
       <div class="space-y-2">
         {#if seed || account.type === "ark"}
           <button onclick={() => goto(`/account/${id}/seed`)} type="button" class="btn">
-            <iconify-icon noobserver icon="ph:eye-bold" width="32"></iconify-icon>
+            <PhEyeBold width="32" />
             <div class="my-auto">{$t("accounts.viewMnemonic")}</div>
           </button>
         {/if}
@@ -250,7 +255,7 @@
 
         {#if seed || account.type === "ark"}
           <button onclick={() => (showDeleteConfirm = true)} type="button" class="btn">
-            <iconify-icon noobserver icon="ph:trash-bold" width="32" class="text-error"></iconify-icon>
+            <PhTrashBold width="32" class="text-error" />
             <div class="my-auto">{$t("accounts.deleteAccount")}</div>
           </button>
         {/if}
@@ -304,7 +309,7 @@
     onkeydown={(e) => e.key === "Escape" && (showDeleteConfirm = false)}
   >
     <div class="bg-base-100 rounded-2xl p-6 max-w-sm w-full space-y-4 text-center" role="none" onclick={(e) => e.stopPropagation()}>
-      <iconify-icon noobserver icon="ph:warning-bold" width="48" class="text-error"></iconify-icon>
+      <PhWarningBold width="48" class="text-error" />
       <h2 class="text-xl font-semibold">{$t("accounts.deleteAccount")}</h2>
       <p class="text-secondary">{$t("accounts.deleteConfirm")}</p>
       <div class="flex gap-2">
diff --git a/src/routes/(app)/account/[id]/seed/+page.svelte b/src/routes/(app)/account/[id]/seed/+page.svelte
index 3b7f8c56..b31a3102 100644
--- a/src/routes/(app)/account/[id]/seed/+page.svelte
+++ b/src/routes/(app)/account/[id]/seed/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhArrowLeftBold from "virtual:icons/ph/arrow-left-bold";
   import { page } from "$app/stores";
   import Mnemonic from "$comp/Mnemonic.svelte";
   import { goto } from "$app/navigation";
@@ -69,13 +71,13 @@
       <Mnemonic {mnemonic} />
 
       <button onclick={() => copy(mnemonic as string)} type="button" class="btn">
-        <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+        <PhCopyBold width="32" />
         <div class="my-auto">{$t("accounts.copy")}</div>
       </button>
     {/if}
 
     <button onclick={() => goto(`/account/${id}`)} type="button" class="btn btn-primary">
-      <iconify-icon noobserver icon="ph:arrow-left-bold" width="32"></iconify-icon>
+      <PhArrowLeftBold width="32" />
       <div class="my-auto">{$t("accounts.back")}</div>
     </button>
   </div>
diff --git a/src/routes/(app)/account/ark/+page.svelte b/src/routes/(app)/account/ark/+page.svelte
index 61360782..3d200070 100644
--- a/src/routes/(app)/account/ark/+page.svelte
+++ b/src/routes/(app)/account/ark/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhFingerprintBold from "virtual:icons/ph/fingerprint-bold";
   import { onMount } from "svelte";
   import { t } from "$lib/translations";
   import Spinner from "$comp/Spinner.svelte";
@@ -121,7 +122,7 @@
           </button>
         {/if}
         <button type="button" class="btn btn-accent" onclick={unlockWithPasskey}>
-          <iconify-icon noobserver icon="ph:fingerprint-bold" width="24"></iconify-icon>
+          <PhFingerprintBold width="24" />
           {$t("accounts.unlockWithPasskey")}
         </button>
         <a href={`/${user.username}`}>
diff --git a/src/routes/(app)/account/bitcoin/+page.svelte b/src/routes/(app)/account/bitcoin/+page.svelte
index e856d397..fd4afd81 100644
--- a/src/routes/(app)/account/bitcoin/+page.svelte
+++ b/src/routes/(app)/account/bitcoin/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhFilePlusBold from "virtual:icons/ph/file-plus-bold";
+  import PhFolderOpenBold from "virtual:icons/ph/folder-open-bold";
   import { t } from "$lib/translations";
 </script>
 
@@ -9,7 +11,7 @@
     <a href="/account/seed" class="block">
       <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200">
         <figure class="w-20 flex items-center justify-center">
-          <iconify-icon noobserver icon="ph:file-plus-bold" width="64"></iconify-icon>
+          <PhFilePlusBold width="64" />
         </figure>
         <div>
           <div class="text-xl">{$t("accounts.create")}</div>
@@ -20,7 +22,7 @@
     <a href="/account/import" class="block">
       <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200">
         <figure class="w-20 flex items-center justify-center">
-          <iconify-icon noobserver icon="ph:folder-open-bold" width="64"></iconify-icon>
+          <PhFolderOpenBold width="64" />
         </figure>
         <div>
           <div class="text-xl">{$t("accounts.import")}</div>
diff --git a/src/routes/(app)/account/new/+page.svelte b/src/routes/(app)/account/new/+page.svelte
index 4ad1fddb..da9b4c72 100644
--- a/src/routes/(app)/account/new/+page.svelte
+++ b/src/routes/(app)/account/new/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import LogosBitcoin from "virtual:icons/logos/bitcoin";
   import { t } from "$lib/translations";
   import Spinner from "$comp/Spinner.svelte";
   import { bytesToHex } from "@noble/hashes/utils.js";
@@ -52,7 +53,7 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     <a href="/account/bitcoin" class="block">
       <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200 gap-4 items-center">
-        <iconify-icon noobserver icon="logos:bitcoin" width={48}></iconify-icon>
+        <LogosBitcoin width={48} />
         <div>
           <div class="text-xl">{$t("accounts.bitcoinOnChain")}</div>
           <div class="text-secondary">
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index 1c970985..342852ca 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import Mnemonic from "$comp/Mnemonic.svelte";
   import { browser } from "$app/environment";
   import { tick, onMount } from "svelte";
@@ -67,7 +68,7 @@
     {/if}
 
     <button type="button" class="btn" onclick={() => copy($mnemonic)}>
-      <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+      <PhCopyBold width="32" />
       <div class="my-auto">{$t("payments.copy")}</div>
     </button>
 
diff --git a/src/routes/(app)/ecash/[id]/[...version]/+page.svelte b/src/routes/(app)/ecash/[id]/[...version]/+page.svelte
index 8367273f..c46838f5 100644
--- a/src/routes/(app)/ecash/[id]/[...version]/+page.svelte
+++ b/src/routes/(app)/ecash/[id]/[...version]/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import PhLinkBold from "virtual:icons/ph/link-bold";
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhHandCoinsBold from "virtual:icons/ph/hand-coins-bold";
   import { enhance } from "$app/forms";
   import { copy, sats, f, s } from "$lib/utils";
   import { t } from "$lib/translations";
@@ -38,12 +41,12 @@
 
 <div class="flex flex-wrap gap-2 text-xl">
   <button type="button" class="btn" onclick={() => copy(link)}>
-    <iconify-icon noobserver icon="ph:link-bold" width="32"></iconify-icon>
+    <PhLinkBold width="32" />
     <div class="my-auto">{$t("payments.shareLink")}</div>
   </button>
 
   <button type="button" class="btn" onclick={() => copy(peanut)}>
-    <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+    <PhCopyBold width="32" />
     <div class="my-auto">Copy {peanut} emoji</div>
   </button>
 
@@ -51,8 +54,7 @@
     {#if external}
       <a href={`/ecash/${id}/swap`} class="contents">
         <button type="submit" class="btn">
-          <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("payments.swap")}</div>
         </button>
       </a>
@@ -60,8 +62,7 @@
       <form method="POST" use:enhance class="w-full">
         <input type="hidden" name="token" value={token} />
         <button type="submit" class="btn">
-          <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("payments.redeem")}</div>
         </button>
       </form>
diff --git a/src/routes/(app)/fund/[id]/+page.svelte b/src/routes/(app)/fund/[id]/+page.svelte
index 7e123da0..94d768aa 100644
--- a/src/routes/(app)/fund/[id]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/+page.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+  import PhGearBold from "virtual:icons/ph/gear-bold";
+  import PhPlusBold from "virtual:icons/ph/plus-bold";
+  import PhHandCoinsBold from "virtual:icons/ph/hand-coins-bold";
+  import PhLinkBold from "virtual:icons/ph/link-bold";
+  import PhGiftBold from "virtual:icons/ph/gift-bold";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import Amount from "$comp/Amount.svelte";
   import Payments from "$comp/Payments.svelte";
   import { format } from "date-fns";
@@ -71,7 +77,7 @@
 
         {#if (user && !managers.length) || managers.some((m) => m.id === user?.id)}
           <a href={`/fund/${id}/access`} class="btn !w-auto ml-auto text-secondary grow">
-            <iconify-icon icon="ph:gear-bold" width={32}></iconify-icon>
+            <PhGearBold width={32} />
             {$t("funds.manage")}
           </a>
         {/if}
@@ -80,7 +86,7 @@
         <div class="grow">
           <a href={`/send/fund/${id}`}>
             <button class="btn">
-              <iconify-icon noobserver icon="ph:plus-bold" width="32"></iconify-icon>
+              <PhPlusBold width="32" />
               {$t("payments.addFunds")}
             </button>
           </a>
@@ -89,8 +95,7 @@
           <div class="grow">
             <a href={`/fund/${id}/withdraw`}>
               <button class="btn">
-                <iconify-icon noobserver icon="ph:hand-coins-bold" width="32" flip="horizontal"
-                ></iconify-icon>
+                <PhHandCoinsBold width="32" style="transform: scaleX(-1)" />
                 {$t("payments.takeFunds")}
               </button>
             </a>
@@ -99,20 +104,15 @@
       </div>
       <div class="flex gap-2" data-sveltekit-prefetch="off">
         <a href={`/qr/${href}`} class="btn !w-auto grow">
-          <iconify-icon noobserver icon="ph:link-bold" width="32"></iconify-icon>
+          <PhLinkBold width="32" />
           <div class="my-auto">{$t("payments.shareLink")}</div>
         </a>
         <a href={`${$page.url.pathname}/gift`} class="btn !w-auto grow">
-          <iconify-icon noobserver icon="ph:gift-bold" width="32"></iconify-icon>
+          <PhGiftBold width="32" />
           <div class="my-auto">{$t("payments.giftLink")}</div>
         </a>
         <!-- <a href={`/qr/${lnurlw}`} class="btn !w-auto grow"> -->
-        <!--   <iconify-icon -->
-        <!--     noobserver -->
-        <!--     icon="ph:lightning-fill" -->
-        <!--     width="24" -->
-        <!--     class="text-yellow-300" -->
-        <!--   ></iconify-icon> -->
+        <!--   <PhLightningFill width="24" class="text-yellow-300" /> -->
         <!--   {$t("payments.lnurlw")} -->
         <!-- </a> -->
       </div>
diff --git a/src/routes/(app)/fund/[id]/access/+page.svelte b/src/routes/(app)/fund/[id]/access/+page.svelte
index 49567675..d2d10ff0 100644
--- a/src/routes/(app)/fund/[id]/access/+page.svelte
+++ b/src/routes/(app)/fund/[id]/access/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import PhTrashBold from "virtual:icons/ph/trash-bold";
+  import PhPlusBold from "virtual:icons/ph/plus-bold";
+  import PhArrowLeftBold from "virtual:icons/ph/arrow-left-bold";
   import { focus, fail, post } from "$lib/utils";
   import { enhance } from "$app/forms";
   import { t } from "$lib/translations";
@@ -39,7 +42,7 @@
               class="ml-auto"
               aria-label={`Remove ${c.username}`}
             >
-              <iconify-icon icon="ph:trash-bold" width="32"></iconify-icon>
+              <PhTrashBold width="32" />
             </button>
           </div>
         </a>
@@ -49,13 +52,13 @@
         <input type="hidden" name="id" value={id} />
         <input use:focus name="username" bind:value={username} placeholder={$t("funds.username")} class="input" />
         <button type="submit" class="btn">
-          <iconify-icon icon="ph:plus-bold" width="32"></iconify-icon>
+          <PhPlusBold width="32" />
           {$t("funds.addManager")}
         </button>
       </form>
 
       <a href={`/fund/${id}`} class="btn">
-        <iconify-icon icon="ph:arrow-left-bold" width={32}></iconify-icon>
+        <PhArrowLeftBold width={32} />
         {$t("funds.returnToFund")}
       </a>
     </div>
diff --git a/src/routes/(app)/fund/[id]/gift/+page.svelte b/src/routes/(app)/fund/[id]/gift/+page.svelte
index ff05575d..c7c82ccd 100644
--- a/src/routes/(app)/fund/[id]/gift/+page.svelte
+++ b/src/routes/(app)/fund/[id]/gift/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhQrCodeBold from "virtual:icons/ph/qr-code-bold";
   import Amount from "$comp/Amount.svelte";
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
@@ -28,12 +30,12 @@
       class="btn break-all !h-auto flex-nowrap p-4 font-normal shrink !w-auto max-w-full"
       onclick={() => copy(text)}
     >
-      <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+      <PhCopyBold width="32" />
       <div class="my-auto break-all min-w-0 !w-auto max-w-full">{text}</div>
     </button>
 
     <a href={`/qr/${encodeURIComponent(text)}`} class="btn !w-auto" aria-label="Show gift QR">
-      <iconify-icon icon="ph:qr-code-bold" width={32}></iconify-icon>
+      <PhQrCodeBold width={32} />
     </a>
   </div>
 </div>
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 7903f510..d4a82652 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhClockBold from "virtual:icons/ph/clock-bold";
   import Amount from "$comp/Amount.svelte";
   import Success from "$comp/Success.svelte";
   import { t } from "$lib/translations";
@@ -14,7 +15,7 @@
 
 <div class="container px-4 text-center mx-auto">
   {#if pending}
-    <iconify-icon noobserver icon="ph:clock-bold" class="text-warning" width="160"></iconify-icon>
+    <PhClockBold width="160" class="text-warning" />
 
     <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
 
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index eb38a159..8ce3029f 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import { fiat, invoice as inv, request } from "$lib/store";
   import { loc, copy, focus, f, sat, get, s, sats } from "$lib/utils";
   import Slider from "$comp/Slider.svelte";
@@ -111,8 +112,7 @@
         </div>
         <div class="ml-auto text-lg flex gap-2" class:hidden={$fiat}>
           <div class="flex items-center">
-            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
-            ></iconify-icon>
+            <PhLightningFill class="text-yellow-300" />
             <div>{s(amount, locale)}</div>
           </div>
           <div class="flex items-center">
diff --git a/src/routes/(app)/ln/withdrawal/sent/+page.svelte b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
index 04fd65bd..879f6e16 100644
--- a/src/routes/(app)/ln/withdrawal/sent/+page.svelte
+++ b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCheckBold from "virtual:icons/ph/check-bold";
   import { scale } from "svelte/transition";
   import { toast } from "@zerodevx/svelte-toast";
   import { t } from "$lib/translations";
@@ -10,8 +11,7 @@
 
 <div class="text-center mt-20 md:mt-0">
   <div class="flex w-full max-w-[200px] mx-auto py-20" in:scale={{ start: 0.5 }}>
-    <iconify-icon noobserver icon="ph:check-bold" class="mx-auto w-full text-[#7ACC8F]"
-    ></iconify-icon>
+    <PhCheckBold class="mx-auto w-full text-[#7ACC8F]" />
   </div>
   <h1 class="text-3xl md:text-4xl font-bold mb-6">Request Sent!</h1>
 </div>
diff --git a/src/routes/(app)/messages/+layout.svelte b/src/routes/(app)/messages/+layout.svelte
index 2f7cd455..c923768c 100644
--- a/src/routes/(app)/messages/+layout.svelte
+++ b/src/routes/(app)/messages/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhArrowLeftBold from "virtual:icons/ph/arrow-left-bold";
+  import PhHouseBold from "virtual:icons/ph/house-bold";
   import { onMount, onDestroy } from "svelte";
   import Menu from "$comp/Menu.svelte";
   import { t } from "$lib/translations";
@@ -32,14 +34,14 @@
   <nav class="flex items-center p-4 gap-4 shrink-0">
     {#if isDetail}
       <a href="/messages" 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" aria-label="Back">
-        <iconify-icon noobserver icon="ph:arrow-left-bold" width={(w ?? 0) > 640 ? 32 : 24}></iconify-icon>
+        <PhArrowLeftBold width={(w ?? 0) > 640 ? 32 : 24} />
       </a>
     {/if}
 
     <div class="ml-auto flex items-center gap-4">
       <a href="/{user?.username}" data-sveltekit-preload-code="eager" aria-label="Home">
         <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" aria-label="Home">
-          <iconify-icon noobserver icon="ph:house-bold" width={(w ?? 0) > 640 ? 32 : 24}></iconify-icon>
+          <PhHouseBold width={(w ?? 0) > 640 ? 32 : 24} />
         </button>
       </a>
       <Menu {opacity} {user} t={$t} {w} />
diff --git a/src/routes/(app)/messages/[pubkey]/+page.svelte b/src/routes/(app)/messages/[pubkey]/+page.svelte
index 0828b057..da15aa94 100644
--- a/src/routes/(app)/messages/[pubkey]/+page.svelte
+++ b/src/routes/(app)/messages/[pubkey]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhPaperPlaneRightFill from "virtual:icons/ph/paper-plane-right-fill";
   import { tick, onMount, onDestroy } from "svelte";
   import { page } from "$app/state";
   import { decode } from "nostr-tools/nip19";
@@ -303,7 +304,7 @@
           onclick={() => sendMessage(text)}
           aria-label="Send"
         >
-          <iconify-icon noobserver icon="ph:paper-plane-right-fill" width="22"></iconify-icon>
+          <PhPaperPlaneRightFill width="22" />
         </button>
       </div>
       {#if sendError}
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 5f343f7a..aad0cf7f 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhArrowSquareOutBold from "virtual:icons/ph/arrow-square-out-bold";
   import { browser } from "$app/environment";
   import { onMount, tick } from "svelte";
   import { t, loading } from "$lib/translations";
@@ -84,7 +87,7 @@
     >
       <div class:hidden={!$fiat}>{f(toFiat(amount, rate), currency, userLocale)}</div>
       <div 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, userLocale)}
       </div>
     </button>
@@ -113,11 +116,11 @@
           onclick={(e) => { e.stopPropagation(); copy(value); }}
           aria-label="Copy {label}"
         >
-          <iconify-icon noobserver icon="ph:copy-bold" width="28" class="text-secondary"></iconify-icon>
+          <PhCopyBold width="28" class="text-secondary" />
         </button>
         {#if href}
           <a {href} target="_blank" rel="noreferrer" class="shrink-0 hover:opacity-80" onclick={(e) => e.stopPropagation()} aria-label="View in explorer">
-            <iconify-icon noobserver icon="ph:arrow-square-out-bold" width="20" class="text-secondary"></iconify-icon>
+            <PhArrowSquareOutBold width="20" class="text-secondary" />
           </a>
         {/if}
       </div>
@@ -143,7 +146,7 @@
     >
       <span class:hidden={!$fiat}>{f(toFiat(a, rate), currency, userLocale)}</span>
       <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(a, userLocale)}
       </span>
     </button>
@@ -196,7 +199,7 @@
     {:else if type === types.fund}
       <div class="pt-4">
         <a href={`/fund/${memo}`} class="btn btn-accent w-full">
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
           {$t("payments.viewFund")}
         </a>
       </div>
@@ -205,7 +208,7 @@
       <div class="pt-4">
         <a href={`/e/${eid}`} class="btn btn-accent w-full">
           <img src="/images/nostr.png" class="w-6" alt="Nostr" />
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <PhLightningFill class="text-yellow-300" />
           {$t("payments.zappedEvent")}
         </a>
       </div>
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index afce7711..cbe5d07c 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhFloppyDiskBold from "virtual:icons/ph/floppy-disk-bold";
   import Avatar from "$comp/Avatar.svelte";
   import Payments from "$comp/Payments.svelte";
   import { onMount } from "svelte";
@@ -231,7 +232,7 @@
   {#if payments.length}
     <div class="flex justify-center">
       <button class="btn !w-auto" onclick={csv}>
-        <iconify-icon noobserver icon="ph:floppy-disk-bold" width="32"></iconify-icon>
+        <PhFloppyDiskBold width="32" />
         <div class="my-auto">{$t("payments.export")}</div>
       </button>
     </div>
diff --git a/src/routes/(app)/qr/[text]/+page.svelte b/src/routes/(app)/qr/[text]/+page.svelte
index a337238e..9c030ef1 100644
--- a/src/routes/(app)/qr/[text]/+page.svelte
+++ b/src/routes/(app)/qr/[text]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import Qr from "$comp/Qr.svelte";
   import { back, copy } from "$lib/utils";
   let { data } = $props();
@@ -13,7 +14,7 @@
     class="btn break-all !h-auto flex-nowrap p-4 font-normal leading-normal"
     onclick={() => copy(text)}
   >
-    <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+    <PhCopyBold width="32" />
     <div class="my-auto">{text}</div>
   </button>
 </div>
diff --git a/src/routes/(app)/qr/create/+page.svelte b/src/routes/(app)/qr/create/+page.svelte
index e86cac68..b07bcd10 100644
--- a/src/routes/(app)/qr/create/+page.svelte
+++ b/src/routes/(app)/qr/create/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhClipboardTextBold from "virtual:icons/ph/clipboard-text-bold";
+  import PhPaperPlaneRightBold from "virtual:icons/ph/paper-plane-right-bold";
   import { run, preventDefault } from "svelte/legacy";
 
   import { goto } from "$app/navigation";
@@ -46,8 +48,7 @@
         class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full bg-primary justify-center gap-2"
         onclick={paste}
       >
-        <iconify-icon noobserver icon="ph:clipboard-text-bold" width="32" class="my-auto"
-        ></iconify-icon>
+        <PhClipboardTextBold width="32" class="my-auto" />
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
 
@@ -56,8 +57,7 @@
         type="submit"
         class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
       >
-        <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32" class="my-auto invert"
-        ></iconify-icon>
+        <PhPaperPlaneRightBold width="32" class="my-auto invert" />
         <div class="my-auto">{$t("user.dashboard.go")}</div>
       </button>
     </div>
diff --git a/src/routes/(app)/receive/[...token]/+page.svelte b/src/routes/(app)/receive/[...token]/+page.svelte
index ac714005..b13d3794 100644
--- a/src/routes/(app)/receive/[...token]/+page.svelte
+++ b/src/routes/(app)/receive/[...token]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhCameraBold from "virtual:icons/ph/camera-bold";
+  import PhClipboardTextBold from "virtual:icons/ph/clipboard-text-bold";
   import { run } from "svelte/legacy";
 
   import { page } from "$app/stores";
@@ -64,13 +66,13 @@
     <div class="flex gap-2">
       <a href="/scan" class="contents">
         <button type="button" class="btn !w-auto flex-grow">
-          <iconify-icon noobserver icon="ph:camera-bold" width="32"></iconify-icon>
+          <PhCameraBold width="32" />
           <div class="my-auto">{$t("user.send.scan")}</div>
         </button>
       </a>
 
       <button type="button" class="btn !w-auto flex-grow" onclick={paste}>
-        <iconify-icon noobserver icon="ph:clipboard-text-bold" width="32"></iconify-icon>
+        <PhClipboardTextBold width="32" />
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
     </div>
diff --git a/src/routes/(app)/reset/[code]/+page.svelte b/src/routes/(app)/reset/[code]/+page.svelte
index 036f3e8f..263c8963 100644
--- a/src/routes/(app)/reset/[code]/+page.svelte
+++ b/src/routes/(app)/reset/[code]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoinosLogo from "virtual:icons/coinos/logo";
   import { PUBLIC_RECAPTCHA_SITE_KEY } from "$env/static/public";
   import { browser } from "$app/environment";
   import { onDestroy, onMount, tick } from "svelte";
@@ -65,7 +66,7 @@
 <div class="pt-10">
   <div class="w-[243px] mx-auto mb-10">
     <a href="/" aria-label="Go to homepage">
-      <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
+      <CoinosLogo width="224" />
     </a>
   </div>
 
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index ea364b47..c1d0a918 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -1,4 +1,12 @@
 <script lang="ts">
+  import PhCameraBold from "virtual:icons/ph/camera-bold";
+  import PhClipboardTextBold from "virtual:icons/ph/clipboard-text-bold";
+  import PhPaperPlaneRightBold from "virtual:icons/ph/paper-plane-right-bold";
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
+  import PhPushPinFill from "virtual:icons/ph/push-pin-fill";
+  import PhPushPinBold from "virtual:icons/ph/push-pin-bold";
+  import PhStarFill from "virtual:icons/ph/star-fill";
+  import PhStarBold from "virtual:icons/ph/star-bold";
   import { invalidate } from "$app/navigation";
   import { page } from "$app/stores";
   import { fly } from "svelte/transition";
@@ -85,13 +93,13 @@
     <div class="flex gap-2">
       <a href="/scan" class="contents">
         <button type="button" class="btn !w-auto flex-grow">
-          <iconify-icon noobserver icon="ph:camera-bold" width="32"></iconify-icon>
+          <PhCameraBold width="32" />
           {$t("user.send.scan")}
         </button>
       </a>
 
       <button type="button" class="btn !w-auto flex-grow" onclick={paste}>
-        <iconify-icon noobserver icon="ph:clipboard-text-bold" width="32"></iconify-icon>
+        <PhClipboardTextBold width="32" />
         {$t("user.send.paste")}
       </button>
     </div>
@@ -108,14 +116,13 @@
     ></textarea>
 
     <button bind:this={el} type="submit" class="btn btn-accent">
-      <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"></iconify-icon>
+      <PhPaperPlaneRightBold width="32" />
       <div class="my-auto">{$t("user.send.next")}</div>
     </button>
 
     <a href="/send/fund" class="block">
       <button type="button" class="btn">
-        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
-        ></iconify-icon>
+        <PhLightningFill class="text-yellow-300 text-2xl" />
         <div class="my-auto">{$t("payments.createFund")}</div>
       </button>
     </a>
@@ -138,10 +145,11 @@
                   onclick={(e) => pin(e, c)}
                   aria-label={c.pinned ? "Unpin contact" : "Pin contact"}
                 >
-                  <iconify-icon
-                    icon={c.pinned ? "ph:push-pin-fill" : "ph:push-pin-bold"}
-                    width={32}
-                  ></iconify-icon>
+                  {#if c.pinned}
+    <PhPushPinFill width={32} />
+  {:else}
+    <PhPushPinBold width={32} />
+  {/if}
                 </button>
                 <button
                   type="button"
@@ -149,8 +157,11 @@
                   onclick={(e) => trust(e, c)}
                   aria-label={c.trusted ? "Untrust contact" : "Trust contact"}
                 >
-                  <iconify-icon icon={c.trusted ? "ph:star-fill" : "ph:star-bold"} width={32}
-                  ></iconify-icon>
+                  {#if c.trusted}
+    <PhStarFill width={32} />
+  {:else}
+    <PhStarBold width={32} />
+  {/if}
                 </button>
               </div>
             </div>
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 61c46b76..d945ec19 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhStarFill from "virtual:icons/ph/star-fill";
   import { invalidate } from "$app/navigation";
   import { tick, untrack } from "svelte";
   import handler from "$lib/handler";
@@ -190,7 +191,7 @@
 
       {#if !trusted}
         <button type="button" class="btn" onclick={toggleTrust}>
-          <iconify-icon icon="ph:star-fill" width={32}></iconify-icon>
+          <PhStarFill width={32} />
           {$t("payments.trustUser")}
         </button>
       {/if}
diff --git a/src/routes/(app)/settings/+layout.svelte b/src/routes/(app)/settings/+layout.svelte
index 1af541a6..8a4b36a2 100644
--- a/src/routes/(app)/settings/+layout.svelte
+++ b/src/routes/(app)/settings/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhFloppyDiskBold from "virtual:icons/ph/floppy-disk-bold";
   import { browser } from "$app/environment";
   import { onMount, tick } from "svelte";
   import { fly } from "svelte/transition";
@@ -307,7 +308,7 @@
       {#if submitting}
         <Spinner />
       {:else}
-        <iconify-icon icon="ph:floppy-disk-bold" width={32}></iconify-icon>
+        <PhFloppyDiskBold width={32} />
         <div class="my-auto">{$t("user.settings.saveSettings")}</div>
       {/if}
     </button>
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index bb9ddbc6..28cd9e4b 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhCheckBold from "virtual:icons/ph/check-bold";
+  import PhClockBold from "virtual:icons/ph/clock-bold";
   import { run } from "svelte/legacy";
   import { theme } from "$lib/store";
 
@@ -94,11 +96,9 @@
   <label class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2">
     <input type="text" name="email" class="clean" bind:value={email} />
     {#if verified}
-      <iconify-icon noobserver icon="ph:check-bold" class="text-success ml-auto" width="32"
-      ></iconify-icon>
+      <PhCheckBold width="32" class="text-success ml-auto" />
     {:else if email}
-      <iconify-icon noobserver icon="ph:clock-bold" class="text-warning ml-auto" width="32"
-      ></iconify-icon>
+      <PhClockBold width="32" class="text-warning ml-auto" />
     {/if}
   </label>
 </div>
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index f003ae18..61c33c4b 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -1,4 +1,13 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
+  import PhGearBold from "virtual:icons/ph/gear-bold";
+  import PhClockBold from "virtual:icons/ph/clock-bold";
+  import PhQrCodeBold from "virtual:icons/ph/qr-code-bold";
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhArrowSquareOutBold from "virtual:icons/ph/arrow-square-out-bold";
+  import PhPlusBold from "virtual:icons/ph/plus-bold";
+  import PhEyeSlashBold from "virtual:icons/ph/eye-slash-bold";
+  import PhWarningBold from "virtual:icons/ph/warning-bold";
   import { untrack } from "svelte";
   import { browser } from "$app/environment";
   import { getNsec } from "$lib/nostr";
@@ -68,8 +77,7 @@
             {#if app.max_amount > 0}
               <div class="flex gap-1 text-base">
                 <div class="flex items-center">
-                  <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
-                  ></iconify-icon>
+                  <PhLightningFill class="text-yellow-300" />
                   <span class:hidden={!($fiat && $rate)}>{f((app.spent * ($rate as number)) / sats, user.currency, locale)} / {f((app.max_amount * ($rate as number)) / sats, user.currency, locale)}</span>
                   <span class:hidden={$fiat && $rate}>{s(app.spent, locale)} / {s(app.max_amount, locale)}</span>
                 </div>
@@ -86,7 +94,7 @@
             aria-label={$t("accounts.edit")}
             title={$t("accounts.edit")}
           >
-            <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon>
+            <PhGearBold width="32" />
           </a>
 
           <a
@@ -95,7 +103,7 @@
             class:btn-disabled={!app.secret}
             title={$t("accounts.payments")}
           >
-            <iconify-icon icon="ph:clock-bold" width="32"></iconify-icon>
+            <PhClockBold width="32" />
           </a>
 
           <a
@@ -104,7 +112,7 @@
             class:btn-disabled={!app.secret}
             title={$t("user.receive.showQR")}
           >
-            <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
+            <PhQrCodeBold width="32" />
           </a>
         </div>
 
@@ -119,7 +127,7 @@
             class:btn-disabled={!app.secret}
             title={$t("accounts.copy")}
           >
-            <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
+            <PhCopyBold width="32" />
             <div>{$t("accounts.copyNwc")}</div>
           </button>
           <a
@@ -128,7 +136,7 @@
             class:btn-disabled={!app.secret}
             aria-label="Open nostr"
           >
-            <iconify-icon icon="ph:arrow-square-out-bold" width="32"></iconify-icon>
+            <PhArrowSquareOutBold width="32" />
             <div>{$t("accounts.connect")}</div>
           </a>
         </div>
@@ -136,7 +144,7 @@
     {/each}
 
     <a href="/apps/new" class="btn">
-      <iconify-icon icon="ph:plus-bold" width="32"></iconify-icon>
+      <PhPlusBold width="32" />
       {$t("accounts.newConection")}
     </a>
   </div>
@@ -146,11 +154,11 @@
   <div class="break-all grow">{nwc}</div>
   <div class="flex flex-wrap gap-2">
     <button onclick={() => copy(nwc)} type="button" class="btn grow">
-      <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+      <PhCopyBold width="32" />
       <div class="my-auto">{$t("accounts.copy")}</div>
     </button>
     <a href={`/qr/${encodeURIComponent(nwc)}`} class="btn grow">
-      <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+      <PhQrCodeBold width="32" />
       <div class="my-auto">{$t("user.receive.showQR")}</div>
     </a>
   </div>
@@ -167,7 +175,7 @@
         onclick={() => copy(npub)}
         aria-label="Copy"
       >
-        <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+        <PhCopyBold width="32" />
         {$t("accounts.copy")}
       </button>
 
@@ -176,7 +184,7 @@
         class="my-auto btn btn-circle !w-auto grow"
         aria-label="QR"
       >
-        <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+        <PhQrCodeBold width="32" />
         {$t("accounts.qr")}
       </a>
     </div>
@@ -199,10 +207,10 @@
     <div class="flex flex-wrap sm:flex-nowrap gap-2">
       <button type="button" class="btn !w-auto flex-grow" onclick={toggleNsec}>
         {#if revealNsec}
-          <iconify-icon noobserver icon="ph:eye-slash-bold" width="32"></iconify-icon>
+          <PhEyeSlashBold width="32" />
           {$t("user.settings.hideNsec")}
         {:else}
-          <iconify-icon noobserver icon="ph:warning-bold" width="32"></iconify-icon>
+          <PhWarningBold width="32" />
           {$t("user.settings.revealNsec")}
         {/if}
       </button>
@@ -216,7 +224,7 @@
       >
         <div>{nsec}</div>
 
-        <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+        <PhCopyBold width="32" />
       </button>
     {/if}
   </div>
diff --git a/src/routes/(app)/settings/profile/+page.svelte b/src/routes/(app)/settings/profile/+page.svelte
index a6e86d58..34072089 100644
--- a/src/routes/(app)/settings/profile/+page.svelte
+++ b/src/routes/(app)/settings/profile/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
+  import PhQrCodeBold from "virtual:icons/ph/qr-code-bold";
   import { tick } from "svelte";
   import { avatar, banner as bannerStore } from "$lib/store";
   import { t } from "$lib/translations";
@@ -209,14 +211,14 @@
           aria-label="Copy payment code"
           onclick={() => copy(`lightning:${lnurl}`)}
         >
-          <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+          <PhCopyBold width="32" />
         </button>
         <a
           href={`/${username}/accepted/${encodeURIComponent(`lightning:${lnurl}`)}`}
           class="my-auto"
           aria-label="Show payment code QR"
         >
-          <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+          <PhQrCodeBold width="32" />
         </a>
       </div>
     </div>
diff --git a/src/routes/(app)/settings/security/+page.svelte b/src/routes/(app)/settings/security/+page.svelte
index 68d3423a..dbd73b1b 100644
--- a/src/routes/(app)/settings/security/+page.svelte
+++ b/src/routes/(app)/settings/security/+page.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+  import PhLockKeyOpenBold from "virtual:icons/ph/lock-key-open-bold";
+  import PhLockKeyBold from "virtual:icons/ph/lock-key-bold";
+  import PhNumpadBold from "virtual:icons/ph/numpad-bold";
+  import PhDeviceMobileBold from "virtual:icons/ph/device-mobile-bold";
+  import PhFingerprintBold from "virtual:icons/ph/fingerprint-bold";
   import { getContext } from "svelte";
   import { tick } from "svelte";
   import { t } from "$lib/translations";
@@ -205,11 +210,11 @@
     <Pin bind:value={pin} title={$t("user.settings.setPIN")} {cancel} notify={false} />
   {:else}
     <button type="button" class="btn" onclick={togglePin}>
-      <iconify-icon
-        noobserver
-        icon={haspin ? "ph:lock-key-open-bold" : "ph:lock-key-bold"}
-        width="32"
-      ></iconify-icon>
+      {#if haspin}
+    <PhLockKeyOpenBold width="32" />
+  {:else}
+    <PhLockKeyBold width="32" />
+  {/if}
       {haspin ? $t("user.settings.disablePIN") : $t("user.settings.enablePIN")}
     </button>
   {/if}
@@ -231,17 +236,17 @@
     </div>
 
     <button type="button" class="btn" onclick={startConfirming2fa}>
-      <iconify-icon noobserver icon="ph:numpad-bold" width="32"></iconify-icon>
+      <PhNumpadBold width="32" />
       <div class="my-auto">Confirm</div>
     </button>
   {:else if user.twofa}
     <button type="button" class="btn" onclick={startDisabling2fa}>
-      <iconify-icon noobserver icon="ph:device-mobile-bold" width="32"></iconify-icon>
+      <PhDeviceMobileBold width="32" />
       <div class="my-auto">{$t("user.settings.twofaDisable")}</div>
     </button>
   {:else}
     <button type="button" class="btn" onclick={startEnabling2fa}>
-      <iconify-icon noobserver icon="ph:device-mobile-bold" width="32"></iconify-icon>
+      <PhDeviceMobileBold width="32" />
       <div class="my-auto">{$t("user.settings.twofaSetup")}</div>
     </button>
   {/if}
@@ -258,7 +263,7 @@
     {#if passkeyLoading}
       <Spinner />
     {:else}
-      <iconify-icon noobserver icon="ph:fingerprint-bold" width="32"></iconify-icon>
+      <PhFingerprintBold width="32" />
     {/if}
     Add Passkey
   </button>
diff --git a/src/routes/(app)/sign/+page.svelte b/src/routes/(app)/sign/+page.svelte
index f209fe90..e53e9f54 100644
--- a/src/routes/(app)/sign/+page.svelte
+++ b/src/routes/(app)/sign/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import { copy, focus } from "$lib/utils";
   import { enhance } from "$app/forms";
 
@@ -17,7 +18,7 @@
     <div class="text-2xl break-all">{signature}</div>
 
     <button onclick={() => copy(signature)} type="button" class="btn grow">
-      <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
+      <PhCopyBold width="32" />
       <div class="my-auto">Copy</div>
     </button>
   {:else}
diff --git a/src/routes/(app)/verify/[code]/+page.svelte b/src/routes/(app)/verify/[code]/+page.svelte
index 720066d2..8cfcaaef 100644
--- a/src/routes/(app)/verify/[code]/+page.svelte
+++ b/src/routes/(app)/verify/[code]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCheckBold from "virtual:icons/ph/check-bold";
   import { scale } from "svelte/transition";
   import { t } from "$lib/translations";
 
@@ -12,8 +13,7 @@
     <h1 class="text-3xl md:text-4xl font-bold mb-6">Email verification failed</h1>
   {:else if user.verified}
     <div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-      <iconify-icon noobserver icon="ph:check-bold" class="mx-auto w-full text-[#7ACC8F]"
-      ></iconify-icon>
+      <PhCheckBold class="mx-auto w-full text-[#7ACC8F]" />
     </div>
 
     <h1 class="text-3xl md:text-4xl font-bold mb-6">Email verified successfully!</h1>
diff --git a/src/routes/(static)/bounties/+page.svelte b/src/routes/(static)/bounties/+page.svelte
index 1623a8a6..cc2ac77c 100644
--- a/src/routes/(static)/bounties/+page.svelte
+++ b/src/routes/(static)/bounties/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhLightningFill from "virtual:icons/ph/lightning-fill";
   import Avatar from "$comp/Avatar.svelte";
   import { s } from "$lib/utils";
   import Amount from "$comp/Amount.svelte";
@@ -41,8 +42,7 @@
       <div class="flex max-w-xs sm:max-w-xl">
         <div>First {b}</div>
 
-        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 ml-auto"
-        ></iconify-icon>
+        <PhLightningFill class="text-yellow-300 ml-auto" />
         {s(100000, "en-CA")}
       </div>
     {/each}
@@ -55,8 +55,7 @@
       <div class="flex max-w-xs sm:max-w-xl">
         <div>{b.type}</div>
 
-        <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300 ml-auto"
-        ></iconify-icon>
+        <PhLightningFill class="text-yellow-300 ml-auto" />
         {s(b.amount, "en-CA")}
       </div>
     {/each}
@@ -101,8 +100,7 @@
           </div>
 
           <div class="ml-auto flex shrink-0 items-center gap-1 whitespace">
-            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
-            ></iconify-icon>
+            <PhLightningFill class="text-yellow-300" />
             <span class="text-sm font-semibold tabular-nums">{s(amount, "en-CA")}</span>
           </div>
         </div>
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index f607bee7..7c2f4b56 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhCopyBold from "virtual:icons/ph/copy-bold";
   import { copyNoNewlines as copy } from "$lib/utils";
   import { PUBLIC_DOMAIN, PUBLIC_COINOS_URL } from "$env/static/public";
 
@@ -20,7 +21,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/routes/(static)/login/+page.svelte b/src/routes/(static)/login/+page.svelte
index 20b56134..b5f3b701 100644
--- a/src/routes/(static)/login/+page.svelte
+++ b/src/routes/(static)/login/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhFingerprintBold from "virtual:icons/ph/fingerprint-bold";
   import { PUBLIC_RECAPTCHA_SITE_KEY } from "$env/static/public";
   import { browser } from "$app/environment";
   import handler from "$lib/handler";
@@ -386,7 +387,7 @@
       {#if passkeyLoading}
         <Spinner />
       {:else}
-        <iconify-icon noobserver icon="ph:fingerprint-bold" width="24"></iconify-icon>
+        <PhFingerprintBold width="24" />
       {/if}
       <div class="my-auto">Sign in with Passkey</div>
     </button>
diff --git a/src/routes/(static)/map/add/+page.svelte b/src/routes/(static)/map/add/+page.svelte
index f2052e28..a5351403 100644
--- a/src/routes/(static)/map/add/+page.svelte
+++ b/src/routes/(static)/map/add/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import PhArrowLeftBold from "virtual:icons/ph/arrow-left-bold";
   import { t } from "$lib/translations";
 </script>
 
@@ -57,7 +58,7 @@
 
   <div class="mt-10 flex justify-center">
     <a href="/map" class="btn btn-primary !w-auto !rounded-full px-8">
-      <iconify-icon noobserver icon="ph:arrow-left-bold" width="20"></iconify-icon>
+      <PhArrowLeftBold width="20" />
       {$t("mapAdd.backToMap")}
     </a>
   </div>
diff --git a/src/routes/(static)/register/+page.svelte b/src/routes/(static)/register/+page.svelte
index 9c196011..da84ee89 100644
--- a/src/routes/(static)/register/+page.svelte
+++ b/src/routes/(static)/register/+page.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+  import PhCaretLeftBold from "virtual:icons/ph/caret-left-bold";
+  import PhFolderBold from "virtual:icons/ph/folder-bold";
+  import PhCaretRightBold from "virtual:icons/ph/caret-right-bold";
+  import PhCameraBold from "virtual:icons/ph/camera-bold";
+  import PhImagesBold from "virtual:icons/ph/images-bold";
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -75,7 +80,7 @@
       onclick={decr}
       aria-label="Previous"
     >
-      <iconify-icon noobserver icon="ph:caret-left-bold" width="32"></iconify-icon>
+      <PhCaretLeftBold width="32" />
     </button>
     <button class="block relative w-32 mx-auto" onclick={() => isMobile ? (showUploadModal = true) : galleryInput.click()}>
       <div
@@ -88,7 +93,7 @@
         />
       </div>
       <div class="absolute bg-base-100 rounded-full p-2 -right-2 -bottom-2 z-10">
-        <iconify-icon noobserver icon="ph:folder-bold" width="24"></iconify-icon>
+        <PhFolderBold width="24" />
       </div>
     </button>
     <button
@@ -96,7 +101,7 @@
       onclick={incr}
       aria-label="Next"
     >
-      <iconify-icon noobserver icon="ph:caret-right-bold" width="32"></iconify-icon>
+      <PhCaretRightBold width="32" />
     </button>
   </div>
 
@@ -150,12 +155,12 @@
       <h2 class="text-lg font-semibold text-center">Upload photo</h2>
       {#if isMobile}
         <button class="btn w-full gap-2" onclick={() => cameraInput.click()}>
-          <iconify-icon noobserver icon="ph:camera-bold" width="24"></iconify-icon>
+          <PhCameraBold width="24" />
           Take photo
         </button>
       {/if}
       <button class="btn w-full gap-2" onclick={() => galleryInput.click()}>
-        <iconify-icon noobserver icon="ph:images-bold" width="24"></iconify-icon>
+        <PhImagesBold width="24" />
         Choose from gallery
       </button>
       <button class="btn w-full" onclick={() => (showUploadModal = false)}>
diff --git a/src/routes/(static)/register/auth/+page.svelte b/src/routes/(static)/register/auth/+page.svelte
index d31b8035..aca1f30c 100644
--- a/src/routes/(static)/register/auth/+page.svelte
+++ b/src/routes/(static)/register/auth/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import PhFingerprintBold from "virtual:icons/ph/fingerprint-bold";
+  import PhArrowLeftBold from "virtual:icons/ph/arrow-left-bold";
   import { PUBLIC_RECAPTCHA_SITE_KEY } from "$env/static/public";
   import { onDestroy, onMount } from "svelte";
   import { browser } from "$app/environment";
@@ -415,7 +417,7 @@
       {#if passkeyLoading}
         <Spinner />
       {:else}
-        <iconify-icon noobserver icon="ph:fingerprint-bold" width="24"></iconify-icon>
+        <PhFingerprintBold width="24" />
         <div class="my-auto">{$t("login.registerPasskey")}</div>
       {/if}
     </button>
@@ -442,7 +444,7 @@
     </p>
 
     <a href="/register" class="btn btn-ghost gap-2">
-      <iconify-icon noobserver icon="ph:arrow-left-bold" width="20"></iconify-icon>
+      <PhArrowLeftBold width="20" />
       Back
     </a>
   </form>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 04fd06b7..bf36046f 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import CoinosLogo from "virtual:icons/coinos/logo";
   import { page } from "$app/stores";
 
   let { data } = $props();
@@ -9,7 +10,7 @@
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
   <div class="w-full flex">
     <a href="/" class="mx-auto" aria-label="Go to homepage">
-      <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
+      <CoinosLogo width="224" />
     </a>
   </div>
 
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 5b5238b8..719e35d6 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,10 +1,8 @@
 import { browser } from "$app/environment";
 import { theme as themeStore } from "$lib/store";
 import { addTranslations, setLocale, setRoute } from "$lib/translations/index";
-import { addIcon } from "iconify-icon";
 import cookies from "js-cookie";
 
-export const ssr = false;
 const expires = new Date();
 expires.setSeconds(expires.getSeconds() + 21000000);
 const opts = { path: "/", expires };
@@ -31,45 +29,3 @@ export const load = async ({ data }) => {
     }
   }
 };
-
-addIcon("coinos:logo", {
-  body: ' <svg width="224" height="72" viewBox="0 0 224 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M69.8823 36C69.8823 54.7127 54.7127 69.8823 36 69.8823C17.2873 69.8823 2.11764 54.7127 2.11764 36C2.11764 17.2873 17.2873 2.11761 36 2.11761C54.7127 2.11761 69.8823 17.2873 69.8823 36Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M36 4.23529C18.4568 4.23529 4.23529 18.4568 4.23529 36C4.23529 53.5432 18.4568 67.7647 36 67.7647C53.5432 67.7647 67.7647 53.5432 67.7647 36C67.7647 18.4568 53.5432 4.23529 36 4.23529ZM0 36C0 16.1177 16.1177 0 36 0C55.8823 0 72 16.1177 72 36C72 55.8823 55.8823 72 36 72C16.1177 72 0 55.8823 0 36Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36 58.5882C48.4751 58.5882 58.5882 48.4751 58.5882 36C58.5882 23.5248 48.4751 13.4117 36 13.4117C23.5249 13.4117 13.4118 23.5248 13.4118 36C13.4118 48.4751 23.5249 58.5882 36 58.5882ZM36 54C45.9411 54 54 45.9411 54 36C54 26.0589 45.9411 18 36 18C26.0589 18 18 26.0589 18 36C18 45.9411 26.0589 54 36 54Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0001 22.8988C36.0001 22.8988 36 22.8988 36 22.8988C28.7644 22.8988 22.8988 28.7644 22.8988 36C22.8988 43.2356 28.7644 49.1012 36 49.1012C36 49.1012 36.0001 49.1012 36.0001 49.1012V22.8988Z" fill="currentColor"/><path d="M97.608 27.704C99.544 27.704 101.248 28.088 102.72 28.856C104.192 29.624 105.368 30.688 106.248 32.048C107.144 33.408 107.68 34.952 107.856 36.68H102.864C102.752 35.928 102.48 35.216 102.048 34.544C101.616 33.856 101.032 33.304 100.296 32.888C99.56 32.456 98.672 32.24 97.632 32.24C95.776 32.24 94.264 32.928 93.096 34.304C91.944 35.68 91.368 37.792 91.368 40.64C91.368 43.264 91.92 45.352 93.024 46.904C94.128 48.456 95.704 49.232 97.752 49.232C98.776 49.232 99.648 49.008 100.368 48.56C101.104 48.096 101.68 47.528 102.096 46.856C102.528 46.168 102.808 45.48 102.936 44.792H107.784C107.64 46.472 107.112 47.968 106.2 49.28C105.304 50.592 104.12 51.624 102.648 52.376C101.192 53.112 99.512 53.48 97.608 53.48C95.336 53.48 93.312 52.984 91.536 51.992C89.776 50.984 88.392 49.528 87.384 47.624C86.376 45.704 85.872 43.392 85.872 40.688C85.872 38.112 86.344 35.856 87.288 33.92C88.232 31.968 89.584 30.448 91.344 29.36C93.104 28.256 95.192 27.704 97.608 27.704ZM122.09 53.48C119.722 53.48 117.658 52.976 115.898 51.968C114.138 50.944 112.77 49.48 111.794 47.576C110.834 45.672 110.354 43.384 110.354 40.712C110.354 38.12 110.818 35.848 111.746 33.896C112.69 31.944 114.042 30.424 115.802 29.336C117.562 28.248 119.666 27.704 122.114 27.704C124.482 27.704 126.538 28.224 128.282 29.264C130.026 30.304 131.37 31.792 132.314 33.728C133.274 35.664 133.754 37.992 133.754 40.712C133.754 43.224 133.298 45.44 132.386 47.36C131.49 49.264 130.17 50.76 128.426 51.848C126.698 52.936 124.586 53.48 122.09 53.48ZM122.114 49.04C123.458 49.04 124.562 48.672 125.426 47.936C126.306 47.2 126.954 46.192 127.37 44.912C127.802 43.632 128.018 42.176 128.018 40.544C128.018 39.024 127.826 37.624 127.442 36.344C127.074 35.064 126.45 34.04 125.57 33.272C124.706 32.488 123.554 32.096 122.114 32.096C120.754 32.096 119.626 32.456 118.73 33.176C117.85 33.88 117.186 34.872 116.738 36.152C116.306 37.416 116.09 38.88 116.09 40.544C116.09 42.048 116.282 43.448 116.666 44.744C117.066 46.024 117.706 47.064 118.586 47.864C119.466 48.648 120.642 49.04 122.114 49.04ZM143.518 28.184V53H137.902V28.184H143.518ZM143.59 18.32V23.84H137.806V18.32H143.59ZM149.367 53V28.184H155.079V31.736C155.463 31.096 155.983 30.48 156.639 29.888C157.311 29.296 158.135 28.816 159.111 28.448C160.087 28.08 161.231 27.896 162.543 27.896C164.079 27.896 165.503 28.2 166.815 28.808C168.143 29.416 169.207 30.368 170.007 31.664C170.823 32.96 171.231 34.632 171.231 36.68V53H165.375V37.376C165.375 35.744 164.927 34.536 164.031 33.752C163.135 32.952 162.007 32.552 160.647 32.552C159.719 32.552 158.839 32.712 158.007 33.032C157.175 33.336 156.495 33.808 155.967 34.448C155.455 35.072 155.199 35.856 155.199 36.8V53H149.367ZM186.348 53.48C183.98 53.48 181.916 52.976 180.156 51.968C178.396 50.944 177.028 49.48 176.052 47.576C175.092 45.672 174.612 43.384 174.612 40.712C174.612 38.12 175.076 35.848 176.004 33.896C176.948 31.944 178.3 30.424 180.06 29.336C181.82 28.248 183.924 27.704 186.372 27.704C188.74 27.704 190.796 28.224 192.54 29.264C194.284 30.304 195.628 31.792 196.572 33.728C197.532 35.664 198.012 37.992 198.012 40.712C198.012 43.224 197.556 45.44 196.644 47.36C195.748 49.264 194.428 50.76 192.684 51.848C190.956 52.936 188.844 53.48 186.348 53.48ZM186.372 49.04C187.716 49.04 188.82 48.672 189.684 47.936C190.564 47.2 191.212 46.192 191.628 44.912C192.06 43.632 192.276 42.176 192.276 40.544C192.276 39.024 192.084 37.624 191.7 36.344C191.332 35.064 190.708 34.04 189.828 33.272C188.964 32.488 187.812 32.096 186.372 32.096C185.012 32.096 183.884 32.456 182.988 33.176C182.108 33.88 181.444 34.872 180.996 36.152C180.564 37.416 180.348 38.88 180.348 40.544C180.348 42.048 180.54 43.448 180.924 44.744C181.324 46.024 181.964 47.064 182.844 47.864C183.724 48.648 184.9 49.04 186.372 49.04ZM210.995 53.48C209.267 53.48 207.627 53.208 206.075 52.664C204.539 52.104 203.243 51.232 202.187 50.048C201.147 48.864 200.491 47.336 200.219 45.464H205.355C205.579 46.376 205.971 47.12 206.531 47.696C207.107 48.272 207.787 48.696 208.571 48.968C209.355 49.224 210.155 49.352 210.971 49.352C212.459 49.352 213.659 49.096 214.571 48.584C215.499 48.072 215.963 47.28 215.963 46.208C215.963 45.424 215.707 44.8 215.195 44.336C214.683 43.872 213.867 43.52 212.747 43.28L208.019 42.2C205.923 41.736 204.235 40.968 202.955 39.896C201.691 38.824 201.051 37.312 201.035 35.36C201.019 33.888 201.387 32.576 202.139 31.424C202.891 30.272 204.011 29.368 205.499 28.712C206.987 28.04 208.827 27.704 211.019 27.704C213.915 27.704 216.235 28.352 217.979 29.648C219.723 30.928 220.619 32.76 220.667 35.144H215.699C215.523 34.072 215.019 33.24 214.187 32.648C213.355 32.04 212.275 31.736 210.947 31.736C209.571 31.736 208.443 32 207.563 32.528C206.683 33.056 206.243 33.864 206.243 34.952C206.243 35.704 206.579 36.296 207.251 36.728C207.923 37.16 208.931 37.528 210.275 37.832L214.739 38.912C216.019 39.232 217.067 39.664 217.883 40.208C218.699 40.752 219.339 41.352 219.803 42.008C220.267 42.648 220.587 43.312 220.763 44C220.955 44.672 221.051 45.296 221.051 45.872C221.051 47.472 220.635 48.84 219.803 49.976C218.987 51.096 217.827 51.96 216.323 52.568C214.819 53.176 213.043 53.48 210.995 53.48Z" fill="currentColor"/></svg>',
-  width: 224,
-  height: 72,
-});
-
-addIcon("coinos:rays", {
-  body: '<svg width="158" height="60" viewBox="0 0 158 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.9439 8.95955C30.653 9.76766 32.7864 14.1314 36.4713 20.2731C49.1102 41.2516 47.4293 41.4455 49.7243 41.4455C52.181 41.4455 51.8254 40.5404 44.3262 26.641C36.2774 11.7394 32.0429 6.115 30.9439 8.95955Z" fill="currentColor"/><path d="M28.7782 44.8716C28.3579 45.2918 28.5842 45.6477 30.0711 47.2639C32.3015 49.6559 36.0188 50.6579 36.0188 48.8801C35.9865 47.4255 29.7156 43.9341 28.7782 44.8716Z" fill="currentColor"/><path d="M23.5093 55.2477C7.92899 50.0758 2.53086 48.7828 0.688371 49.8818C-0.830874 50.7546 0.0742067 51.4011 4.3087 52.4678C7.92902 53.3405 14.5232 55.3447 20.9881 57.5104C26.2892 59.2882 27.5175 59.4822 29.0044 58.9327C31.0409 58.1245 29.8449 57.3488 23.5093 55.2477Z" fill="currentColor"/><path d="M56.4801 1.16938C56.1892 1.94516 57.8378 9.31479 59.2924 13.8725C59.6479 14.9715 60.3591 17.8807 60.8763 20.3051C61.846 25.0244 62.0076 25.2833 63.8501 25.2833C65.5956 25.2833 65.5956 25.3477 63.4945 17.4605C59.8419 3.72268 57.5468 -1.61052 56.4801 1.16938Z" fill="currentColor"/><path d="M18.2728 35.0776C20.7618 37.3403 21.5376 39.3121 23.9295 39.3121C27.7761 39.3121 27.9377 39.0535 23.3477 34.4311C14.8464 25.8651 6.70073 19.9175 4.95522 21.0165C3.30668 22.1155 9.57757 26.0914 18.2728 35.0776Z" fill="currentColor"/><path d="M135.351 28.0309C137.808 25.9621 139.424 23.8287 139.424 22.665C139.424 21.0488 137.42 20.5636 135.707 21.8243C124.297 30.1316 112.757 42.2856 114.664 43.9341C116.539 45.5503 118.446 44.322 126.786 36.144C130.471 32.5559 134.317 28.9036 135.351 28.0309Z" fill="currentColor"/><path d="M90.2267 2.07445C89.2247 5.33921 88.1903 13.0324 84.1498 29.2915C83.3417 32.524 83.3417 32.5883 84.376 33.558C85.2165 34.3338 86.8327 34.6251 87.6408 34.1079C88.3196 33.6877 93.7178 11.0606 95.0107 3.27045C95.4633 0.231962 91.3581 -1.67517 90.2267 2.07445Z" fill="currentColor"/><path d="M149.93 41.4455C140.103 44.1931 122.196 51.4011 121.193 53.0496C120.482 54.181 123.359 55.28 125.299 54.6012L132.507 52.0152C143.594 48.0394 157.235 42.221 157.235 41.4775C157.203 39.9583 155.231 39.9586 149.93 41.4455Z" fill="currentColor"/><path d="M114.502 8.24841C113.953 9.18582 112.304 11.7394 107.326 18.6245C105.064 21.7277 101.314 28.1925 101.314 28.9683C101.314 30.5199 105.71 25.154 113.209 14.4224C114.826 12.095 116.442 9.92928 116.83 9.60603C118.575 8.02214 115.537 6.5029 114.502 8.24841Z" fill="currentColor"/></svg>',
-  width: 158,
-  height: 60,
-});
-
-addIcon("coinos:shield", {
-  body: '<svg width="96" height="122" viewBox="0 0 96 122" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.9721 93.8449C34.3435 92.6292 33.6075 92.6292 33.187 93.7392C32.6087 95.272 38.2338 99.1835 41.1252 99.1835C44.0167 99.1835 41.4932 95.9063 36.9721 93.8449Z" fill="currentColor"/><path d="M20.5703 79.9963C19.3086 80.472 19.8869 81.6348 22.6732 84.172C27.2469 88.3477 29.8755 88.7177 27.8777 84.912C26.248 81.8991 22.3577 79.2563 20.5703 79.9963Z" fill="currentColor"/><path d="M15.523 67.6268C14.6818 70.7454 15.8384 73.8116 17.8361 73.8116C19.6761 73.8116 20.2544 69.054 18.7298 67.0983C17.8361 65.9354 15.8384 66.3054 15.523 67.6268Z" fill="currentColor"/><path d="M16.4172 25.3949C17.9943 21.272 15.6286 14.3478 13.4206 16.5678C12.7898 17.2021 13.0526 24.3377 13.7886 25.342C14.6298 26.452 15.9966 26.5049 16.4172 25.3949Z" fill="currentColor"/><path d="M17.5732 58.2712C18.7298 57.8484 18.5726 52.5627 17.3634 51.4527C15.3657 49.6027 14.6292 50.2898 14.6292 53.9898C14.6292 57.5312 15.6281 58.9584 17.5732 58.2712Z" fill="currentColor"/><path d="M16.8898 41.1987C17.5207 37.8158 16.2589 33.6406 14.6292 33.6406C13.7355 33.6406 13.6304 34.0101 13.6304 36.9701C13.5778 41.6215 16.1538 44.9515 16.8898 41.1987Z" fill="currentColor"/><path d="M77.5572 35.5959C76.8738 36.2831 77.1892 40.9874 78.0304 41.7802C82.4989 46.1674 80.7641 32.3188 77.5572 35.5959Z" fill="currentColor"/><path d="M81.395 67.2044C81.395 65.3016 78.9241 64.1387 77.8201 65.513C76.979 66.5173 77.347 69.6887 76.243 71.8559C75.4544 73.4416 75.7173 74.023 77.5047 74.5516C78.8716 74.9216 81.395 73.5473 81.395 67.2044Z" fill="currentColor"/><path d="M79.555 26.7684C81.3424 26.7684 81.6052 26.1341 81.1847 22.2227C80.659 17.0958 77.8201 15.2455 76.7161 19.2627C75.4544 23.7027 76.611 26.7684 79.555 26.7684Z" fill="currentColor"/><path d="M94.2229 8.84999C93.8023 2.08427 87.3355 0.12898 80.659 0.0232653C62.9949 -0.293878 67.6218 2.71898 5.90264 3.72327C2.59064 3.77612 1.43386 3.51173 0.960713 7.05316C0.802999 8.32173 2.22232 55.417 2.69546 69.107C3.01089 78.6213 3.79941 77.0356 8.11027 82.427C12.6841 88.1356 22.0944 100.028 38.6018 117.048C49.2738 128.043 58.2635 118.212 93.0658 77.459C93.9595 76.4018 94.4852 75.1333 94.5378 73.759C95.3264 59.4876 95.5898 30.3627 94.2229 8.84999ZM90.3321 73.019C90.2795 73.0718 52.376 116.943 49.0115 116.943C47.8023 116.943 33.6601 104.68 25.4064 95.219C18.9401 87.819 13.8407 82.7447 9.8978 78.7804C8.89895 77.7761 8.32092 76.4542 8.26835 75.027C7.90035 63.9799 6.27027 15.0343 6.27027 14.9286C5.42913 8.47999 5.11365 8.5858 27.0361 8.69152C58.8418 8.90295 66.5698 5.67877 89.5961 5.8902C89.5435 49.709 91.9618 72.0676 90.3321 73.019Z" fill="currentColor"/><path d="M70.1447 80.2073C68.7252 81.3702 66.1492 85.0174 66.1492 85.9159C66.1492 87.8188 70.9858 85.3345 72.7207 82.5859C74.8235 79.1502 73.2464 77.6702 70.1447 80.2073Z" fill="currentColor"/><path d="M54.6361 96.0114C51.7446 99.5 51.64 99.7114 52.5863 100.663C54.1109 102.196 61.2601 96.4877 60.7869 94.1091C60.3664 91.6777 57.5275 92.5228 54.6361 96.0114Z" fill="currentColor"/><path d="M78.8715 59.1699C80.6064 59.8042 81.6058 55.1004 80.2915 52.6161C79.5029 51.189 77.347 51.2941 76.979 52.827C76.1904 55.9984 76.9264 58.4299 78.8715 59.1699Z" fill="currentColor"/></svg>',
-  width: 96,
-  height: 122,
-});
-
-addIcon("coinos:hand", {
-  body: '<svg width="106" height="100" viewBox="0 0 106 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M79.11 1.52264C73.8346 3.89945 70.9939 8.53715 70.5881 15.3777C70.0664 24.5371 67.9794 27.6676 65.6026 22.914C56.9649 5.87048 27.2838 1.05889 24.2693 16.2473C23.9215 17.8705 23.8634 17.8705 20.0953 17.8705C3.5156 17.7545 -6.04939 50.3922 5.83467 66.5661C6.64626 67.6676 5.48684 71.5516 2.06655 79.1459C0.153509 83.3777 0.385336 84.0734 3.74766 85.5806C6.82012 86.9719 7.80568 85.5227 13.9506 70.4502C14.8781 68.1893 14.8781 65.6386 13.9506 63.3777C12.5593 60.0154 10.8781 56.3053 9.54476 53.8125C5.13896 45.1748 8.03757 33.0009 16.2695 25.6966C23.8057 19.0299 31.5158 24.5371 24.9071 31.8995C15.8056 41.9864 24.4432 54.2183 37.8345 50.2183C49.8345 46.6821 50.2983 29.9284 38.4722 26.74C32.2114 25.0589 29.5446 16.2473 34.2982 13.0589C46.1243 5.05889 60.849 21.4647 59.2838 40.9429C58.4722 51.0879 68.6752 46.4502 68.6752 39.4937C68.6752 37.6966 69.139 36.711 70.994 34.5661C74.9361 29.9864 76.7911 25.1748 77.6607 16.885C78.4723 9.23279 88.4433 2.85597 91.2839 8.18931C93.081 11.5516 90.2402 29.5226 87.0518 34.6821C84.5011 38.856 75.4576 49.1168 72.5591 51.0879C68.791 53.6386 69.197 55.8415 73.6608 56.5951C75.8637 56.9429 76.2115 56.827 80.3274 53.4067C90.5883 44.885 93.8347 40.7111 96.2695 32.7111C98.0086 27.0299 100.559 28.3053 100.617 34.2183C100.675 46.3343 87.9794 60.4792 75.8055 65.4647C72.907 66.6821 72.7331 68.0154 75.2258 69.8705C78.936 72.5951 85.5446 69.7546 93.1388 62.1603C97.8924 57.4067 98.1244 57.2908 97.6027 59.2038C94.7621 70.2183 85.6028 79.3198 73.9506 82.7401C66.2405 85.0009 59.0521 86.6241 53.6608 87.3197C52.9071 87.5516 48.3273 87.3777 44.5012 91.4357C38.878 97.4067 47.5158 102.16 50.4724 97.4067C52.6753 93.8125 53.3708 93.4647 57.6607 93.4067C61.8926 93.4067 62.1244 93.3488 74.1244 89.9864C84.3273 87.1459 90.3563 84.1893 94.7041 79.9575C103.864 70.9719 107.69 57.9864 102.936 51.7256C101.893 50.3343 101.892 50.2763 103.574 46.6241C106.994 39.3198 106.182 29.6966 101.661 24.2473C100.037 22.2763 99.9216 21.7545 99.7477 17.0009C99.5158 5.75453 88.3274 -2.65127 79.11 1.52264ZM37.5446 30.2763C42.3562 32.7111 39.5158 45.2908 33.8926 46.6821C31.9216 47.2038 23.1678 42.6821 30.0084 33.2328C33.1388 28.885 34.0664 28.4792 37.5446 30.2763Z" fill="currentColor"/></svg>',
-  width: 106,
-  height: 100,
-});
-
-addIcon("coinos:bolt", {
-  body: '<svg width="96" height="121" viewBox="0 0 96 121" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36.3513 0.537301C35.0349 1.04923 34.3767 1.7805 34.523 2.58495C34.7424 3.8282 7.90261 40.1019 1.02817 62.1147C-1.09267 68.9891 2.3447 69.9398 17.995 66.9414C27.5022 65.1131 27.1365 63.2117 20.8471 80.9098C16.1666 93.9273 12.7296 104.824 11.1206 111.479C8.92668 120.255 13.5339 124.862 24.9426 112.942C29.8425 107.822 40.9586 96.3407 66.9937 66.649C89.0797 41.4914 89.0064 42.1496 71.6009 41.4914L60.8506 41.0526C65.8968 35.714 84.7646 15.3831 90.5421 10.6295C96.3195 5.80278 98.1481 3.82826 90.396 2.73127C81.4008 1.41489 50.9776 0.902981 42.0555 0.0985249C40.0078 -0.120872 37.4483 0.098507 36.3513 0.537301ZM79.7186 7.92365L75.9156 11.0684C66.6278 18.6741 48.2717 40.5406 48.2717 43.9047C48.2717 47.5613 54.4149 47.1957 70.2846 47.1957C46.8823 74.3278 28.5991 95.463 28.1603 95.463C28.0141 95.463 29.6963 90.6364 31.9634 84.6395C40.4467 61.8953 40.8855 57.6536 34.8887 58.385C24.5039 59.6282 14.3385 61.0177 12.949 61.4565C11.7057 61.8222 12.51 59.8476 17.1905 51.0717C25.5276 35.1289 28.8917 30.5215 43.5181 6.16846C71.3816 7.41171 71.089 7.41172 79.7186 7.92365Z" fill="currentColor"/></svg>',
-  width: 96,
-  height: 121,
-});
-
-addIcon("coinos:smile", {
-  body: '<svg width="112" height="108" viewBox="0 0 112 108" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M108.05 39.1961L105.823 31.6789L108.329 28.4074C117.586 16.2267 100.394 -2.84494 86.7513 4.46352C85.2896 5.22917 83.5497 5.29877 81.0439 4.67233C76.45 3.48905 61.4154 0.983301 58.3528 0.635279C48.1905 -0.617602 50.9745 4.32429 55.3596 4.74192C65.2434 5.78598 65.0347 5.22916 62.3897 8.01334C58.283 12.3984 61.8329 29.5211 68.3757 36.9688C74.2921 43.7204 88.6307 47.3399 93.0853 43.1636C101.925 34.8111 99.489 73.5111 90.3708 85.3439C61.9722 122.304 2.11214 86.6664 12.9008 39.1961L14.1539 33.6278L19.3046 37.0384C28.2836 43.0244 31.9725 40.0314 25.0816 32.3749C13.8057 19.9157 17.6341 4.04587 29.4669 14.1385C33.4344 17.5491 38.3067 18.0364 40.3253 15.3218C46.3113 7.10848 49.8608 10.0319 49.7912 18.802C49.7912 23.5351 47.564 26.7369 38.4458 35.2287C30.4413 42.6763 30.0933 45.1821 37.0537 45.1821C41.7172 45.1821 56.8213 27.2938 58.1438 20.2637C60.0231 10.3799 46.6591 2.30578 38.7242 8.50058C36.9145 9.96227 35.801 10.2407 35.1049 9.54464C34.4089 8.8486 34.548 7.59569 36.7754 6.34281C39.0027 5.08993 42.4133 4.1155 41.6477 2.02737C40.6036 -0.756811 32.8775 2.8626 31.8334 3.48905C30.7893 4.04588 27.0307 6.48203 23.8289 6.48203C12.8314 6.48203 8.6551 9.82303 9.55996 17.8275C10.0472 22.2822 9.76891 23.5351 7.26315 27.9898C-12.2957 62.6529 14.1539 106.434 55.1509 107.269C96.844 108.244 119.744 78.6619 108.05 39.1961ZM93.9901 31.9573C86.4728 40.3098 85.3592 40.6578 79.1644 37.0384C74.2225 34.115 70.1854 26.5281 69.3501 18.5236C68.5149 10.1015 72.8304 7.87413 80.2085 12.8856L83.8281 15.3914L87.4473 13.0249C97.8184 6.13402 111.461 12.6072 93.9901 31.9573Z" fill="currentColor"/><path d="M21.6716 54.7179C22.1588 56.1796 23.2028 61.0519 24.038 65.5762C30.2328 99.3344 84.3853 98.7079 87.1694 64.8802C87.5175 60.7039 88.283 57.0149 88.8399 56.6668C93.7122 53.5346 80.6962 49.3584 71.5084 51.1681C68.6546 51.7249 57.7267 51.8641 44.7107 51.5161C20.6276 50.8201 20.4883 50.82 21.6716 54.7179ZM80.6964 57.0149V62.1656C80.6964 81.3068 46.5203 91.8171 35.1748 76.0865C31.2769 70.7269 31.3466 67.4555 30.7898 57.3629C62.8079 56.3188 63.5737 56.458 80.6964 57.0149Z" fill="currentColor"/></svg>',
-  width: 112,
-  height: 108,
-});
-
-addIcon("coinos:symbol", {
-  body: `<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM36 67.2C53.2313 67.2 67.2 53.2313 67.2 36C67.2 18.7687 53.2313 4.8 36 4.8C18.7687 4.8 4.8 18.7687 4.8 36C4.8 53.2313 18.7687 67.2 36 67.2Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.001 12.7998C36.0009 12.7998 36.0008 12.7998 36.0008 12.7998C23.1878 12.7998 12.8008 23.1868 12.8008 35.9998C12.8008 48.8128 23.1878 59.1998 36.0008 59.1998C36.0008 59.1998 36.0009 59.1998 36.001 59.1998V12.7998Z" fill="white"/></svg>`,
-  width: 72,
-  height: 72,
-});
diff --git a/src/unplugin-icons.d.ts b/src/unplugin-icons.d.ts
new file mode 100644
index 00000000..5bf97592
--- /dev/null
+++ b/src/unplugin-icons.d.ts
@@ -0,0 +1,5 @@
+declare module "virtual:icons/*" {
+  import type { SvelteComponent } from "svelte";
+  const component: typeof SvelteComponent;
+  export default component;
+}
author	Adam Soltys <[email protected]>	2026-03-02 22:37:05 -0800
committer	Adam Soltys <[email protected]>	2026-03-02 22:37:05 -0800
commit	11d358ad0412b794ecf89b4da9f99ac41ed9c3fe (patch)
tree	61808f5d31df326ad7c3d459e16d4f6085368ad0 /src
parent	c0da099aa48f6bbc168159293bfae9e60daffeda (diff)
download	coinos-ui-11d358ad0412b794ecf89b4da9f99ac41ed9c3fe.tar.gz coinos-ui-11d358ad0412b794ecf89b4da9f99ac41ed9c3fe.zip