Use new icons

src/app/components/AlertAdd.svelte

@@ -15,6 +15,8 @@
   import type {Filter} from "@welshman/util"
   import {makeIntersectionFeed, makeRelayFeed, feedFromFilters} from "@welshman/feeds"
   import {pubkey, signer, waitForThunkError} from "@welshman/app"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -262,12 +264,12 @@
   </FieldInline>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Confirm</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/AlertItem.svelte

@@ -2,6 +2,7 @@
   import {parseJson} from "@welshman/lib"
   import {displayFeeds} from "@welshman/feeds"
   import {getAddress, getTagValue, getTagValues} from "@welshman/util"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import AlertDelete from "@app/components/AlertDelete.svelte"
@@ -34,7 +35,7 @@
 <div class="flex items-start justify-between gap-4">
   <div class="flex items-start gap-4">
     <Button class="py-1" onclick={startDelete}>
-      <Icon icon="trash-bin-2" />
+      <Icon icon={TrashBin2} />
     </Button>
     <div class="flex-inline gap-1">{description}</div>
   </div>

src/app/components/Alerts.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {getTagValue} from "@welshman/util"
+  import Inbox from "@assets/icons/inbox.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import AlertAdd from "@app/components/AlertAdd.svelte"
@@ -25,11 +27,11 @@
 <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
   <div class="flex items-center justify-between">
     <strong class="flex items-center gap-3">
-      <Icon icon="inbox" />
+      <Icon icon={Inbox} />
       Alerts
     </strong>
     <Button class="btn btn-primary btn-sm" onclick={startAlert}>
-      <Icon icon="add-circle" />
+      <Icon icon={AddCircle} />
       Add Alert
     </Button>
   </div>

src/app/components/BunkerUrl.svelte

@@ -3,6 +3,8 @@
   import Scanner from "@lib/components/Scanner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
+  import CpuBolt from "@assets/icons/cpu-bolt.svg?dataurl"
+  import QrCode from "@assets/icons/qr-code.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import InfoBunker from "@app/components/InfoBunker.svelte"
   import type {Nip46Controller} from "@app/util/nip46"
@@ -33,10 +35,10 @@
   {/snippet}
   {#snippet input()}
     <label class="input input-bordered flex w-full items-center gap-2">
-      <Icon icon="cpu" />
+      <Icon icon={CpuBolt} />
       <input disabled={$loading} bind:value={$bunker} class="grow" placeholder="bunker://" />
       <Button onclick={toggleScanner}>
-        <Icon icon="qr-code" />
+        <Icon icon={QrCode} />
       </Button>
     </label>
   {/snippet}

src/app/components/CalendarEventActions.svelte

@@ -11,6 +11,7 @@
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {makeCalendarPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
+  import Pen2 from "@assets/icons/pen-2.svg?dataurl"
 
   const {
     url,
@@ -47,7 +48,7 @@
         {#if event.pubkey === $pubkey}
           <li>
             <Button onclick={editEvent}>
-              <Icon size={4} icon="pen" />
+              <Icon size={4} icon={Pen2} />
               Edit Event
             </Button>
           </li>

src/app/components/CalendarEventForm.svelte

@@ -6,6 +6,9 @@
   import {publishThunk} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import {daysBetween} from "@lib/util"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
+  import MapPoint from "@assets/icons/map-point.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -131,7 +134,7 @@
           {#if $uploading}
             <span class="loading loading-spinner loading-xs"></span>
           {:else}
-            <Icon icon="gallery-send" />
+            <Icon icon={GallerySend} />
           {/if}
         </Button>
       </div>
@@ -159,14 +162,14 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="map-point" />
+        <Icon icon={MapPoint} />
         <input bind:value={location} class="grow" type="text" />
       </label>
     {/snippet}
   </Field>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={$uploading}>

src/app/components/CalendarEventHeader.svelte

@@ -6,6 +6,7 @@
     formatTimestampAsTime,
   } from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
+  import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
 
   type Props = {
@@ -24,7 +25,7 @@
 <div class="flex flex-grow flex-wrap justify-between gap-2">
   <p class="text-xl">{meta.title || meta.name}</p>
   <div class="flex items-center gap-2 text-sm">
-    <Icon icon="clock-circle" size={4} />
+    <Icon icon={ClockCircle} size={4} />
     <span class="sm:hidden">{formatTimestampAsDate(start)}</span>
     {formatTimestampAsTime(start)} — {isSingleDay
       ? formatTimestampAsTime(end)

src/app/components/CalendarEventMeta.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
+  import MapPoint from "@assets/icons/map-point.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
 
@@ -15,12 +17,12 @@
 
 <div class="flex min-w-0 flex-col gap-1 text-sm opacity-75">
   <span class="flex items-center gap-1">
-    <Icon icon="user-circle" size={4} />
+    <Icon icon={UserCircle} size={4} />
     Posted by <ProfileLink pubkey={event.pubkey} {url} />
   </span>
   {#if meta.location}
     <span class="flex items-start gap-1">
-      <Icon icon="map-point" class="mt-[2px]" size={4} />
+      <Icon icon={MapPoint} class="mt-[2px]" size={4} />
       <span class="break-words">{meta.location}</span>
     </span>
   {/if}

src/app/components/ChannelCompose.svelte

@@ -2,6 +2,8 @@
   import {writable} from "svelte/store"
   import type {EventContent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
+  import Plane from "@assets/icons/plane-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
@@ -48,7 +50,7 @@
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
-      <Icon icon="gallery-send" />
+      <Icon icon={GallerySend} />
     {/if}
   </Button>
   <div class="chat-editor flex-grow overflow-hidden">
@@ -59,6 +61,6 @@
     class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
     disabled={$uploading}
     onclick={submit}>
-    <Icon icon="plain" />
+    <Icon icon={Plane} />
   </Button>
 </form>

src/app/components/ChannelComposeParent.svelte

@@ -2,6 +2,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import {displayProfileByPubkey} from "@welshman/app"
   import {slide} from "@lib/transition"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
@@ -30,6 +31,6 @@
       expandMode="disabled" />
   {/key}
   <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
-    <Icon icon="close-circle" />
+    <Icon icon={CloseCircle} />
   </Button>
 </div>

src/app/components/ChannelMessage.svelte

@@ -5,6 +5,7 @@
   import {isMobile} from "@lib/html"
   import TapTarget from "@lib/components/TapTarget.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
@@ -103,7 +104,7 @@
       <ChannelMessageEmojiButton {url} {event} />
       {#if replyTo}
         <Button class="btn join-item btn-xs" onclick={reply}>
-          <Icon icon="reply" size={4} />
+          <Icon icon={Reply} size={4} />
         </Button>
       {/if}
       <ChannelMessageMenuButton {url} {event} />

src/app/components/ChannelMessageEmojiButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import {publishReaction, canEnforceNip70} from "@app/core/commands"
 
@@ -18,5 +19,5 @@
 </script>
 
 <EmojiButton {onEmoji} class="btn join-item btn-xs">
-  <Icon icon="smile-circle" size={4} />
+  <Icon icon={SmileCircle} size={4} />
 </EmojiButton>

src/app/components/ChannelMessageMenu.svelte

@@ -6,6 +6,9 @@
   import EventReport from "@app/components/EventReport.svelte"
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
   import {pushModal} from "@app/util/modal"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
+  import Danger from "@assets/icons/danger.svg?dataurl"
 
   const {url, event, onClick} = $props()
 
@@ -28,21 +31,21 @@
 <ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
   <li>
     <Button onclick={showInfo}>
-      <Icon size={4} icon="code-2" />
+      <Icon size={4} icon={Code2} />
       Message Details
     </Button>
   </li>
   {#if event.pubkey === $pubkey}
     <li>
       <Button onclick={showDelete} class="text-error">
-        <Icon size={4} icon="trash-bin-2" />
+        <Icon size={4} icon={TrashBin2} />
         Delete Message
       </Button>
     </li>
   {:else}
     <li>
       <Button class="text-error" onclick={report}>
-        <Icon size={4} icon="danger" />
+        <Icon size={4} icon={Danger} />
         Report Content
       </Button>
     </li>

src/app/components/ChannelMessageMenuButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {type Instance} from "tippy.js"
   import {between} from "@welshman/lib"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
@@ -29,7 +30,7 @@
 
 <div class="flex">
   <Button class="btn join-item btn-xs" onclick={open}>
-    <Icon icon="menu-dots" size={4} />
+    <Icon icon={MenuDots} size={4} />
   </Button>
   <Tippy
     bind:popover

src/app/components/ChannelMessageMenuMobile.svelte

@@ -11,6 +11,11 @@
   import {ENABLE_ZAPS} from "@app/core/state"
   import {publishReaction, canEnforceNip70} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
 
   type Props = {
     url: string
@@ -46,26 +51,26 @@
 
 <div class="col-2">
   <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon="smile-circle" />
+    <Icon size={4} icon={SmileCircle} />
     Send Reaction
   </Button>
   {#if ENABLE_ZAPS}
     <ZapButton replaceState {url} {event} class="btn btn-secondary w-full">
-      <Icon size={4} icon="bolt" />
+      <Icon size={4} icon={Bolt} />
       Send Zap
     </ZapButton>
   {/if}
   <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon="reply" />
+    <Icon size={4} icon={Reply} />
     Send Reply
   </Button>
   <Button class="btn btn-neutral" onclick={showInfo}>
-    <Icon size={4} icon="code-2" />
+    <Icon size={4} icon={Code2} />
     Message Details
   </Button>
   {#if event.pubkey === $pubkey}
     <Button class="btn btn-neutral text-error" onclick={showDelete}>
-      <Icon size={4} icon="trash-bin-2" />
+      <Icon size={4} icon={TrashBin2} />
       Delete Message
     </Button>
   {/if}

src/app/components/ChannelMessageZapButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
 
@@ -6,5 +7,5 @@
 </script>
 
 <ZapButton {url} {event} class="btn join-item btn-xs">
-  <Icon icon="bolt" size={4} />
+  <Icon icon={Bolt} size={4} />
 </ZapButton>

src/app/components/Chat.svelte

@@ -31,6 +31,7 @@
     inboxRelaySelectionsByPubkey,
   } from "@welshman/app"
   import type {AbstractThunk} from "@welshman/app"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -250,7 +251,7 @@
         <div
           class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
           data-tip="{count} {label} not configured.">
-          <Icon icon="danger" />
+          <Icon icon={Danger} />
           {count}
         </div>
       {/if}
@@ -264,7 +265,7 @@
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
         <p class="row-2 text-lg text-error">
-          <Icon icon="danger" />
+          <Icon icon={Danger} />
           Your inbox is not configured.
         </p>
         <p>
@@ -277,7 +278,7 @@
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
         <p class="row-2 text-lg text-error">
-          <Icon icon="danger" />
+          <Icon icon={Danger} />
           {missingInboxes.length}
           {missingInboxes.length > 1 ? "inboxes are" : "inbox is"} not configured.
         </p>

src/app/components/ChatCompose.svelte

@@ -2,6 +2,8 @@
   import {writable} from "svelte/store"
   import type {EventContent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
+  import Plane from "@assets/icons/plane-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
@@ -54,7 +56,7 @@
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
-      <Icon icon="gallery-send" />
+      <Icon icon={GallerySend} />
     {/if}
   </Button>
   <div class="chat-editor flex-grow overflow-hidden">
@@ -65,6 +67,6 @@
     class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
     disabled={$uploading}
     onclick={submit}>
-    <Icon icon="plain" />
+    <Icon icon={Plane} />
   </Button>
 </form>

src/app/components/ChatComposeParent.svelte

@@ -2,6 +2,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import {displayProfileByPubkey} from "@welshman/app"
   import {slide} from "@lib/transition"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
@@ -30,6 +31,6 @@
       expandMode="disabled" />
   {/key}
   <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
-    <Icon icon="close-circle" />
+    <Icon icon={CloseCircle} />
   </Button>
 </div>

src/app/components/ChatEnable.svelte

@@ -3,6 +3,8 @@
   import {WRAP} from "@welshman/util"
   import {repository} from "@welshman/app"
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -60,12 +62,12 @@
   </p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Enable Messages</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/ChatMenu.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ChatSquare from "@assets/icons/chat-square.svg?dataurl"
+  import Check from "@assets/icons/check.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
@@ -15,11 +17,11 @@
 
 <div class="col-2">
   <Button class="btn btn-primary" onclick={startChat}>
-    <Icon size={4} icon="add-circle" />
+    <Icon size={5} icon={ChatSquare} />
     Start chat
   </Button>
   <Button class="btn btn-neutral" onclick={markAsRead}>
-    <Icon size={4} icon="check-circle" />
+    <Icon size={5} icon={Check} />
     Mark all read
   </Button>
 </div>

src/app/components/ChatMessage.svelte

@@ -4,6 +4,7 @@
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {thunks, pubkey, deriveProfile, deriveProfileDisplay, sendWrapped} from "@welshman/app"
   import {isMobile} from "@lib/html"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
@@ -87,7 +88,7 @@
         class="opacity-0 transition-all"
         class:group-hover:opacity-100={!isMobile}
         onclick={togglePopover}>
-        <Icon icon="menu-dots" size={4} />
+        <Icon icon={MenuDots} size={4} />
       </button>
     </Tippy>
   {/if}

src/app/components/ChatMessageEmojiButton.svelte

@@ -2,6 +2,7 @@
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import {makeReaction} from "@app/core/commands"
@@ -18,5 +19,5 @@
 </script>
 
 <EmojiButton {onEmoji} class="btn join-item btn-xs">
-  <Icon icon="smile-circle" size={4} />
+  <Icon icon={SmileCircle} size={4} />
 </EmojiButton>

src/app/components/ChatMessageMenu.svelte

@@ -4,6 +4,8 @@
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/util/modal"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
 
   const {event, pubkeys, popover, replyTo} = $props()
 
@@ -19,10 +21,10 @@
   <ChatMessageEmojiButton {event} {pubkeys} />
   {#if replyTo}
     <Button class="btn join-item btn-xs" onclick={reply}>
-      <Icon size={4} icon="reply" />
+      <Icon size={4} icon={Reply} />
     </Button>
   {/if}
   <Button class="btn join-item btn-xs" onclick={showInfo}>
-    <Icon size={4} icon="code-2" />
+    <Icon size={4} icon={Code2} />
   </Button>
 </div>

src/app/components/ChatMessageMenuMobile.svelte

@@ -9,6 +9,10 @@
   import {makeReaction} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {clip} from "@app/util/toast"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
 
   type Props = {
     pubkeys: string[]
@@ -40,19 +44,19 @@
 
 <div class="col-2">
   <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon="smile-circle" />
+    <Icon size={4} icon={SmileCircle} />
     Send Reaction
   </Button>
   <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon="reply" />
+    <Icon size={4} icon={Reply} />
     Send Reply
   </Button>
   <Button class="btn btn-neutral w-full" onclick={copyText}>
-    <Icon size={4} icon="copy" />
+    <Icon size={4} icon={Copy} />
     Copy Text
   </Button>
   <Button class="btn btn-neutral" onclick={showInfo}>
-    <Icon size={4} icon="code-2" />
+    <Icon size={4} icon={Code2} />
     Message Details
   </Button>
 </div>

src/app/components/ChatStart.svelte

@@ -9,6 +9,8 @@
   import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -67,12 +69,12 @@
   </Field>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={pubkeys.length === 0}>
       Create Chat
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/Content.svelte

@@ -20,6 +20,7 @@
   } from "@welshman/content"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
@@ -122,7 +123,7 @@
 <div class="relative">
   {#if warning}
     <div class="card2 card2-sm bg-alt row-2">
-      <Icon icon="danger" />
+      <Icon icon={Danger} />
       <p>
         This note has been flagged by the author as "{warning}".<br />
         <Button class="link" onclick={ignoreWarning}>Show anyway</Button>

src/app/components/ContentLinkBlockImage.svelte

@@ -2,6 +2,7 @@
   import {onMount, onDestroy} from "svelte"
   import {displayUrl} from "@welshman/lib"
   import {getTags, decryptFile, getTagValue, tagsFromIMeta} from "@welshman/util"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import {imgproxy} from "@app/core/state"
 
@@ -44,7 +45,7 @@
 
 {#if hasError}
   <a href={url} class="link-content whitespace-nowrap">
-    <Icon icon="link-round" size={3} class="inline-block" />
+    <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
 {:else}

src/app/components/ContentLinkInline.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {displayUrl} from "@welshman/lib"
   import {preventDefault} from "@lib/html"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
@@ -16,12 +17,12 @@
 {#if url.match(/\.(jpe?g|png|gif|webp)$/)}
   <!-- Use a real link so people can copy the href -->
   <a href={url} class="link-content whitespace-nowrap" onclick={preventDefault(expand)}>
-    <Icon icon="link-round" size={3} class="inline-block" />
+    <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
 {:else}
   <Link external href={url} class="link-content whitespace-nowrap">
-    <Icon icon="link-round" size={3} class="inline-block" />
+    <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </Link>
 {/if}

src/app/components/ContentToken.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {clip} from "@app/util/toast"
@@ -9,6 +10,6 @@
 </script>
 
 <Button onclick={copy} class="link-content">
-  <Icon icon="bolt" size={3} class="inline-block translate-y-px" />
+  <Icon icon={Bolt} size={3} class="inline-block translate-y-px" />
   {value.slice(0, 16)}...
 </Button>

src/app/components/ConversationCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
@@ -40,7 +41,7 @@
     </div>
     <div class="ml-13 flex items-center justify-between">
       <div class="flex gap-1">
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         <span class="text-sm opacity-70">
           {events.length}
           {events.length === 1 ? "message" : "messages"}

src/app/components/EventActions.svelte

@@ -3,6 +3,9 @@
   import type {Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -42,11 +45,11 @@
 <Button class="join rounded-full">
   {#if ENABLE_ZAPS && !hideZap}
     <ZapButton {url} {event} class="btn join-item btn-neutral btn-xs">
-      <Icon icon="bolt" size={4} />
+      <Icon icon={Bolt} size={4} />
     </ZapButton>
   {/if}
   <EmojiButton {onEmoji} class="btn join-item btn-neutral btn-xs">
-    <Icon icon="smile-circle" size={4} />
+    <Icon icon={SmileCircle} size={4} />
   </EmojiButton>
   <Tippy
     bind:popover
@@ -54,7 +57,7 @@
     props={{url, noun, event, customActions, onClick: hidePopover}}
     params={{trigger: "manual", interactive: true}}>
     <Button class="btn join-item btn-neutral btn-xs" onclick={showPopover}>
-      <Icon icon="menu-dots" size={4} />
+      <Icon icon={MenuDots} size={4} />
     </Button>
   </Tippy>
 </Button>

src/app/components/EventActivity.svelte

@@ -7,6 +7,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import {repository} from "@welshman/app"
   import {notifications} from "@app/util/notifications"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
 
   const {url, path, event}: {url: string; path: string; event: TrustedEvent} = $props()
@@ -21,7 +22,7 @@
 </script>
 
 <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
-  <Icon icon="reply" />
+  <Icon icon={Reply} />
   <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
 </div>
 <div class="btn btn-neutral btn-xs relative hidden rounded-full sm:flex">

src/app/components/EventInfo.svelte

@@ -4,6 +4,9 @@
   import {LOCALE, secondsToDate} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {displayRelayUrl} from "@welshman/util"
+  import FileText from "@assets/icons/file-text.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -56,10 +59,10 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="file" />
+        <Icon icon={FileText} />
         <input type="text" class="ellipsize min-w-0 grow" value={nevent1} />
         <Button onclick={copyLink} class="flex items-center">
-          <Icon icon="copy" />
+          <Icon icon={Copy} />
         </Button>
       </label>
     {/snippet}
@@ -70,10 +73,10 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-circle" />
+        <Icon icon={UserCircle} />
         <input type="text" class="ellipsize min-w-0 grow" value={npub1} />
         <Button onclick={copyPubkey} class="flex items-center">
-          <Icon icon="copy" />
+          <Icon icon={Copy} />
         </Button>
       </label>
     {/snippet}
@@ -98,7 +101,7 @@
     <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
     <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
       <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
-        <Icon icon="copy" /> Copy
+        <Icon icon={Copy} /> Copy
       </Button>
     </p>
   </div>

src/app/components/EventMenu.svelte

@@ -11,6 +11,10 @@
   import EventShare from "@app/components/EventShare.svelte"
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
   import {pushModal} from "@app/util/modal"
+  import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
+  import Danger from "@assets/icons/danger.svg?dataurl"
 
   type Props = {
     url: string
@@ -43,14 +47,14 @@
   {#if isRoot}
     <li>
       <Button onclick={share}>
-        <Icon size={4} icon="share-circle" />
+        <Icon size={4} icon={ShareCircle} />
         Share to Chat
       </Button>
     </li>
   {/if}
   <li>
     <Button onclick={showInfo}>
-      <Icon size={4} icon="code-2" />
+      <Icon size={4} icon={Code2} />
       {noun} Details
     </Button>
   </li>
@@ -58,14 +62,14 @@
   {#if event.pubkey === $pubkey}
     <li>
       <Button onclick={showDelete} class="text-error">
-        <Icon size={4} icon="trash-bin-2" />
+        <Icon size={4} icon={TrashBin2} />
         Delete {noun}
       </Button>
     </li>
   {:else}
     <li>
       <Button class="text-error" onclick={report}>
-        <Icon size={4} icon="danger" />
+        <Icon size={4} icon={Danger} />
         Report Content
       </Button>
     </li>

src/app/components/EventReply.svelte

@@ -3,6 +3,7 @@
   import {writable} from "svelte/store"
   import {isMobile, preventDefault} from "@lib/html"
   import {fly} from "@lib/transition"
+  import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -81,7 +82,7 @@
         {#if $uploading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}
-          <Icon icon="paperclip" size={3} />
+          <Icon icon={Paperclip} size={3} />
         {/if}
       </Button>
     </div>

src/app/components/EventReport.svelte

@@ -3,6 +3,8 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -78,12 +80,12 @@
   </Field>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Send Report</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/EventShare.svelte

@@ -2,6 +2,8 @@
   import {goto} from "$app/navigation"
   import type {TrustedEvent} from "@welshman/util"
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -50,12 +52,12 @@
   </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={!selection}>
       Share {noun}
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/GoalCreate.svelte

@@ -3,6 +3,9 @@
   import {makeEvent, ZAP_GOAL} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
+  import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -114,7 +117,7 @@
         {#if $uploading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}
-          <Icon icon="paperclip" size={3} />
+          <Icon icon={Paperclip} size={3} />
         {/if}
       </Button>
     </div>
@@ -126,7 +129,7 @@
         {#snippet input()}
           <div class="flex flex-grow justify-end">
             <label class="input input-bordered flex items-center gap-2">
-              <Icon icon="bolt" />
+              <Icon icon={Bolt} />
               <input bind:value={amount} type="number" class="w-28" />
               <p class="opacity-50">sats</p>
             </label>
@@ -144,7 +147,7 @@
   </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">Create Goal</Button>

src/app/components/GoalSummary.svelte

@@ -4,6 +4,7 @@
   import {getTagValue, fromMsats, ZAP_RESPONSE} from "@welshman/util"
   import {deriveEventsMapped} from "@welshman/store"
   import {repository, getValidZap} from "@welshman/app"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
 
@@ -43,7 +44,7 @@
   </div>
   <progress class="progress progress-primary" value={zapAmount} max={goalAmount}></progress>
   <ZapButton {url} {event} class="btn btn-primary lg:m-auto lg:px-20">
-    <Icon icon="bolt" />
+    <Icon icon={Bolt} />
     Contribute to this goal
   </ZapButton>
 </div>

src/app/components/InfoKeys.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {session} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -39,11 +41,11 @@
     <p>If you'd like to switch to self-custody, please click below to get started.</p>
     <ModalFooter>
       <Button class="btn btn-link" onclick={back}>
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         Go back
       </Button>
       <Button class="btn btn-primary" onclick={startEject}>
-        <Icon icon="check-circle" />
+        <Icon icon={CheckCircle} />
         I want to hold my own keys
       </Button>
     </ModalFooter>

src/app/components/InfoZapperError.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {deriveZapperForPubkey} from "@welshman/app"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -29,7 +30,7 @@
   </p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
   </ModalFooter>

src/app/components/Landing.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Login from "@assets/icons/login-2.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
@@ -23,7 +25,7 @@
     <Button onclick={logIn}>
       <CardButton class="!btn-primary">
         {#snippet icon()}
-          <div><Icon icon="login-2" size={7} /></div>
+          <div><Icon icon={Login} size={7} /></div>
         {/snippet}
         {#snippet title()}
           <div>Log in</div>
@@ -36,7 +38,7 @@
     <Button onclick={signUp}>
       <CardButton>
         {#snippet icon()}
-          <div><Icon icon="add-circle" size={7} /></div>
+          <div><Icon icon={AddCircle} size={7} /></div>
         {/snippet}
         {#snippet title()}
           <div>Create an account</div>

src/app/components/LogIn.svelte

@@ -3,6 +3,10 @@
   import {Capacitor} from "@capacitor/core"
   import {getNip07, getNip55, Nip55Signer} from "@welshman/signer"
   import {addSession, type Session, makeNip07Session, makeNip55Session} from "@welshman/app"
+  import Widget from "@assets/icons/widget-2.svg?dataurl"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
+  import Compass from "@assets/icons/compass-big.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -96,7 +100,7 @@
       {#if loading === "nip07"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
-        <Icon icon="widget" />
+        <Icon icon={Widget} />
       {/if}
       Log in with Extension
     </Button>
@@ -116,7 +120,7 @@
       {#if loading === "password"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
-        <Icon icon="key" />
+        <Icon icon={Key} />
       {/if}
       Log in with Password
     </Button>
@@ -125,7 +129,7 @@
     onclick={loginWithBunker}
     {disabled}
     class="btn {hasSigner || BURROW_URL ? 'btn-neutral' : 'btn-primary'}">
-    <Icon icon="cpu" />
+    <Icon icon={Cpu} />
     Log in with Remote Signer
   </Button>
   {#if BURROW_URL && hasSigner}
@@ -133,7 +137,7 @@
       {#if loading === "password"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
-        <Icon icon="key" />
+        <Icon icon={Key} />
       {/if}
       Log in with Password
     </Button>
@@ -144,7 +148,7 @@
       {disabled}
       href="https://nostrapps.com#signers"
       class="btn {hasSigner || BURROW_URL ? '' : 'btn-neutral'}">
-      <Icon icon="compass" />
+      <Icon icon={Compass} />
       Browse Signer Apps
     </Link>
   {/if}

src/app/components/LogInBunker.svelte

@@ -6,6 +6,8 @@
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -133,13 +135,13 @@
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={$loading}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     {#if mode === "bunker"}
       <Button type="submit" class="btn btn-primary" disabled={$loading || !$bunker}>
         <Spinner loading={$loading}>Next</Spinner>
-        <Icon icon="alt-arrow-right" />
+        <Icon icon={AltArrowRight} />
       </Button>
     {/if}
   </ModalFooter>

src/app/components/LogInPassword.svelte

@@ -8,6 +8,10 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -121,7 +125,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-rounded" />
+        <Icon icon={UserRounded} />
         <input bind:value={email} />
       </label>
     {/snippet}
@@ -132,7 +136,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="key" />
+        <Icon icon={Key} />
         <input bind:value={password} type="password" />
       </label>
     {/snippet}
@@ -144,12 +148,12 @@
   </p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading || !email || !password}>
       <Spinner {loading}>Next</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/LogOut.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -32,7 +33,7 @@
   <p class="text-center">Your local database will be cleared.</p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>

src/app/components/MenuSettings.svelte

@@ -1,4 +1,9 @@
 <script lang="ts">
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import Server from "@assets/icons/server.svg?dataurl"
+  import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
+  import Exit from "@assets/icons/logout-3.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,7 +19,7 @@
   <Link replaceState href="/settings/profile">
     <CardButton>
       {#snippet icon()}
-        <div><Icon icon="user-rounded" size={7} /></div>
+        <div><Icon icon={UserRounded} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>Profile</div>
@@ -27,7 +32,7 @@
   <Link replaceState href="/settings/relays">
     <CardButton>
       {#snippet icon()}
-        <div><Icon icon="server" size={7} /></div>
+        <div><Icon icon={Server} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>Relays</div>
@@ -40,7 +45,7 @@
   <Link replaceState href="/settings">
     <CardButton>
       {#snippet icon()}
-        <div><Icon icon="settings" size={7} /></div>
+        <div><Icon icon={Settings} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>Settings</div>
@@ -53,7 +58,7 @@
   <Link replaceState href="/settings/about">
     <CardButton>
       {#snippet icon()}
-        <div><Icon icon="code-2" size={7} /></div>
+        <div><Icon icon={Code2} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>About</div>
@@ -64,6 +69,6 @@
     </CardButton>
   </Link>
   <Button onclick={logout} class="btn btn-neutral">
-    <Icon icon="exit" /> Log Out
+    <Icon icon={Exit} /> Log Out
   </Button>
 </div>

src/app/components/MenuSpace.svelte

@@ -3,6 +3,18 @@
   import {displayRelayUrl, getTagValue} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
   import {fly} from "@lib/transition"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Exit from "@assets/icons/logout-3.svg?dataurl"
+  import Login from "@assets/icons/login-2.svg?dataurl"
+  import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
+  import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic-2.svg?dataurl"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Popover from "@lib/components/Popover.svelte"
@@ -92,7 +104,7 @@
         <strong class="ellipsize flex items-center gap-3">
           {displayRelayUrl(url)}
         </strong>
-        <Icon icon="alt-arrow-down" />
+        <Icon icon={AltArrowDown} />
       </SecondaryNavItem>
       {#if showMenu}
         <Popover hideOnClick onClose={toggleMenu}>
@@ -101,25 +113,25 @@
             class="menu absolute z-popover mt-2 w-full gap-1 rounded-box bg-base-100 p-2 shadow-xl">
             <li>
               <Button onclick={showMembers}>
-                <Icon icon="user-rounded" />
+                <Icon icon={UserRounded} />
                 View Members ({members.length})
               </Button>
             </li>
             <li>
               <Button onclick={createInvite}>
-                <Icon icon="link-round" />
+                <Icon icon={LinkRound} />
                 Create Invite
               </Button>
             </li>
             <li>
               {#if $userRoomsByUrl.has(url)}
                 <Button onclick={leaveSpace} class="text-error">
-                  <Icon icon="exit" />
+                  <Icon icon={Exit} />
                   Leave Space
                 </Button>
               {:else}
                 <Button onclick={joinSpace} class="bg-primary text-primary-content">
-                  <Icon icon="login-2" />
+                  <Icon icon={Login} />
                   Join Space
                 </Button>
               {/if}
@@ -130,27 +142,27 @@
     </div>
     <div class="flex max-h-[calc(100vh-150px)] min-h-0 flex-col gap-1 overflow-auto">
       <SecondaryNavItem {replaceState} href={makeSpacePath(url)}>
-        <Icon icon="home-smile" /> Home
+        <Icon icon={HomeSmile} /> Home
       </SecondaryNavItem>
       {#if ENABLE_ZAPS}
         <SecondaryNavItem
           {replaceState}
           href={goalsPath}
           notification={$notifications.has(goalsPath)}>
-          <Icon icon="star-fall-minimalistic-2" /> Goals
+          <Icon icon={StarFallMinimalistic} /> Goals
         </SecondaryNavItem>
       {/if}
       <SecondaryNavItem
         {replaceState}
         href={threadsPath}
         notification={$notifications.has(threadsPath)}>
-        <Icon icon="notes-minimalistic" /> Threads
+        <Icon icon={NotesMinimalistic} /> Threads
       </SecondaryNavItem>
       <SecondaryNavItem
         {replaceState}
         href={calendarPath}
         notification={$notifications.has(calendarPath)}>
-        <Icon icon="calendar-minimalistic" /> Calendar
+        <Icon icon={CalendarMinimalistic} /> Calendar
       </SecondaryNavItem>
       {#if hasNip29($relay)}
         {#if $userRooms.length > 0}
@@ -174,7 +186,7 @@
           <MenuSpaceRoomItem {replaceState} {url} {room} />
         {/each}
         <SecondaryNavItem {replaceState} onclick={addRoom}>
-          <Icon icon="add-circle" />
+          <Icon icon={AddCircle} />
           Create room
         </SecondaryNavItem>
       {:else}
@@ -182,14 +194,14 @@
           {replaceState}
           href={chatPath}
           notification={$notifications.has(chatPath)}>
-          <Icon icon="chat-round" /> Chat
+          <Icon icon={ChatRound} /> Chat
         </SecondaryNavItem>
       {/if}
     </div>
   </SecondaryNavSection>
   <div class="p-4">
     <button class="btn btn-neutral btn-sm w-full" onclick={manageAlerts}>
-      <Icon icon="bell" />
+      <Icon icon={Bell} />
       Manage Alerts
     </button>
   </div>

src/app/components/MenuSpaceButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
@@ -14,7 +15,7 @@
 </script>
 
 <Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
-  <Icon icon="menu-dots" />
+  <Icon icon={MenuDots} />
   {#if $notifications.has(path)}
     <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary"></div>
   {/if}

src/app/components/MenuSpaceRoomItem.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Lock from "@assets/icons/lock-keyhole.svg?dataurl"
+  import Hashtag from "@assets/icons/hashtag-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
@@ -24,9 +26,9 @@
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
   {#if $channel?.closed || $channel?.private}
-    <Icon icon="lock" size={4} />
+    <Icon icon={Lock} size={4} />
   {:else}
-    <Icon icon="hashtag" />
+    <Icon icon={Hashtag} />
   {/if}
   <div class="min-w-0 overflow-hidden text-ellipsis">
     <ChannelName {url} {room} />

src/app/components/MenuSpaces.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Login from "@assets/icons/login-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -24,7 +25,7 @@
     <Button onclick={addSpace}>
       <CardButton>
         {#snippet icon()}
-          <div><Icon icon="login-2" size={7} /></div>
+          <div><Icon icon={Login} size={7} /></div>
         {/snippet}
         {#snippet title()}
           <div>Add a space</div>

src/app/components/NoteCard.svelte

@@ -8,6 +8,7 @@
   import {Router} from "@welshman/router"
   import {userMutes} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
@@ -44,7 +45,7 @@
   {#if muted}
     <div class="flex items-center justify-between">
       <div class="row-2 relative">
-        <Icon icon="danger" class="mt-1" />
+        <Icon icon={Danger} class="mt-1" />
         <p>You have muted this person.</p>
       </div>
       <Button class="link ml-8" onclick={ignoreMute}>Show anyway</Button>

src/app/components/NoteItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent, EventContent} from "@welshman/util"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
@@ -32,7 +33,7 @@
   <div class="flex w-full justify-between gap-2">
     <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-right">
       <EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">
-        <Icon icon="smile-circle" size={4} />
+        <Icon icon={SmileCircle} size={4} />
       </EmojiButton>
     </ReactionSummary>
   </div>

src/app/components/PasswordReset.svelte

@@ -3,6 +3,8 @@
   import {preventDefault} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -49,7 +51,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-rounded" />
+        <Icon icon={UserRounded} />
         <input readonly value={email} class="grow" />
       </label>
     {/snippet}
@@ -60,7 +62,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="key" />
+        <Icon icon={Key} />
         <input bind:value={password} class="grow" type="password" />
       </label>
     {/snippet}

src/app/components/PasswordResetRequest.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {postJson, sleep} from "@welshman/lib"
   import {preventDefault} from "@lib/html"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -55,7 +57,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-rounded" />
+        <Icon icon={UserRounded} />
         <input bind:value={email} class="grow" />
       </label>
     {/snippet}
@@ -65,7 +67,7 @@
   </FieldInline>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>

src/app/components/PeopleItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
@@ -21,14 +22,14 @@
   <div class="flex justify-between">
     <Profile {pubkey} {url} />
     <Button onclick={openProfile} class="btn btn-primary hidden sm:flex">
-      <Icon icon="user-circle" />
+      <Icon icon={UserCircle} />
       View Profile
     </Button>
   </div>
   <ProfileInfo {pubkey} {url} />
   <ProfileBadges {pubkey} {url} />
   <Button onclick={openProfile} class="btn btn-primary sm:hidden">
-    <Icon icon="user-circle" />
+    <Icon icon={UserCircle} />
     View Profile
   </Button>
 </div>

src/app/components/PrimaryNav.svelte

@@ -17,6 +17,13 @@
   import {pushModal} from "@app/util/modal"
   import {makeSpacePath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
+  import Widget from "@assets/icons/widget.svg?dataurl"
+  import AddSquare from "@assets/icons/add-square.svg?dataurl"
+  import Letter from "@assets/icons/letter.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
+  import SettingsMinimalistic from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
 
   type Props = {
     children?: Snippet
@@ -73,11 +80,11 @@
             class="tooltip-right"
             onclick={showOtherSpacesMenu}
             notification={otherSpaceNotifications}>
-            <Avatar icon="widget" class="!h-10 !w-10" />
+            <Avatar icon={Widget} class="!h-10 !w-10" />
           </PrimaryNavItem>
         {/if}
         <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
-          <Avatar icon="add-square" class="!h-10 !w-10" />
+          <Avatar icon={AddSquare} class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/each}
     </div>
@@ -97,10 +104,10 @@
         onclick={openChat}
         class="tooltip-right"
         notification={$notifications.has("/chat")}>
-        <Avatar icon="letter" class="!h-10 !w-10" />
+        <Avatar icon={Letter} class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
-        <Avatar icon="magnifer" class="!h-10 !w-10" />
+        <Avatar icon={Magnifier} class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
   </div>
@@ -115,25 +122,25 @@
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-8">
       <PrimaryNavItem title="Home" href="/home">
-        <Avatar icon="home-smile" class="!h-10 !w-10" />
+        <Avatar icon={HomeSmile} class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
         onclick={openChat}
         notification={$notifications.has("/chat")}>
-        <Avatar icon="letter" class="!h-10 !w-10" />
+        <Avatar icon={Letter} class="!h-10 !w-10" />
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem
           title="Spaces"
           onclick={showSpacesMenu}
           notification={anySpaceNotifications}>
-          <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
+          <Avatar icon={SettingsMinimalistic} class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/if}
     </div>
     <PrimaryNavItem title="Settings" onclick={showSettingsMenu}>
-      <Avatar icon="settings" src={$userProfile?.picture} class="!h-10 !w-10" />
+      <Avatar icon={Settings} src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>
 </div>

src/app/components/Profile.svelte

@@ -15,6 +15,7 @@
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/util/modal"
   import {clip} from "@app/util/toast"
+  import Copy from "@assets/icons/copy.svg?dataurl"
 
   type Props = {
     pubkey: string
@@ -55,7 +56,7 @@
       <div class="flex items-center gap-1 overflow-hidden text-ellipsis text-xs opacity-60">
         {displayPubkey(pubkey)}
         <Button onclick={copyPubkey} class="pt-1">
-          <Icon size={3} icon="copy" />
+          <Icon size={3} icon={Copy} />
         </Button>
       </div>
     {/if}

src/app/components/ProfileCircle.svelte

@@ -2,6 +2,7 @@
   import Avatar from "@lib/components/Avatar.svelte"
   import {removeNil} from "@welshman/lib"
   import {deriveProfile} from "@welshman/app"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
 
   type Props = {
     pubkey: string
@@ -13,4 +14,4 @@
   const profile = deriveProfile(pubkey, removeNil([url]))
 </script>
 
-<Avatar src={$profile?.picture} icon="user-circle" {...props} />
+<Avatar src={$profile?.picture} icon={UserCircle} {...props} />

src/app/components/ProfileDelete.svelte

@@ -11,6 +11,8 @@
   } from "@welshman/util"
   import {pubkey, userRelaySelections, publishThunk, repository} from "@welshman/app"
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -136,12 +138,12 @@
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-error" disabled={showProgress || !confirmOk}>
       <Spinner loading={progress !== undefined}>Confirm</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/ProfileDetail.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Letter from "@assets/icons/letter-opened.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Link from "@lib/components/Link.svelte"
@@ -33,7 +35,7 @@
   <ProfileBadges {pubkey} {url} />
   <ModalFooter>
     <Button onclick={back} class="hidden md:btn md:btn-link">
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <div class="flex gap-2">
@@ -42,7 +44,7 @@
         Open in Coracle
       </Link>
       <Button onclick={openChat} class="btn btn-primary">
-        <Icon icon="letter" />
+        <Icon icon={Letter} />
         Open Chat
       </Button>
     </div>

src/app/components/ProfileEditForm.svelte

@@ -2,6 +2,8 @@
   import type {Snippet} from "svelte"
   import type {Profile} from "@welshman/util"
   import {preventDefault} from "@lib/html"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
+  import MapPoint from "@assets/icons/map-point.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -57,7 +59,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-circle" />
+        <Icon icon={UserCircle} />
         <input bind:value={values.profile.name} class="grow" type="text" />
       </label>
     {/snippet}
@@ -86,7 +88,7 @@
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
-          <Icon icon="map-point" />
+          <Icon icon={MapPoint} />
           <input bind:value={values.profile.nip05} class="grow" type="text" />
         </label>
       {/snippet}

src/app/components/ProfileEject.svelte

@@ -3,6 +3,9 @@
   import {session} from "@welshman/app"
   import {slideAndFade} from "@lib/transition"
   import Link from "@lib/components/Link.svelte"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -81,7 +84,7 @@
         {/snippet}
         {#snippet input()}
           <label class="input input-bordered flex w-full items-center gap-2">
-            <Icon icon="key" />
+            <Icon icon={Key} />
             <input type="password" disabled={loading} bind:value={password} class="grow" />
           </label>
         {/snippet}
@@ -90,17 +93,17 @@
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" disabled={loading || success} onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     {#if success}
       <Button class="btn btn-primary" disabled={loading} onclick={reload}>
-        <Icon icon="check-circle" />
+        <Icon icon={CheckCircle} />
         <Spinner {loading}>Refresh the page</Spinner>
       </Button>
     {:else}
       <Button class="btn btn-error" disabled={loading} onclick={confirm}>
-        <Icon icon="check-circle" />
+        <Icon icon={CheckCircle} />
         <Spinner {loading}>I understand, send me my private key</Spinner>
       </Button>
     {/if}

src/app/components/ProfileMultiSelect.svelte

@@ -5,6 +5,8 @@
   import {append, remove, uniq} from "@welshman/lib"
   import {profileSearch} from "@welshman/app"
   import Suggestions from "@lib/components/Suggestions.svelte"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -61,7 +63,7 @@
       {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
       <div class="flex-inline badge badge-neutral mr-1 gap-1">
         <Button class="flex items-center" onclick={() => removePubkey(pubkey)}>
-          <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
+          <Icon icon={CloseCircle} size={4} class="-ml-1 mt-px" />
         </Button>
         <Button onclick={onClick}>
           <ProfileName {pubkey} />
@@ -70,7 +72,7 @@
     {/each}
   </div>
   <label class="input input-bordered flex w-full items-center gap-2" bind:this={input}>
-    <Icon icon="magnifer" />
+    <Icon icon={Magnifier} />
     <!-- svelte-ignore a11y_autofocus -->
     <input
       {autofocus}

src/app/components/ProfileSpaces.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -33,7 +35,7 @@
       </div>
       <Link class="btn btn-primary" href={makeSpacePath(url)}>
         Go to space
-        <Icon icon="alt-arrow-right" />
+        <Icon icon={AltArrowRight} />
       </Link>
     </div>
   {:else}
@@ -43,7 +45,7 @@
   {/each}
   <ModalFooter>
     <Button onclick={back} class="hidden md:btn md:btn-link">
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
   </ModalFooter>

src/app/components/Reaction.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {parse, isEmoji, renderAsHtml} from "@welshman/content"
+  import Heart from "@assets/icons/heart-angle.svg?dataurl"
+  import ThumbsDown from "@assets/icons/dislike.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ContentEmoji from "@app/components/ContentEmoji.svelte"
 
@@ -7,9 +9,9 @@
 </script>
 
 {#if event.content === "+" || event.content === ""}
-  <Icon icon="heart" />
+  <Icon icon={Heart} />
 {:else if event.content === "-"}
-  <Icon icon="thumbs-down" />
+  <Icon icon={ThumbsDown} />
 {:else}
   {#each parse(event) as parsed}
     {#if isEmoji(parsed)}

src/app/components/ReactionSummary.svelte

@@ -18,6 +18,7 @@
   import {load} from "@welshman/net"
   import {pubkey, repository, getValidZap, displayProfileByPubkey} from "@welshman/app"
   import {isMobile, preventDefault, stopPropagation} from "@lib/html"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
   import EventReportDetails from "@app/components/EventReportDetails.svelte"
@@ -120,7 +121,7 @@
         class="btn btn-error btn-xs tooltip-right flex items-center gap-1 rounded-full"
         class:tooltip={!noTooltip && !isMobile}
         onclick={stopPropagation(preventDefault(onReportClick))}>
-        <Icon icon="danger" />
+        <Icon icon={Danger} />
         <span>{$reports.length}</span>
       </button>
     {/if}

src/app/components/RelayAdd.svelte

@@ -5,6 +5,8 @@
   import {isShareableRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import RelayItem from "@app/components/RelayItem.svelte"
@@ -38,14 +40,14 @@
 </script>
 
 <label class="input input-bordered flex w-full items-center gap-2">
-  <Icon icon="magnifer" />
+  <Icon icon={Magnifier} />
   <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
 </label>
 <div class="column -m-6 mt-0 h-[50vh] gap-2 overflow-auto p-6 pt-2" bind:this={element}>
   {#if customUrl && isShareableRelayUrl(customUrl) && !$relays.includes(normalizeRelayUrl(customUrl))}
     <RelayItem url={term}>
       <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(customUrl)}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </RelayItem>
@@ -56,7 +58,7 @@
     .slice(0, limit) as url (url)}
     <RelayItem {url}>
       <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </RelayItem>

src/app/components/RelayItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Server from "@assets/icons/server.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import {displayUrl} from "@welshman/lib"
@@ -15,7 +16,7 @@
 <div class="card2 card2-sm bg-alt column gap-2">
   <div class="flex items-center justify-between gap-4">
     <div class="ellipsize flex items-center gap-2">
-      <Icon icon="server" />
+      <Icon icon={Server} />
       <p class="ellipsize">{displayRelayUrl(url)}</p>
     </div>
     {@render children?.()}

src/app/components/RelaySummary.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {gt} from "@welshman/lib"
   import {deriveRelay} from "@welshman/app"
+  import Ghost from "@assets/icons/ghost-smile.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
@@ -25,7 +27,7 @@
             {#if $relay?.profile?.icon}
               <img alt="" src={$relay.profile.icon} />
             {:else}
-              <Icon icon="ghost" size={5} />
+              <Icon icon={Ghost} size={5} />
             {/if}
           </div>
         </div>
@@ -33,7 +35,7 @@
           <div
             class="tooltip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary"
             data-tip="You are already a member of this space.">
-            <Icon icon="check-circle" class="scale-110" />
+            <Icon icon={CheckCircle} class="scale-110" />
           </div>
         {/if}
       </div>

src/app/components/RoomCreate.svelte

@@ -7,6 +7,10 @@
   import Field from "@lib/components/Field.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Hashtag from "@assets/icons/hashtag-circle.svg?dataurl"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -79,25 +83,25 @@
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
-          <Icon icon="hashtag" />
+          <Icon icon={Hashtag} />
           <input bind:value={name} class="grow" type="text" />
         </label>
       {/snippet}
     </Field>
   {:else}
     <p class="bg-alt card2 row-2">
-      <Icon icon="danger" />
+      <Icon icon={Danger} />
       This relay does not support creating rooms.
     </p>
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={!name || loading || !hasNip29($relay)}>
       <Spinner {loading}>Create Room</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SignUp.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import {postJson} from "@welshman/lib"
   import {preventDefault} from "@lib/html"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -59,7 +62,7 @@
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
-          <Icon icon="user-rounded" />
+          <Icon icon={UserRounded} />
           <input bind:value={email} />
         </label>
       {/snippet}
@@ -70,14 +73,14 @@
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
-          <Icon icon="key" />
+          <Icon icon={Key} />
           <input bind:value={password} type="password" />
         </label>
       {/snippet}
     </FieldInline>
     <Button type="submit" class="btn btn-primary" disabled={loading || !email || !password}>
       <Spinner {loading}>Sign Up</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
     <p class="text-sm opacity-75">
       Note that your email and password will only work to log in to {PLATFORM_NAME}. To use your key
@@ -87,7 +90,7 @@
     <Divider>Or</Divider>
   {/if}
   <Button onclick={next} class="btn {email || password ? 'btn-neutral' : 'btn-primary'}">
-    <Icon icon="key" />
+    <Icon icon={Key} />
     Generate a key
   </Button>
   <div class="text-sm">

src/app/components/SignUpComplete.svelte

@@ -3,6 +3,8 @@
   import {createProfile, PROFILE, makeEvent} from "@welshman/util"
   import {publishThunk, loginWithNip01} from "@welshman/app"
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -53,11 +55,11 @@
   </p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button class="btn btn-primary" type="submit">
-      <Icon icon="home-smile" />
+      <Icon icon={HomeSmile} />
       Go to Dashboard
     </Button>
   </ModalFooter>

src/app/components/SignUpKey.svelte

@@ -5,6 +5,10 @@
   import {makeSecret} from "@welshman/signer"
   import type {Profile} from "@welshman/util"
   import {preventDefault, downloadText} from "@lib/html"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import ArrowDown from "@assets/icons/arrow-down.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -129,7 +133,7 @@
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
-          <Icon icon="key" />
+          <Icon icon={Key} />
           <input bind:value={password} onchange={onPasswordChange} class="grow" type="password" />
         </label>
       {/snippet}
@@ -141,7 +145,7 @@
   <div class="flex flex-col">
     <Button class="btn {didDownload ? 'btn-neutral' : 'btn-primary'}" onclick={downloadKey}>
       Download my key
-      <Icon icon="arrow-down" />
+      <Icon icon={ArrowDown} />
     </Button>
     <Button class="btn btn-link no-underline" onclick={toggleUsePassword}>
       {#if usePassword}
@@ -153,12 +157,12 @@
   </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button disabled={!didDownload} class="btn btn-primary" type="submit">
       Continue
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SignUpProfile.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type {Profile} from "@welshman/util"
   import {makeProfile} from "@welshman/util"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -23,12 +25,12 @@
     {#snippet footer()}
       <ModalFooter>
         <Button class="btn btn-link" onclick={back}>
-          <Icon icon="alt-arrow-left" />
+          <Icon icon={AltArrowLeft} />
           Go back
         </Button>
         <Button class="btn btn-primary" type="submit">
           Create Account
-          <Icon icon="alt-arrow-right" />
+          <Icon icon={AltArrowRight} />
         </Button>
       </ModalFooter>
     {/snippet}

src/app/components/SignerStatus.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import {spec, prop, avg} from "@welshman/lib"
   import {signerLog, SignerLogEntryStatus} from "@welshman/app"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
+  import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import LogOut from "@app/components/LogOut.svelte"
@@ -28,13 +32,13 @@
       <span class="text-xl font-bold">Signer Status</span>
       <span class="flex items-center gap-2">
         {#if isDisconnected}
-          <Icon icon="close-circle" class="text-error" size={4} /> Disconnected
+          <Icon icon={CloseCircle} class="text-error" size={4} /> Disconnected
         {:else if recentFailure > 3}
-          <Icon icon="danger" class="text-warning" size={4} /> Partial Failure
+          <Icon icon={Danger} class="text-warning" size={4} /> Partial Failure
         {:else if recentAvg > 1000 || recentPending > 3}
-          <Icon icon="clock-circle" class="text-warning" size={4} /> Slow connection
+          <Icon icon={ClockCircle} class="text-warning" size={4} /> Slow connection
         {:else if recentSuccess === 0 && recentFailure > 0}{:else}
-          <Icon icon="check-circle" class="text-success" size={4} /> Ok
+          <Icon icon={CheckCircle} class="text-success" size={4} /> Ok
         {/if}
       </span>
     </div>

src/app/components/SpaceAccessRequest.svelte

@@ -6,6 +6,9 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -65,19 +68,19 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="link-round" />
+        <Icon icon={LinkRound} />
         <input bind:value={claim} class="grow" type="text" />
       </label>
     {/snippet}
   </Field>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Join Space</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceAdd.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import Compass from "@assets/icons/compass-big.svg?dataurl"
+  import Login from "@assets/icons/login-2.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -25,7 +28,7 @@
   <Link href="/discover">
     <CardButton class="!btn-primary">
       {#snippet icon()}
-        <div><Icon icon="compass" size={7} /></div>
+        <div><Icon icon={Compass} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>Discover spaces</div>
@@ -38,7 +41,7 @@
   <Button onclick={startJoin}>
     <CardButton>
       {#snippet icon()}
-        <div><Icon icon="login-2" size={7} /></div>
+        <div><Icon icon={Login} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>Join a space</div>
@@ -51,7 +54,7 @@
   <Button onclick={startCreate}>
     <CardButton>
       {#snippet icon()}
-        <div><Icon icon="add-circle" size={7} /></div>
+        <div><Icon icon={AddCircle} size={7} /></div>
       {/snippet}
       {#snippet title()}
         <div>Create a space</div>

src/app/components/SpaceAuthError.svelte

@@ -2,6 +2,8 @@
   import {displayRelayUrl} from "@welshman/util"
   import {parse, renderAsHtml} from "@welshman/content"
   import Button from "@lib/components/Button.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import {preventDefault} from "@lib/html"
   import {ucFirst} from "@lib/util"
@@ -34,12 +36,12 @@
   </p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">
       Request Access
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceAvatar.svelte

@@ -2,6 +2,7 @@
   import {displayRelayUrl} from "@welshman/util"
   import Avatar from "@lib/components/Avatar.svelte"
   import {deriveRelay} from "@welshman/app"
+  import RemoteControllerMinimalistic from "@assets/icons/remote-controller-minimalistic.svg?dataurl"
 
   interface Props {
     url?: string
@@ -13,7 +14,7 @@
 </script>
 
 <Avatar
-  icon="remote-controller-minimalistic"
+  icon={RemoteControllerMinimalistic}
   class="!h-10 !w-10"
   alt={displayRelayUrl(url)}
   src={$relay?.profile?.icon} />

src/app/components/SpaceCheck.svelte

@@ -4,6 +4,8 @@
   import {Pool, AuthStatus} from "@welshman/net"
   import {displayRelayUrl} from "@welshman/util"
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -64,12 +66,12 @@
   </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       Go to Space
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceCreate.svelte

@@ -3,6 +3,10 @@
   import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
+  import FireMinimalistic from "@assets/icons/fire-minimalistic.svg?dataurl"
+  import Server from "@assets/icons/server.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -37,7 +41,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="fire-minimalistic" />
+        <Icon icon={FireMinimalistic} />
         <input bind:value={name} class="grow" type="text" />
       </label>
     {/snippet}
@@ -48,7 +52,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="server" />
+        <Icon icon={Server} />
         <input bind:value={relay} class="grow" type="text" />
       </label>
     {/snippet}
@@ -61,12 +65,12 @@
   </Field>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">
       Next
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceCreateExternal.svelte

@@ -2,6 +2,8 @@
   import {preventDefault} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -43,12 +45,12 @@
   </p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">
       Let's go
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceExit.svelte

@@ -4,6 +4,7 @@
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -40,7 +41,7 @@
   <p class="text-center">Are you sure you want to leave?</p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>

src/app/components/SpaceInvite.svelte

@@ -7,6 +7,8 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -68,10 +70,10 @@
         <Field>
           {#snippet input()}
             <label class="input input-bordered flex w-full items-center gap-2">
-              <Icon icon="link-round" />
+              <Icon icon={LinkRound} />
               <input bind:value={invite} class="grow" type="text" />
               <Button onclick={copyInvite}>
-                <Icon icon="copy" />
+                <Icon icon={Copy} />
               </Button>
             </label>
           {/snippet}

src/app/components/SpaceInviteAccept.svelte

@@ -8,6 +8,9 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -89,7 +92,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="link-round" />
+        <Icon icon={LinkRound} />
         <input bind:value={invite} class="grow" type="text" />
       </label>
     {/snippet}
@@ -109,13 +112,13 @@
       {@render abortAction?.()}
     {:else}
       <Button class="btn btn-link" onclick={back}>
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         Go back
       </Button>
     {/if}
     <Button type="submit" class="btn btn-primary" disabled={!inviteData || loading}>
       <Spinner {loading}>Join Space</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceJoin.svelte

@@ -3,6 +3,8 @@
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -46,12 +48,12 @@
   </ModalHeader>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Join Space</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/app/components/SpaceQuickLinks.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
   import {deriveRelay} from "@welshman/app"
   import {fade} from "@lib/transition"
+  import CompassBig from "@assets/icons/compass-big.svg?dataurl"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import Lock from "@assets/icons/lock-keyhole.svg?dataurl"
+  import Hashtag from "@assets/icons/hashtag-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -49,13 +57,13 @@
 
 <div class="card2 bg-alt md:hidden">
   <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
-    <Icon icon="compass-big" />
+    <Icon icon={CompassBig} />
     Quick Links
   </h3>
   <div class="flex flex-col gap-2">
     <Link href={threadsPath} class="btn btn-primary w-full justify-start">
       <div class="relative flex items-center gap-2">
-        <Icon icon="notes-minimalistic" />
+        <Icon icon={NotesMinimalistic} />
         Threads
         {#if $notifications.has(threadsPath)}
           <div
@@ -67,7 +75,7 @@
     </Link>
     <Link href={calendarPath} class="btn btn-secondary w-full justify-start">
       <div class="relative flex items-center gap-2">
-        <Icon icon="calendar-minimalistic" />
+        <Icon icon={CalendarMinimalistic} />
         Calendar
         {#if $notifications.has(calendarPath)}
           <div
@@ -80,7 +88,7 @@
     {#if hasNip29($relay)}
       {#if $userRooms.length + $otherRooms.length > 10}
         <label class="input input-sm input-bordered flex flex-grow items-center gap-2">
-          <Icon icon="magnifer" size={4} />
+          <Icon icon={Magnifier} size={4} />
           <input bind:value={term} class="grow" type="text" placeholder="Search rooms..." />
         </label>
       {/if}
@@ -90,9 +98,9 @@
         <Link href={roomPath} class="btn btn-neutral btn-sm relative w-full justify-start">
           <div class="flex min-w-0 items-center gap-2 overflow-hidden text-nowrap">
             {#if channel?.closed || channel?.private}
-              <Icon icon="lock" size={4} />
+              <Icon icon={Lock} size={4} />
             {:else}
-              <Icon icon="hashtag" />
+              <Icon icon={Hashtag} />
             {/if}
             <ChannelName {url} {room} />
           </div>
@@ -103,13 +111,13 @@
         </Link>
       {/each}
       <Button onclick={addRoom} class="btn btn-neutral btn-sm w-full justify-start">
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Create Room
       </Button>
     {:else}
       <Link href={chatPath} class="btn btn-neutral w-full justify-start">
         <div class="relative flex items-center gap-2">
-          <Icon icon="chat-round" />
+          <Icon icon={ChatRound} />
           Chat
           {#if $notifications.has(chatPath)}
             <div class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary" transition:fade>

src/app/components/SpaceRecentActivity.svelte

@@ -3,6 +3,8 @@
   import {groupBy, ago, MONTH, first, last, uniq, avg, overlappingPairs} from "@welshman/lib"
   import {MESSAGE, getTagValue} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
+  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ConversationCard from "@app/components/ConversationCard.svelte"
@@ -67,7 +69,7 @@
 <div class="card2 bg-alt">
   <div class="flex flex-col gap-4">
     <h3 class="flex items-center gap-2 text-lg font-semibold">
-      <Icon icon="chat-round" />
+      <Icon icon={ChatRound} />
       Recent Conversations
     </h3>
     <div class="flex flex-col gap-4">
@@ -95,7 +97,7 @@
         {#if $conversations.length > limit}
           <Button class="btn btn-primary" onclick={viewMore}>
             View more conversations
-            <Icon icon="alt-arrow-down" />
+            <Icon icon={AltArrowDown} />
           </Button>
         {/if}
       {/if}

src/app/components/SpaceRelayStatus.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {deriveRelay} from "@welshman/app"
+  import Server from "@assets/icons/server.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import SocketStatusIndicator from "@lib/components/SocketStatusIndicator.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
@@ -17,7 +18,7 @@
 <div class="card2 bg-alt flex flex-col gap-4">
   <div class="flex items-center justify-between">
     <h3 class="flex items-center gap-2 text-lg font-semibold">
-      <Icon icon="server" />
+      <Icon icon={Server} />
       Relay Details
     </h3>
     <SocketStatusIndicator {url} />

src/app/components/SpaceTrustRelay.svelte

@@ -3,6 +3,8 @@
   import {remove} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
   import {preventDefault} from "@lib/html"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -72,13 +74,13 @@
   <div class="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-between">
     <Button class="btn btn-neutral" onclick={untrustSpace} disabled={loading}>
       {#if !loading}
-        <Icon icon="close-circle" />
+        <Icon icon={CloseCircle} />
       {/if}
       <Spinner {loading}>I don't trust this space</Spinner>
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       {#if !loading}
-        <Icon icon="check-circle" />
+        <Icon icon={CheckCircle} />
       {/if}
       <Spinner {loading}>I trust this space, continue</Spinner>
     </Button>

src/app/components/ThreadCreate.svelte

@@ -3,6 +3,8 @@
   import {makeEvent, THREAD} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
+  import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -106,13 +108,13 @@
       {#if $uploading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
-        <Icon icon="paperclip" size={3} />
+        <Icon icon={Paperclip} size={3} />
       {/if}
     </Button>
   </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary">Create Thread</Button>

src/app/components/ThunkFailure.svelte

@@ -9,6 +9,7 @@
     getFailedThunkUrls,
   } from "@welshman/app"
   import type {Thunk} from "@welshman/app"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
@@ -57,7 +58,7 @@
       params={{interactive: true}}>
       {#snippet children()}
         <span class="flex cursor-pointer items-center gap-1 text-error">
-          <Icon icon="danger" size={3} />
+          <Icon icon={Danger} size={3} />
           <span>Failed to send!</span>
         </span>
       {/snippet}

src/app/components/Toast.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {parse, renderAsHtml} from "@welshman/content"
   import {fly} from "@lib/transition"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {toast, popToast} from "@app/util/toast"
@@ -35,7 +36,7 @@
           {/if}
         </p>
         <Button class="flex items-center opacity-75" onclick={() => popToast($toast.id)}>
-          <Icon icon="close-circle" />
+          <Icon icon={CloseCircle} />
         </Button>
       </div>
     {/key}

src/app/components/WalletConnect.svelte

@@ -5,6 +5,11 @@
   import type {NWCInfo} from "@welshman/util"
   import {pubkey, updateSession} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
+  import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
+  import Lock from "@assets/icons/lock-keyhole.svg?dataurl"
+  import QrCode from "@assets/icons/qr-code.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Scanner from "@lib/components/Scanner.svelte"
@@ -104,7 +109,7 @@
       <div>Connect a Wallet</div>
     {/snippet}
     {#snippet info()}
-      Use Nostr Wallet Connect to send Bitcoin payments over Lightning.
+      Use Nostr Wallet Connect to send Bitcoin payments over Bolt.
     {/snippet}
   </ModalHeader>
   {#if getWebLn()}
@@ -117,7 +122,7 @@
           Connecting...
         {:else}
           <div class="flex items-center gap-2">
-            <Icon icon="cpu" />
+            <Icon icon={Cpu} />
             Connect with WebLN
           </div>
         {/if}
@@ -131,7 +136,7 @@
     {/snippet}
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="lock" />
+        <Icon icon={Lock} />
         <input
           bind:value={nostrWalletConnectUrl}
           autocomplete="off"
@@ -139,7 +144,7 @@
           class="grow"
           type="password" />
         <Button onclick={toggleScanner}>
-          <Icon icon="qr-code" />
+          <Icon icon={QrCode} />
         </Button>
       </label>
     {/snippet}
@@ -155,7 +160,7 @@
   {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button
@@ -168,7 +173,7 @@
         {:else}
           <div class="flex items-center gap-2">
             Connect Wallet
-            <Icon icon="alt-arrow-right" />
+            <Icon icon={AltArrowRight} />
           </div>
         {/if}
       </Spinner>

src/app/components/Zap.svelte

@@ -4,6 +4,8 @@
   import {load} from "@welshman/net"
   import {Router} from "@welshman/router"
   import {requestZap, makeZapRequest, getZapResponseFilter} from "@welshman/util"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -135,7 +137,7 @@
     {#snippet input()}
       <div class="flex flex-grow justify-end">
         <label class="input input-bordered flex items-center gap-2">
-          <Icon icon="bolt" />
+          <Icon icon={Bolt} />
           <input bind:value={amount} type="number" class="w-24" />
         </label>
       </div>
@@ -149,14 +151,14 @@
     bind:value={pos} />
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button class="btn btn-primary" onclick={sendZap} disabled={loading}>
       <Spinner {loading}>
         <div class="flex items-center gap-2">
           {#if !loading}
-            <Icon icon="bolt" />
+            <Icon icon={Bolt} />
           {/if}
           Send Zap
         </div>