migrate icons

40 files changed, 87 insertions, 122 deletions

diff --git a/src/components/404.svelte b/src/components/404.svelte
index 7c2e45ee..2f5f7acd 100644
--- a/src/components/404.svelte
+++ b/src/components/404.svelte
@@ -1,15 +1,16 @@
 <script>
-  import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 </script>
 
 <div class="flex justify-center items-center mt-20">
   <div class="space-y-5 text-center">
     <a href="/">
-      <Icon icon="logo" style="mx-auto" />
+      <iconify-icon noobserver icon="coinos:logo" width="224" class="mx-auto"
+      ></iconify-icon>
     </a>
 
-    <Icon icon="question" style="mx-auto w-56" />
+    <iconify-icon noobserver icon="ph:question-bold" class="mx-auto w-56"
+    ></iconify-icon>
 
     <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 8f74b47c..ae1955c1 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { onMount } from "svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Image from "$comp/Image.svelte";
+  import { onMount } from "svelte";  import Image from "$comp/Image.svelte";
   import { t } from "$lib/translations";
 
   let team = [
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 2d1dba56..898f94c9 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -3,9 +3,7 @@
   import WalletPass from "$comp/WalletPass.svelte";
   import { run } from "svelte/legacy";
   import { onMount } from "svelte";
-  import { goto } from "$app/navigation";
-  import Icon from "$comp/Icon.svelte";
-  import Balance from "$comp/Balance.svelte";
+  import { goto } from "$app/navigation";  import Balance from "$comp/Balance.svelte";
   import { t } from "$lib/translations";
   import { arkkey } from "$lib/ark";
 
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 10d7604c..f499d587 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -22,11 +22,11 @@
   );
 
   const links = $derived([
-    // {
-    //   href: `/${user?.username}`,
-    //   icon: "ph:house-bold",
-    //   label: "Home",
-    // },
+    {
+      href: `/${user?.username}`,
+      icon: "ph:house-bold",
+      label: "Home",
+    },
     // {
     //   href: `/${user?.username}/receive`,
     //   icon: "ph:hand-coins-bold",
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index c076a3e9..d69d7666 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,6 +1,4 @@
-<script>
-  import Icon from "./Icon.svelte";
-  import { t } from "$lib/translations";
+<script>  import { t } from "$lib/translations";
   let { image, stepID } = $props();
 </script>
 
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
deleted file mode 100644
index 6d55bf94..00000000
--- a/src/components/Icon.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  let { icon, style = undefined } = $props();
-</script>
-
-<img src="/icons/{icon}.svg" alt={icon} class={style} />
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 812452cd..fe260753 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,8 +1,6 @@
 <script>
   import { focus } from "$lib/utils";
-  import { goto } from "$app/navigation";
-  import Icon from "$comp/Icon.svelte";
-  import Image from "$comp/Image.svelte";
+  import { goto } from "$app/navigation";  import Image from "$comp/Image.svelte";
   import { t } from "$lib/translations";
 </script>
 
diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte
index 41477a4e..8ed0429f 100644
--- a/src/components/LoadingSplash.svelte
+++ b/src/components/LoadingSplash.svelte
@@ -1,7 +1,4 @@
-<script>
-  import Icon from "$comp/Icon.svelte";
-</script>
-
 <div class="flex justify-center items-center">
-  <Icon icon="logo" style="mt-[calc(50vh-72px)]" />
+  <iconify-icon noobserver icon="coinos:logo" width="224" class="mt-[calc(50vh-72px)]"
+  ></iconify-icon>
 </div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 65c9bd6c..b3438864 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,7 +1,5 @@
 <script>
-  import Left from "$comp/Left.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { focus, post, warning } from "$lib/utils";
+  import Left from "$comp/Left.svelte";  import { focus, post, warning } from "$lib/utils";
   import { t } from "$lib/translations";
 
   let { v = $bindable(), cancel } = $props();
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
index 9c4c35bb..e3291f61 100644
--- a/src/components/WalletPass.svelte
+++ b/src/components/WalletPass.svelte
@@ -3,7 +3,6 @@
 
   import { focus } from "$lib/utils";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
   let { cancel, password = $bindable(), submit } = $props();
   let revealPassword = $state();
 </script>
@@ -43,7 +42,11 @@
           onclick={() => (revealPassword = !revealPassword)}
           class="absolute right-5 top-1/2"
         >
-          <Icon icon={revealPassword ? "eye" : "eye-off"} />
+          <iconify-icon
+            noobserver
+            icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+            width="32"
+          ></iconify-icon>
         </button>
       </div>
       <div class="w-full flex justify-center gap-2">
diff --git a/src/routes/(app)/+error.svelte b/src/routes/(app)/+error.svelte
index 64f8aaa0..38eb9238 100644
--- a/src/routes/(app)/+error.svelte
+++ b/src/routes/(app)/+error.svelte
@@ -1,6 +1,5 @@
 <script>
   import { back } from "$lib/utils";
-  import Icon from "$comp/Icon.svelte";
   import { page } from "$app/stores";
 
   let { data } = $props();
@@ -11,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">
-      <Icon icon="logo" />
+      <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
     </a>
   </div>
 
diff --git a/src/routes/(app)/[username]/accepted/[text]/+page.svelte b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
index 93a06903..fd2c7991 100644
--- a/src/routes/(app)/[username]/accepted/[text]/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
@@ -1,6 +1,4 @@
-<script>
-  import Icon from "$comp/Icon.svelte";
-  import Qr from "$comp/Qr.svelte";
+<script>  import Qr from "$comp/Qr.svelte";
   import { back, copy } from "$lib/utils";
   import { bech32 } from "@scure/base";
   import { page } from "$app/stores";
diff --git a/src/routes/(app)/[username]/accepted/create/+page.svelte b/src/routes/(app)/[username]/accepted/create/+page.svelte
index 74316ba9..b1997a36 100644
--- a/src/routes/(app)/[username]/accepted/create/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/create/+page.svelte
@@ -4,7 +4,6 @@
   import { goto } from "$app/navigation";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
   let el = $state(), text = $state(), pasted = $state();
 
   let keypress = (e) =>
@@ -47,7 +46,12 @@
         class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full bg-primary justify-center gap-2"
         onclick={paste}
       >
-        <Icon icon="paste" style="w-8 my-auto" />
+        <iconify-icon
+          noobserver
+          icon="ph:clipboard-text-bold"
+          width="32"
+          class="my-auto"
+        ></iconify-icon>
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
 
@@ -56,7 +60,12 @@
         type="submit"
         class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
       >
-        <Icon icon="send" style="w-8 my-auto invert" />
+        <iconify-icon
+          noobserver
+          icon="ph:paper-plane-right-bold"
+          width="32"
+          class="my-auto invert"
+        ></iconify-icon>
         <div class="my-auto">{$t("user.dashboard.go")}</div>
       </button>
     </div>
diff --git a/src/routes/(app)/account/cash/+page.svelte b/src/routes/(app)/account/cash/+page.svelte
index 8b2ddc68..9a94ab7f 100644
--- a/src/routes/(app)/account/cash/+page.svelte
+++ b/src/routes/(app)/account/cash/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
-</script>
+  import { t } from "$lib/translations";</script>
 
 <div class="space-y-5">
   <h1 class="text-center text-3xl font-semibold">Choose your custodian</h1>
diff --git a/src/routes/(app)/account/import/+page.svelte b/src/routes/(app)/account/import/+page.svelte
index 10440357..8275d694 100644
--- a/src/routes/(app)/account/import/+page.svelte
+++ b/src/routes/(app)/account/import/+page.svelte
@@ -6,7 +6,6 @@
   import { fail, focus, versions } from "$lib/utils";
   import { t } from "$lib/translations";
   import { browser } from "$app/environment";
-  import Icon from "$comp/Icon.svelte";
   import { validateMnemonic } from "@scure/bip39";
   import { wordlist } from "@scure/bip39/wordlists/english.js";
 
@@ -51,7 +50,12 @@
         type="submit"
         class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
       >
-        <Icon icon="send" style="w-8 my-auto invert" />
+        <iconify-icon
+          noobserver
+          icon="ph:paper-plane-right-bold"
+          width="32"
+          class="my-auto invert"
+        ></iconify-icon>
         <div class="my-auto">{$t("user.send.next")}</div>
       </button>
     </form>
diff --git a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
index 6a9845f4..530aa126 100644
--- a/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
+++ b/src/routes/(app)/ecash/[id]/[...version]/+layout.svelte
@@ -1,9 +1,6 @@
 <script>
   import { copy, sats, f, s } from "$lib/utils";
-  import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
-
-  let { data, children } = $props();
+  import { t } from "$lib/translations";  let { data, children } = $props();
 
   let { id, user, token, total, spent, external, mint, rate } = data;
   let currency = user?.currency || "USD";
diff --git a/src/routes/(app)/fund/[id]/authorize/[...amount]/+page.svelte b/src/routes/(app)/fund/[id]/authorize/[...amount]/+page.svelte
index b94c1ce9..b7c0c5cb 100644
--- a/src/routes/(app)/fund/[id]/authorize/[...amount]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/authorize/[...amount]/+page.svelte
@@ -3,9 +3,7 @@
   import Amount from "$comp/Amount.svelte";
   import Success from "$comp/Success.svelte";
   import { scale } from "svelte/transition";
-  import { toFiat, f, s } from "$lib/utils";
-  import Icon from "$comp/Icon.svelte";
-  import { t } from "$lib/translations";
+  import { toFiat, f, s } from "$lib/utils";  import { t } from "$lib/translations";
   import { loc } from "$lib/utils";
 
   let { data } = $props();
diff --git a/src/routes/(app)/fund/[id]/gift/+page.svelte b/src/routes/(app)/fund/[id]/gift/+page.svelte
index f7594126..c3baed72 100644
--- a/src/routes/(app)/fund/[id]/gift/+page.svelte
+++ b/src/routes/(app)/fund/[id]/gift/+page.svelte
@@ -1,9 +1,7 @@
 <script>
   import Amount from "$comp/Amount.svelte";
   import { t } from "$lib/translations";
-  import { page } from "$app/stores";
-  import Icon from "$comp/Icon.svelte";
-  import Qr from "$comp/Qr.svelte";
+  import { page } from "$app/stores";  import Qr from "$comp/Qr.svelte";
   import { loc, copy } from "$lib/utils";
 
   let { data } = $props();
diff --git a/src/routes/(app)/fund/[id]/sweep/[...amount]/+page.svelte b/src/routes/(app)/fund/[id]/sweep/[...amount]/+page.svelte
index 7a7d5402..f7a0c309 100644
--- a/src/routes/(app)/fund/[id]/sweep/[...amount]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/sweep/[...amount]/+page.svelte
@@ -4,9 +4,7 @@
   import Amount from "$comp/Amount.svelte";
   import Success from "$comp/Success.svelte";
   import { scale } from "svelte/transition";
-  import { toFiat, f, s } from "$lib/utils";
-  import Icon from "$comp/Icon.svelte";
-  import { t } from "$lib/translations";
+  import { toFiat, f, s } from "$lib/utils";  import { t } from "$lib/translations";
   import { loc } from "$lib/utils";
 
   let { data } = $props();
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 341bbf03..4ac33471 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -3,9 +3,7 @@
 
   import { browser } from "$app/environment";
   import { invoice as inv, request } from "$lib/store";
-  import { loc, copy, focus, f, sat, get, s, sats } from "$lib/utils";
-  import Icon from "$comp/Icon.svelte";
-  import Slider from "$comp/Slider.svelte";
+  import { loc, copy, focus, f, sat, get, s, sats } from "$lib/utils";  import Slider from "$comp/Slider.svelte";
   import { goto } from "$app/navigation";
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
diff --git a/src/routes/(app)/invoice/sent/+page.svelte b/src/routes/(app)/invoice/sent/+page.svelte
index b95bc85e..b7aedd30 100644
--- a/src/routes/(app)/invoice/sent/+page.svelte
+++ b/src/routes/(app)/invoice/sent/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-  import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { request } from "$lib/store";
+  import Avatar from "$comp/Avatar.svelte";  import { request } from "$lib/store";
 </script>
 
 Invoice sent to
diff --git a/src/routes/(app)/ln/withdrawal/sent/+page.svelte b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
index 961fa7a9..0f6471be 100644
--- a/src/routes/(app)/ln/withdrawal/sent/+page.svelte
+++ b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
@@ -1,6 +1,5 @@
 <script>
   import { scale } from "svelte/transition";
-  import Icon from "$comp/Icon.svelte";
   import { toast } from "@zerodevx/svelte-toast";
   import { t } from "$lib/translations";
 
@@ -14,7 +13,11 @@
     class="flex w-full max-w-[200px] mx-auto py-20"
     in:scale={{ start: 0.5 }}
   >
-    <Icon icon="check" style="mx-auto" />
+    <iconify-icon
+      noobserver
+      icon="ph:check-bold"
+      class="mx-auto w-full text-[#7ACC8F]"
+    ></iconify-icon>
   </div>
   <h1 class="text-3xl md:text-4xl font-bold mb-6">Request Sent!</h1>
 </div>
diff --git a/src/routes/(app)/messages/[recipient]/+page.svelte b/src/routes/(app)/messages/[recipient]/+page.svelte
index b47f9089..da7df62d 100644
--- a/src/routes/(app)/messages/[recipient]/+page.svelte
+++ b/src/routes/(app)/messages/[recipient]/+page.svelte
@@ -8,7 +8,6 @@
   import { scale, fade, fly } from "svelte/transition";
   import { enhance } from "$app/forms";
   import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
   import { back, fail, focus } from "$lib/utils";
   import { sign, send, encrypt, decrypt } from "$lib/nostr";
   import { event as e, password } from "$lib/store";
@@ -122,7 +121,7 @@
     data-sveltekit-preload-data="false"
     onclick={back}
   >
-    <Icon icon="arrow-left" style="w-10" />
+    <iconify-icon noobserver icon="ph:arrow-left-bold" width="40"></iconify-icon>
   </button>
 
   <div
@@ -182,7 +181,8 @@
       tabindex="0"
     ></div>
     <button type="submit" class="my-auto shrink-0">
-      <Icon icon="send" style="w-8" />
+      <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"
+      ></iconify-icon>
     </button>
   </form>
 </div>
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 71441dff..f91f2f26 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -15,7 +15,6 @@
     types,
   } from "$lib/utils";
   import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
   import { format } from "date-fns";
   import { PUBLIC_EXPLORER, PUBLIC_LIQUID_EXPLORER } from "$env/static/public";
   import locales from "$lib/locales";
@@ -209,7 +208,6 @@
           class="flex font-bold hover:opacity-80 mb-auto my-auto"
           onclick={() => copy(txid)}
         >
-          <Icon icon="copy" style="ml-2 w-12 my-auto" />
         </button>
       </div>
     </div>
@@ -224,7 +222,6 @@
           class="flex font-bold hover:opacity-80 mb-auto my-auto"
           onclick={() => copy(path)}
         >
-          <Icon icon="copy" style="ml-2 w-12 my-auto" />
         </button>
       </div>
     </div>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index c78428bb..5dc82ce3 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -14,9 +14,7 @@
     success,
     types,
   } from "$lib/utils";
-  import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { format } from "date-fns";
+  import Avatar from "$comp/Avatar.svelte";  import { format } from "date-fns";
   import { PUBLIC_EXPLORER as expl } from "$env/static/public";
 
   let { data } = $props();
diff --git a/src/routes/(app)/qr/[text]/+page.svelte b/src/routes/(app)/qr/[text]/+page.svelte
index 019c9216..2f6ca891 100644
--- a/src/routes/(app)/qr/[text]/+page.svelte
+++ b/src/routes/(app)/qr/[text]/+page.svelte
@@ -1,6 +1,4 @@
-<script>
-  import Icon from "$comp/Icon.svelte";
-  import Qr from "$comp/Qr.svelte";
+<script>  import Qr from "$comp/Qr.svelte";
   import { back, copy } from "$lib/utils";
   let { data } = $props();
   let { text } = $derived(data);
diff --git a/src/routes/(app)/qr/create/+page.svelte b/src/routes/(app)/qr/create/+page.svelte
index 74316ba9..b1997a36 100644
--- a/src/routes/(app)/qr/create/+page.svelte
+++ b/src/routes/(app)/qr/create/+page.svelte
@@ -4,7 +4,6 @@
   import { goto } from "$app/navigation";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
   let el = $state(), text = $state(), pasted = $state();
 
   let keypress = (e) =>
@@ -47,7 +46,12 @@
         class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full bg-primary justify-center gap-2"
         onclick={paste}
       >
-        <Icon icon="paste" style="w-8 my-auto" />
+        <iconify-icon
+          noobserver
+          icon="ph:clipboard-text-bold"
+          width="32"
+          class="my-auto"
+        ></iconify-icon>
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
 
@@ -56,7 +60,12 @@
         type="submit"
         class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
       >
-        <Icon icon="send" style="w-8 my-auto invert" />
+        <iconify-icon
+          noobserver
+          icon="ph:paper-plane-right-bold"
+          width="32"
+          class="my-auto invert"
+        ></iconify-icon>
         <div class="my-auto">{$t("user.dashboard.go")}</div>
       </button>
     </div>
diff --git a/src/routes/(app)/reset/[code]/+page.svelte b/src/routes/(app)/reset/[code]/+page.svelte
index c13bb7b1..29b9cbe0 100644
--- a/src/routes/(app)/reset/[code]/+page.svelte
+++ b/src/routes/(app)/reset/[code]/+page.svelte
@@ -4,7 +4,6 @@
   import { onDestroy, onMount, tick } from "svelte";
   import { t } from "$lib/translations";
   import PasswordInput from "$comp/PasswordInput.svelte";
-  import Icon from "$comp/Icon.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { fly } from "svelte/transition";
   import { password } from "$lib/store";
@@ -71,7 +70,7 @@
 <div class="pt-10">
   <div class="w-[243px] mx-auto mb-10">
     <a href="/">
-      <Icon icon="logo" />
+      <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
     </a>
   </div>
 
diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte
index 655346c8..23a277fe 100644
--- a/src/routes/(app)/scan/+page.svelte
+++ b/src/routes/(app)/scan/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { tick } from "svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { onMount, onDestroy } from "svelte";
+  import { tick } from "svelte";  import { onMount, onDestroy } from "svelte";
   import { back } from "$lib/utils";
   import { goto } from "$app/navigation";
 
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 28ef4a19..c8b828e7 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -6,9 +6,7 @@
   import { tick } from "svelte";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
-  import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Spinner from "$comp/Spinner.svelte";
+  import Avatar from "$comp/Avatar.svelte";  import Spinner from "$comp/Spinner.svelte";
   import { back, get, post, fail, focus } from "$lib/utils";
 
   let { data = $bindable(), form } = $props();
diff --git a/src/routes/(app)/send/ark/[address]/+page.svelte b/src/routes/(app)/send/ark/[address]/+page.svelte
index c6a3834c..086cf989 100644
--- a/src/routes/(app)/send/ark/[address]/+page.svelte
+++ b/src/routes/(app)/send/ark/[address]/+page.svelte
@@ -1,8 +1,6 @@
 <script>
   import { tick } from "svelte";
-  import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
+  import { t } from "$lib/translations";  import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
   import { rate } from "$lib/store";
   import { loc, fail, s } from "$lib/utils";
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index d1e5cb85..4e0bb43d 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -1,8 +1,6 @@
 <script>
   import { tick } from "svelte";
-  import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
+  import { t } from "$lib/translations";  import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
   import { rate } from "$lib/store";
   import { loc, fail, s } from "$lib/utils";
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index d5fd00a8..187c13c5 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -8,9 +8,7 @@
   import { pin } from "$lib/store";
   import { enhance } from "$app/forms";
   import Amount from "$comp/Amount.svelte";
-  import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
+  import Avatar from "$comp/Avatar.svelte";  import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
   import {
diff --git a/src/routes/(app)/settings/+layout.svelte b/src/routes/(app)/settings/+layout.svelte
index 88708843..bb53cc16 100644
--- a/src/routes/(app)/settings/+layout.svelte
+++ b/src/routes/(app)/settings/+layout.svelte
@@ -2,10 +2,7 @@
   import { browser } from "$app/environment";
   import { onMount, tick } from "svelte";
   import { fly } from "svelte/transition";
-  import { applyAction, deserialize } from "$app/forms";
-
-  import Icon from "$comp/Icon.svelte";
-  import Spinner from "$comp/Spinner.svelte";
+  import { applyAction, deserialize } from "$app/forms";  import Spinner from "$comp/Spinner.svelte";
   import Pin from "$comp/Pin.svelte";
   import { loading, t } from "$lib/translations";
   import { fd, fail, auth, post, sleep, warning, success } from "$lib/utils";
diff --git a/src/routes/(app)/verify/[code]/+page.svelte b/src/routes/(app)/verify/[code]/+page.svelte
index 57d22a3f..306aee0b 100644
--- a/src/routes/(app)/verify/[code]/+page.svelte
+++ b/src/routes/(app)/verify/[code]/+page.svelte
@@ -1,6 +1,5 @@
 <script>
   import { scale } from "svelte/transition";
-  import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 
   let { data } = $props();
@@ -17,7 +16,11 @@
       class="flex w-full py-5 max-w-[200px] mx-auto"
       in:scale={{ start: 0.5 }}
     >
-      <Icon icon="check" style="mx-auto" />
+      <iconify-icon
+        noobserver
+        icon="ph:check-bold"
+        class="mx-auto w-full text-[#7ACC8F]"
+      ></iconify-icon>
     </div>
 
     <h1 class="text-3xl md:text-4xl font-bold mb-6">
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index 37cc44bc..3f9d4157 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -2,10 +2,7 @@
   import { copyNoNewlines as copy } from "$lib/utils";
   import { PUBLIC_DOMAIN, PUBLIC_COINOS_URL } from "$env/static/public";
 
-  import Code from "$comp/Code.svelte";
-  import Icon from "$comp/Icon.svelte";
-
-  let { data } = $props();
+  import Code from "$comp/Code.svelte";  let { data } = $props();
 
   let { user, ro, token } = data;
 
diff --git a/src/routes/(static)/forgot/+page.svelte b/src/routes/(static)/forgot/+page.svelte
index 49a837ae..9a9d2d76 100644
--- a/src/routes/(static)/forgot/+page.svelte
+++ b/src/routes/(static)/forgot/+page.svelte
@@ -1,9 +1,7 @@
 <script>
   import { focus } from "$lib/utils";
   import { enhance } from "$app/forms";
-  import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
-  import Spinner from "$comp/Spinner.svelte";
+  import { t } from "$lib/translations";  import Spinner from "$comp/Spinner.svelte";
   import { fly } from "svelte/transition";
 
   let loading;
diff --git a/src/routes/(static)/support/+page.svelte b/src/routes/(static)/support/+page.svelte
index 1c0aa76d..db6ad37d 100644
--- a/src/routes/(static)/support/+page.svelte
+++ b/src/routes/(static)/support/+page.svelte
@@ -3,9 +3,7 @@
   import { browser } from "$app/environment";
   import { onDestroy, onMount } from "svelte";
   import { fail, success, post } from "$lib/utils";
-  import { scale } from "svelte/transition";
-  import Icon from "$comp/Icon.svelte";
-  import { t } from "$lib/translations";
+  import { scale } from "svelte/transition";  import { t } from "$lib/translations";
 
   let { data } = $props();
   let user = $derived(data.user);
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index bafa7039..9fbab0a7 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,5 +1,4 @@
 <script>
-  import Icon from "$comp/Icon.svelte";
   import { page } from "$app/stores";
 
   let { data } = $props();
@@ -10,7 +9,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">
-      <Icon icon="logo" />
+      <iconify-icon noobserver icon="coinos:logo" width="224"></iconify-icon>
     </a>
   </div>
 
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index faa34ddf..61d7823c 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -1,6 +1,4 @@
-<script>
-  import Icon from "$comp/Icon.svelte";
-  import LocationsMap from "$comp/LocationsMap.svelte";
+<script>  import LocationsMap from "$comp/LocationsMap.svelte";
   let { data } = $props();
 
   let locations = $derived(data.locations);