Use new icons

src/routes/chat/+layout.svelte

@@ -4,6 +4,8 @@
   import {WRAP} from "@welshman/util"
   import {Router} from "@welshman/router"
   import {pubkey} from "@welshman/app"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -40,12 +42,12 @@
     <SecondaryNavHeader>
       Chats
       <Button onclick={openMenu}>
-        <Icon icon="menu-dots" />
+        <Icon icon={MenuDots} />
       </Button>
     </SecondaryNavHeader>
   </SecondaryNavSection>
   <label class="input input-sm input-bordered mx-6 -mt-4 mb-2 flex items-center gap-2">
-    <Icon icon="magnifer" />
+    <Icon icon={Magnifier} />
     <input bind:value={term} class="grow" type="text" />
   </label>
   <div class="overflow-auto">

src/routes/chat/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import {onDestroy} from "svelte"
+  import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import MenuDots from "@assets/icons/menu-dots.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 ContentSearch from "@lib/components/ContentSearch.svelte"
@@ -27,7 +31,7 @@
 <div class="hidden min-h-screen md:hero">
   <div class="col-2 hero-content text-center">
     <p class="row-2 text-lg">
-      <Icon icon="info-circle" />
+      <Icon icon={InfoCircle} />
       No conversation selected.
     </p>
     <p>
@@ -42,7 +46,7 @@
   {#snippet input()}
     <div class="row-2 min-w-0 flex-grow items-center">
       <label class="input input-bordered flex flex-grow items-center gap-2">
-        <Icon icon="magnifer" />
+        <Icon icon={Magnifier} />
         <input
           bind:value={term}
           class="grow"
@@ -50,7 +54,7 @@
           placeholder="Search for conversations..." />
       </label>
       <Button class="btn btn-primary" onclick={openMenu}>
-        <Icon icon="menu-dots" />
+        <Icon icon={MenuDots} />
       </Button>
     </div>
   {/snippet}
@@ -62,7 +66,7 @@
         <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
           <p>No chats found! Try starting one up.</p>
           <Button class="btn btn-primary" onclick={startChat}>
-            <Icon icon="add-circle" />
+            <Icon icon={AddCircle} />
             Start a Chat
           </Button>
         </div>

src/routes/discover/+page.svelte

@@ -8,6 +8,7 @@
   import {relays, createSearch, loadRelay, loadRelaySelections} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -85,7 +86,7 @@
       {/snippet}
     </PageHeader>
     <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 spaces..." />
     </label>
     {#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}

src/routes/home/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Compass from "@assets/icons/compass.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"
@@ -31,7 +34,7 @@
         <Button onclick={addSpace}>
           <CardButton>
             {#snippet icon()}
-              <div><Icon icon="add-circle" size={7} /></div>
+              <div><Icon icon={AddCircle} size={7} /></div>
             {/snippet}
             {#snippet title()}
               <div>Add a space</div>
@@ -44,7 +47,7 @@
         <Link href="/discover">
           <CardButton>
             {#snippet icon()}
-              <div><Icon icon="compass" size={7} /></div>
+              <div><Icon icon={Compass} size={7} /></div>
             {/snippet}
             {#snippet title()}
               <div>Browse the network</div>
@@ -57,7 +60,7 @@
         <Button onclick={openChat}>
           <CardButton>
             {#snippet icon()}
-              <div><Icon icon="chat-round" size={7} /></div>
+              <div><Icon icon={ChatRound} size={7} /></div>
             {/snippet}
             {#snippet title()}
               <div>Start a conversation</div>

src/routes/join/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -11,7 +12,7 @@
   <SpaceInviteAccept invite={$page.url.href}>
     {#snippet abortAction()}
       <Button class="btn btn-link" onclick={() => goto("/home")}>
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         Go back
       </Button>
     {/snippet}

src/routes/people/+page.svelte

@@ -2,6 +2,7 @@
   import {onMount} from "svelte"
   import {createScroller, isMobile} from "@lib/html"
   import {profileSearch} from "@welshman/app"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import ContentSearch from "@lib/components/ContentSearch.svelte"
@@ -30,7 +31,7 @@
   <ContentSearch>
     {#snippet input()}
       <label class="row-2 input input-bordered">
-        <Icon icon="magnifer" />
+        <Icon icon={Magnifier} />
         <!-- svelte-ignore a11y_autofocus -->
         <input
           autofocus={!isMobile}

src/routes/settings/+layout.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import {fly} from "@lib/transition"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
+  import Wallet from "@assets/icons/wallet.svg?dataurl"
+  import Server from "@assets/icons/server.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
+  import Moon from "@assets/icons/moon.svg?dataurl"
+  import InfoSquare from "@assets/icons/info-square.svg?dataurl"
+  import Exit from "@assets/icons/logout-3.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
@@ -25,37 +32,37 @@
   <SecondaryNavSection>
     <div in:fly|local>
       <SecondaryNavItem href="/settings/profile">
-        <Icon icon="user-circle" /> Profile
+        <Icon icon={UserCircle} /> Profile
       </SecondaryNavItem>
     </div>
     <div in:fly|local>
       <SecondaryNavItem href="/settings/wallet">
-        <Icon icon="wallet" /> Wallet
+        <Icon icon={Wallet} /> Wallet
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 50}}>
       <SecondaryNavItem href="/settings/relays">
-        <Icon icon="server" /> Relays
+        <Icon icon={Server} /> Relays
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 100}}>
       <SecondaryNavItem href="/settings">
-        <Icon icon="settings" /> Settings
+        <Icon icon={Settings} /> Settings
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 150}}>
       <SecondaryNavItem onclick={toggleTheme}>
-        <Icon icon="moon" /> Theme
+        <Icon icon={Moon} /> Theme
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 200}}>
       <SecondaryNavItem href="/settings/about">
-        <Icon icon="info-square" /> About
+        <Icon icon={InfoSquare} /> About
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 250}}>
       <SecondaryNavItem class="text-error hover:text-error" onclick={logout}>
-        <Icon icon="exit" /> Log Out
+        <Icon icon={Exit} /> Log Out
       </SecondaryNavItem>
     </div>
   </SecondaryNavSection>

src/routes/settings/about/+page.svelte

@@ -6,6 +6,10 @@
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import Code from "@assets/icons/code-2.svg?dataurl"
+  import Global from "@assets/icons/global.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
+  import HeadphonesRound from "@assets/icons/headphones-round.svg?dataurl"
 
   const hash = import.meta.env.VITE_BUILD_HASH
 
@@ -51,7 +55,7 @@
             Icons by <Link
               external
               class="link"
-              href="https://www.figma.com/community/file/1166831539721848736">480 Design</Link>
+              href="https://www.figma.com/community/file/1396367368966571051">480 Design</Link>
           </p>
           {#if hash}
             <p class="text-xs">Running build {hash.slice(0, 8)}</p>
@@ -60,22 +64,22 @@
         <div class="flex justify-center gap-4">
           <div class="tooltip" data-tip="Source Code">
             <Link external href="https://github.com/coracle-social/flotilla">
-              <Icon icon="code-2" />
+              <Icon icon={Code} />
             </Link>
           </div>
           <div class="tooltip" data-tip="About the Developer">
             <Link external href="https://coracle.tools">
-              <Icon icon="earth" />
+              <Icon icon={Global} />
             </Link>
           </div>
           <div class="tooltip" data-tip="Dev Blog">
             <Link external href="https://hodlbod.npub.pro/">
-              <Icon icon="pen" />
+              <Icon icon={Pen} />
             </Link>
           </div>
           <div class="tooltip" data-tip="Podcast">
             <Link external href="https://fountain.fm/show/vnmoRQQ50siLFRE8k061">
-              <Icon icon="headphones-round" />
+              <Icon icon={HeadphonesRound} />
             </Link>
           </div>
         </div>

src/routes/settings/profile/+page.svelte

@@ -4,6 +4,15 @@
   import {displayPubkey, displayProfile} from "@welshman/util"
   import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
   import {slideAndFade} from "@lib/transition"
+  import PenNewSquare from "@assets/icons/pen-new-square.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import AltArrowUp from "@assets/icons/alt-arrow-up.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -54,7 +63,7 @@
         </div>
       </div>
       <Button class="center btn btn-circle btn-neutral -mr-4 -mt-4 h-12 w-12" onclick={startEdit}>
-        <Icon icon="pen-new-square" />
+        <Icon icon={PenNewSquare} />
       </Button>
     </div>
     {#key $profile?.about}
@@ -69,7 +78,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={$session.email} class="grow" />
           </label>
         {/snippet}
@@ -86,18 +95,18 @@
     <FieldInline>
       {#snippet label()}
         <p class="flex items-center gap-3">
-          <Icon icon="key" />
+          <Icon icon={Key} />
           Public Key
         </p>
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center justify-between gap-2">
           <div class="row-2 flex-grow items-center">
-            <Icon icon="link-round" />
+            <Icon icon={LinkRound} />
             <input readonly class="ellipsize flex-grow" value={npub} />
           </div>
           <Button class="flex items-center" onclick={copyNpub}>
-            <Icon icon="copy" />
+            <Icon icon={Copy} />
           </Button>
         </label>
       {/snippet}
@@ -112,16 +121,16 @@
       <FieldInline>
         {#snippet label()}
           <p class="flex items-center gap-3">
-            <Icon icon="key" />
+            <Icon icon={Key} />
             Private Key
           </p>
         {/snippet}
         {#snippet input()}
           <label class="input input-bordered flex w-full items-center gap-2">
-            <Icon icon="link-round" />
+            <Icon icon={LinkRound} />
             <input readonly value={$session.secret} class="grow" type="password" />
             <Button class="flex items-center" onclick={copyNsec}>
-              <Icon icon="copy" />
+              <Icon icon={Copy} />
             </Button>
           </label>
         {/snippet}
@@ -136,21 +145,21 @@
   <div class="card2 bg-alt shadow-xl">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
-        <Icon icon="settings" />
+        <Icon icon={Settings} />
         Advanced
       </strong>
       <Button onclick={() => (showAdvanced = !showAdvanced)}>
         {#if showAdvanced}
-          <Icon icon="alt-arrow-down" />
+          <Icon icon={AltArrowDown} />
         {:else}
-          <Icon icon="alt-arrow-up" />
+          <Icon icon={AltArrowUp} />
         {/if}
       </Button>
     </div>
     {#if showAdvanced}
       <div transition:slideAndFade class="flex flex-col gap-2 pt-4">
         <Button class="btn btn-outline btn-error" onclick={startDelete}>
-          <Icon icon="trash-bin-2" />
+          <Icon icon={TrashBin2} />
           Delete your profile
         </Button>
       </div>

src/routes/settings/relays/+page.svelte

@@ -10,6 +10,11 @@
   import {pushModal} from "@app/util/modal"
   import {discoverRelays} from "@app/core/requests"
   import {setRelayPolicy, setInboxRelayPolicy} from "@app/core/commands"
+  import Globus from "@assets/icons/globus.svg?dataurl"
+  import Inbox from "@assets/icons/inbox.svg?dataurl"
+  import Mailbox from "@assets/icons/mailbox.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
 
   const readRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Read)
   const writeRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Write)
@@ -48,7 +53,7 @@
   <Collapse class="card2 bg-alt column gap-4">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
-        <Icon icon="earth" />
+        <Icon icon={Globus} />
         Outbox Relays
       </h2>
     {/snippet}
@@ -66,14 +71,14 @@
             class="tooltip flex items-center"
             data-tip="Stop using this relay"
             onclick={() => removeWriteRelay(url)}>
-            <Icon icon="close-circle" />
+            <Icon icon={CloseCircle} />
           </Button>
         </RelayItem>
       {:else}
         <p class="text-center text-sm">No relays found</p>
       {/each}
       <Button class="btn btn-primary mt-2" onclick={addWriteRelay}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </div>
@@ -81,7 +86,7 @@
   <Collapse class="card2 bg-alt column gap-4">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
-        <Icon icon="inbox" />
+        <Icon icon={Inbox} />
         Inbox Relays
       </h2>
     {/snippet}
@@ -98,14 +103,14 @@
             class="tooltip flex items-center"
             data-tip="Stop using this relay"
             onclick={() => removeReadRelay(url)}>
-            <Icon icon="close-circle" />
+            <Icon icon={CloseCircle} />
           </Button>
         </RelayItem>
       {:else}
         <p class="text-center text-sm">No relays found</p>
       {/each}
       <Button class="btn btn-primary mt-2" onclick={addReadRelay}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </div>
@@ -113,7 +118,7 @@
   <Collapse class="card2 bg-alt column gap-4">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
-        <Icon icon="mailbox" />
+        <Icon icon={Mailbox} />
         Messaging Relays
       </h2>
     {/snippet}
@@ -131,14 +136,14 @@
             class="tooltip flex items-center"
             data-tip="Stop using this relay"
             onclick={() => removeInboxRelay(url)}>
-            <Icon icon="close-circle" />
+            <Icon icon={CloseCircle} />
           </Button>
         </RelayItem>
       {:else}
         <p class="text-center text-sm">No relays found</p>
       {/each}
       <Button class="btn btn-primary mt-2" onclick={addInboxRelay}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </div>

src/routes/settings/wallet/+page.svelte

@@ -9,6 +9,10 @@
   import WalletDisconnect from "@app/components/WalletDisconnect.svelte"
   import {pushModal} from "@app/util/modal"
   import {getWebLn} from "@app/core/commands"
+  import Wallet2 from "@assets/icons/wallet.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
 
   const connect = () => pushModal(WalletConnect)
 
@@ -19,17 +23,17 @@
   <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="wallet" />
+        <Icon icon={Wallet2} />
         Wallet
       </strong>
       {#if $session?.wallet}
         <div class="flex items-center gap-2 text-sm text-success">
-          <Icon icon="check-circle" size={4} />
+          <Icon icon={CheckCircle} size={4} />
           Connected
         </div>
       {:else}
         <Button class="btn btn-primary btn-sm" onclick={connect}>
-          <Icon icon="add-circle" />
+          <Icon icon={AddCircle} />
           Connect Wallet
         </Button>
       {/if}
@@ -77,7 +81,7 @@
           </div>
         {/if}
         <Button class="btn btn-neutral btn-sm" onclick={disconnect}>
-          <Icon icon="close-circle" />
+          <Icon icon={CloseCircle} />
           Disconnect Wallet
         </Button>
       {:else}

src/routes/spaces/[relay]/+page.svelte

@@ -2,6 +2,13 @@
   import {page} from "$app/stores"
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
+  import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
+  import Login2 from "@assets/icons/login-2.svg?dataurl"
+  import Letter from "@assets/icons/letter-opened.svg?dataurl"
+  import Ghost from "@assets/icons/ghost-smile.svg?dataurl"
+  import BillList from "@assets/icons/bill-list.svg?dataurl"
+  import ShieldUser from "@assets/icons/shield-user.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -29,7 +36,7 @@
 <PageBar>
   {#snippet icon()}
     <div class="center">
-      <Icon icon="home-smile" />
+      <Icon icon={HomeSmile} />
     </div>
   {/snippet}
   {#snippet title()}
@@ -39,12 +46,12 @@
     <div class="row-2">
       {#if !$userRoomsByUrl.has(url)}
         <Button class="btn btn-primary btn-sm" onclick={joinSpace}>
-          <Icon icon="login-2" />
+          <Icon icon={Login2} />
           Join Space
         </Button>
       {:else if owner}
         <Link class="btn btn-primary btn-sm" href={makeChatPath([owner])}>
-          <Icon icon="letter" />
+          <Icon icon={Letter} />
           Contact Owner
         </Link>
       {/if}
@@ -63,7 +70,7 @@
             {#if $relay?.profile?.icon}
               <img alt="" src={$relay.profile.icon} />
             {:else}
-              <Icon icon="ghost" size={6} />
+              <Icon icon={Ghost} size={6} />
             {/if}
           </div>
         </div>
@@ -80,13 +87,13 @@
       <div class="flex gap-3">
         {#if $relay.profile.terms_of_service}
           <Link href={$relay.profile.terms_of_service} class="badge badge-neutral flex gap-2">
-            <Icon icon="bill-list" size={4} />
+            <Icon icon={BillList} size={4} />
             Terms of Service
           </Link>
         {/if}
         {#if $relay.profile.privacy_policy}
           <Link href={$relay?.profile?.privacy_policy} class="badge badge-neutral flex gap-2">
-            <Icon icon="shield-user" size={4} />
+            <Icon icon={ShieldUser} size={4} />
             Privacy Policy
           </Link>
         {/if}
@@ -103,7 +110,7 @@
       {#if owner}
         <div class="card2 bg-alt">
           <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
-            <Icon icon="user-rounded" />
+            <Icon icon={UserRounded} />
             Latest Updates
           </h3>
           <ProfileLatest {url} pubkey={owner}>

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -17,6 +17,12 @@
   } from "@welshman/util"
   import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
+  import Hashtag from "@assets/icons/hashtag-circle.svg?dataurl"
+  import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
+  import Login2 from "@assets/icons/login-2.svg?dataurl"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import Logout2 from "@assets/icons/logout-3.svg?dataurl"
+  import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -303,7 +309,7 @@
 <PageBar>
   {#snippet icon()}
     <div class="center">
-      <Icon icon="hashtag" />
+      <Icon icon={Hashtag} />
     </div>
   {/snippet}
   {#snippet title()}
@@ -322,14 +328,14 @@
           {#if joining}
             <span class="loading loading-spinner loading-sm"></span>
           {:else}
-            <Icon size={4} icon="login-2" />
+            <Icon size={4} icon={Login2} />
           {/if}
         </Button>
       {:else if $membershipStatus === MembershipStatus.Pending}
         <Button
           class="btn btn-neutral btn-sm tooltip tooltip-left"
           data-tip="Membership is pending">
-          <Icon size={4} icon="clock-circle" />
+          <Icon size={4} icon={ClockCircle} />
         </Button>
       {:else}
         <Button
@@ -337,14 +343,14 @@
           data-tip="Request to be removed from member list"
           disabled={leaving}
           onclick={leave}>
-          <Icon size={4} icon="arrows-a-logout-2" />
+          <Icon size={4} icon={Logout2} />
         </Button>
       {/if}
       <Button
         class="btn btn-neutral btn-sm tooltip tooltip-left"
         data-tip={isFavorite ? "Remove Favorite" : "Add Favorite"}
         onclick={isFavorite ? removeFavorite : addFavorite}>
-        <Icon size={4} icon="bookmark" class={cx({"text-primary": isFavorite})} />
+        <Icon size={4} icon={Bookmark} class={cx({"text-primary": isFavorite})} />
       </Button>
       <MenuSpaceButton {url} />
     </div>
@@ -359,7 +365,7 @@
         <p class="row-2">You aren't currently a member of this room.</p>
         {#if $membershipStatus === MembershipStatus.Pending}
           <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
-            <Icon icon="clock-circle" />
+            <Icon icon={ClockCircle} />
             Access Pending
           </Button>
         {:else}
@@ -367,7 +373,7 @@
             {#if joining}
               <span class="loading loading-spinner loading-sm"></span>
             {:else}
-              <Icon icon="login-2" />
+              <Icon icon={Login2} />
             {/if}
             Join Room
           </Button>
@@ -415,7 +421,7 @@
       <p>Only members are allowed to post to this room.</p>
       {#if $membershipStatus === MembershipStatus.Pending}
         <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
-          <Icon icon="clock-circle" />
+          <Icon icon={ClockCircle} />
           Access Pending
         </Button>
       {:else}
@@ -423,7 +429,7 @@
           {#if joining}
             <span class="loading loading-spinner loading-sm"></span>
           {:else}
-            <Icon icon="login-2" />
+            <Icon icon={Login2} />
           {/if}
           Ask to Join
         </Button>
@@ -445,7 +451,7 @@
 {#if showScrollButton}
   <div in:fade class="chat__scroll-down">
     <Button class="btn btn-circle btn-neutral" onclick={scrollToBottom}>
-      <Icon icon="alt-arrow-down" />
+      <Icon icon={AltArrowDown} />
     </Button>
   </div>
 {/if}

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -7,6 +7,8 @@
   import type {TrustedEvent} from "@welshman/util"
   import {DELETE, EVENT_TIME, getTagValue} from "@welshman/util"
   import {fly} from "@lib/transition"
+  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
+  import CalendarAdd from "@assets/icons/calendar-add.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -116,7 +118,7 @@
 <PageBar>
   {#snippet icon()}
     <div class="center">
-      <Icon icon="calendar-minimalistic" />
+      <Icon icon={CalendarMinimalistic} />
     </div>
   {/snippet}
   {#snippet title()}
@@ -125,7 +127,7 @@
   {#snippet action()}
     <div class="row-2">
       <Button class="btn btn-primary btn-sm" onclick={makeEvent}>
-        <Icon icon="calendar-add" />
+        <Icon icon={CalendarAdd} />
         Create an Event
       </Button>
       <MenuSpaceButton {url} />

src/routes/spaces/[relay]/calendar/[id]/+page.svelte

@@ -6,6 +6,9 @@
   import {request} from "@welshman/net"
   import {repository} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
@@ -61,7 +64,7 @@
   {#snippet icon()}
     <div>
       <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         <span class="hidden sm:inline">Go back</span>
       </Button>
     </div>
@@ -95,7 +98,7 @@
     {#if !showAll && $replies.length > 4}
       <div class="flex justify-center">
         <Button class="btn btn-link" onclick={expand}>
-          <Icon icon="sort-vertical" />
+          <Icon icon={SortVertical} />
           Show all {$replies.length} replies
         </Button>
       </div>
@@ -113,7 +116,7 @@
     {:else}
       <div class="flex justify-end px-2 pb-2">
         <Button class="btn btn-primary" onclick={openReply}>
-          <Icon icon="reply" />
+          <Icon icon={Reply} />
           Leave comment
         </Button>
       </div>

src/routes/spaces/[relay]/chat/+page.svelte

@@ -8,6 +8,8 @@
   import {makeEvent, getTag, MESSAGE, DELETE} from "@welshman/util"
   import {pubkey, publishThunk} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
+  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 Spinner from "@lib/components/Spinner.svelte"
@@ -226,7 +228,7 @@
 <PageBar>
   {#snippet icon()}
     <div class="center">
-      <Icon icon="chat-round" />
+      <Icon icon={ChatRound} />
     </div>
   {/snippet}
   {#snippet title()}
@@ -285,7 +287,7 @@
 {#if showScrollButton}
   <div in:fade class="chat__scroll-down">
     <Button class="btn btn-circle btn-neutral" onclick={scrollToBottom}>
-      <Icon icon="alt-arrow-down" />
+      <Icon icon={AltArrowDown} />
     </Button>
   </div>
 {/if}

src/routes/spaces/[relay]/goals/+page.svelte

@@ -6,6 +6,7 @@
   import {ZAP_GOAL, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
   import {userMutes} from "@welshman/app"
   import {fly} from "@lib/transition"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -77,7 +78,7 @@
 <PageBar>
   {#snippet icon()}
     <div class="center">
-      <Icon icon="notes-minimalistic" />
+      <Icon icon={NotesMinimalistic} />
     </div>
   {/snippet}
   {#snippet title()}
@@ -86,7 +87,7 @@
   {#snippet action()}
     <div class="row-2">
       <Button class="btn btn-primary btn-sm" onclick={createGoal}>
-        <Icon icon="notes-minimalistic" />
+        <Icon icon={NotesMinimalistic} />
         Create a Goal
       </Button>
       <MenuSpaceButton {url} />

src/routes/spaces/[relay]/goals/[id]/+page.svelte

@@ -6,6 +6,9 @@
   import {repository} from "@welshman/app"
   import {request} from "@welshman/net"
   import {deriveEvents} from "@welshman/store"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
@@ -61,7 +64,7 @@
   {#snippet icon()}
     <div>
       <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         <span class="hidden sm:inline">Go back</span>
       </Button>
     </div>
@@ -89,7 +92,7 @@
       {#if !showAll && $replies.length > 4}
         <div class="flex justify-center">
           <Button class="btn btn-link" onclick={expand}>
-            <Icon icon="sort-vertical" />
+            <Icon icon={SortVertical} />
             Show all {$replies.length} replies
           </Button>
         </div>
@@ -108,7 +111,7 @@
     {:else}
       <div class="flex justify-end p-2">
         <Button class="btn btn-primary" onclick={openReply}>
-          <Icon icon="reply" />
+          <Icon icon={Reply} />
           Comment on this goal
         </Button>
       </div>

src/routes/spaces/[relay]/threads/+page.svelte

@@ -6,6 +6,7 @@
   import {THREAD, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
   import {userMutes} from "@welshman/app"
   import {fly} from "@lib/transition"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -78,7 +79,7 @@
 <PageBar>
   {#snippet icon()}
     <div class="center">
-      <Icon icon="notes-minimalistic" />
+      <Icon icon={NotesMinimalistic} />
     </div>
   {/snippet}
   {#snippet title()}
@@ -87,7 +88,7 @@
   {#snippet action()}
     <div class="row-2">
       <Button class="btn btn-primary btn-sm" onclick={createThread}>
-        <Icon icon="notes-minimalistic" />
+        <Icon icon={NotesMinimalistic} />
         Create a Thread
       </Button>
       <MenuSpaceButton {url} />

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -6,6 +6,9 @@
   import {repository} from "@welshman/app"
   import {request} from "@welshman/net"
   import {deriveEvents} from "@welshman/store"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
@@ -59,7 +62,7 @@
   {#snippet icon()}
     <div>
       <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon="alt-arrow-left" />
+        <Icon icon={AltArrowLeft} />
         <span class="hidden sm:inline">Go back</span>
       </Button>
     </div>
@@ -86,7 +89,7 @@
       {#if !showAll && $replies.length > 4}
         <div class="flex justify-center">
           <Button class="btn btn-link" onclick={expand}>
-            <Icon icon="sort-vertical" />
+            <Icon icon={SortVertical} />
             Show all {$replies.length} replies
           </Button>
         </div>
@@ -105,7 +108,7 @@
     {:else}
       <div class="flex justify-end p-2">
         <Button class="btn btn-primary" onclick={openReply}>
-          <Icon icon="reply" />
+          <Icon icon={Reply} />
           Reply to thread
         </Button>
       </div>