endorhq · Angelmmiguel · Feb 12, 2026 · Feb 12, 2026
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -20,6 +20,7 @@
     "posthog-js": "^1.345.2"
   },
   "devDependencies": {
+    "@iconify-json/dinkie-icons": "^1.2.0",
     "@sveltejs/adapter-cloudflare": "^7.2.6",
     "@sveltejs/adapter-node": "^5.5.2",
     "@sveltejs/kit": "^2.50.1",
@@ -30,6 +31,7 @@
     "svelte-check": "^4.3.5",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
+    "unplugin-icons": "^23.0.1",
     "vite": "^7.3.1"
   }
 }
diff --git a/packages/web/src/app.d.ts b/packages/web/src/app.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="unplugin-icons/types/svelte" />
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {

diff --git a/packages/web/src/lib/components/Header.svelte b/packages/web/src/lib/components/Header.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import StarIcon from 'virtual:icons/dinkie-icons/white-medium-star';
 import logo from '$lib/assets/logo.svg';
 </script>
 
@@ -45,16 +46,7 @@ import logo from '$lib/assets/logo.svg';
       rel="noopener noreferrer"
       class="inline-flex items-center gap-1.5 px-3 py-1 rounded border border-edge hover:border-accent/50 hover:text-accent transition-all duration-200"
     >
-      <svg
-        class="w-4 h-4"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path
-          d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-        />
-      </svg>
+      <StarIcon />
       Star on GitHub
     </a>
   </nav>

diff --git a/packages/web/src/lib/components/LogsLocationModal.svelte b/packages/web/src/lib/components/LogsLocationModal.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+import ClipboardIcon from 'virtual:icons/dinkie-icons/clipboard';
+import CloseIcon from 'virtual:icons/dinkie-icons/diagonal-cross';
+import CheckIcon from 'virtual:icons/dinkie-icons/white-heavy-check-mark';
+
 interface Props {
   open: boolean;
   onClose: () => void;
@@ -197,19 +201,7 @@ const currentAgentName = $derived(
           onclick={onClose}
           aria-label="Close modal"
         >
-          <svg
-            class="w-5 h-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
+          <CloseIcon class="w-5 h-5" />
         </button>
       </div>
 
@@ -278,33 +270,9 @@ const currentAgentName = $derived(
                     title="Copy path"
                   >
                     {#if copied}
-                      <svg
-                        class="w-4 h-4 text-status-success"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        stroke-width="2"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M5 13l4 4L19 7"
-                        />
-                      </svg>
+                      <CheckIcon class="w-4 h-4 text-status-success" />
                     {:else}
-                      <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        stroke-width="2"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                        />
-                      </svg>
+                      <ClipboardIcon class="w-4 h-4" />
                     {/if}
                   </button>
                 </div>
@@ -340,33 +308,9 @@ const currentAgentName = $derived(
                 title="Copy command"
               >
                 {#if copiedExport}
-                  <svg
-                    class="w-4 h-4 text-status-success"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="2"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
+                  <CheckIcon class="w-4 h-4 text-status-success" />
                 {:else}
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="2"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                    />
-                  </svg>
+                  <ClipboardIcon class="w-4 h-4" />
                 {/if}
               </button>
             </div>
@@ -389,33 +333,9 @@ const currentAgentName = $derived(
                 title="Copy command"
               >
                 {#if copiedServe}
-                  <svg
-                    class="w-4 h-4 text-status-success"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="2"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
+                  <CheckIcon class="w-4 h-4 text-status-success" />
                 {:else}
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="2"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                    />
-                  </svg>
+                  <ClipboardIcon class="w-4 h-4" />
                 {/if}
               </button>
             </div>

diff --git a/packages/web/src/lib/components/SessionItem.svelte b/packages/web/src/lib/components/SessionItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import GithubIcon from 'virtual:icons/dinkie-icons/github';
 import type { SessionMeta } from '$lib/types';
 
 interface Props {
@@ -86,11 +87,7 @@ function handleRemove(e: MouseEvent) {
       {/if}
       {#if isGist}
         <span class="flex items-center gap-1 text-muted/70">
-          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
-            <path
-              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-            />
-          </svg>
+          <GithubIcon class="w-3 h-3" />
           gist
         </span>
       {/if}

diff --git a/packages/web/src/lib/components/SidebarFooter.svelte b/packages/web/src/lib/components/SidebarFooter.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import DeleteIcon from 'virtual:icons/dinkie-icons/diagonal-cross';
+import ShieldIcon from 'virtual:icons/dinkie-icons/shield';
 import ConfirmationModal from '$lib/components/modals/ConfirmationModal.svelte';
 import { isLocal } from '$lib/features';
 
@@ -26,19 +28,7 @@ function handleCancelClear() {
 
 <div class="border-t border-edge px-3 py-3 space-y-3">
   <div class="flex items-start gap-2 text-xs text-muted">
-    <svg
-      class="w-4 h-4 shrink-0 mt-0.5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="1.5"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
-      />
-    </svg>
+    <ShieldIcon class="w-4 h-4 shrink-0 mt-0.5" />
     {#if isLocal}
       <span>sessions are loaded from your local machine.</span>
     {:else}
@@ -52,19 +42,7 @@ function handleCancelClear() {
     class="w-full flex items-center justify-center gap-2 px-3 py-1.5 text-xs text-muted border border-edge rounded hover:text-red-400 hover:border-red-400/50 transition-colors cursor-pointer"
     onclick={handleClearClick}
   >
-    <svg
-      class="w-3.5 h-3.5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="1.5"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-      />
-    </svg>
+    <DeleteIcon class="w-3.5 h-3.5" />
     {isLocal ? 'clear cached sessions' : 'clear local data'}
   </button>
 </div>

diff --git a/packages/web/src/lib/components/UploadZone.svelte b/packages/web/src/lib/components/UploadZone.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+import DownloadIcon from 'virtual:icons/dinkie-icons/download';
+import FolderIcon from 'virtual:icons/dinkie-icons/file-folder';
+import GithubIcon from 'virtual:icons/dinkie-icons/github';
 import LogsLocationModal from './LogsLocationModal.svelte';
 
 interface Props {
@@ -92,19 +95,7 @@ function handleFileChange(e: Event) {
     ondragover={handleDragOver}
     ondrop={handleDrop}
   >
-    <svg
-      class="w-10 h-10 text-muted"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="1"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
-      />
-    </svg>
+    <DownloadIcon class="w-10 h-10 text-muted rotate-180" />
 
     <div class="text-center space-y-2">
       <h2 class="text-foreground-bright font-bold text-base">
@@ -124,19 +115,7 @@ function handleFileChange(e: Event) {
       class="flex items-center gap-2 px-6 py-2 text-sm border border-edge rounded hover:border-foreground/30 hover:text-foreground-bright transition-colors cursor-pointer text-foreground"
       onclick={() => fileInput.click()}
     >
-      <svg
-        class="w-4 h-4"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-width="1.5"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776"
-        />
-      </svg>
+      <FolderIcon class="w-4 h-4" />
       browse files
     </button>
     <input
@@ -186,12 +165,7 @@ function handleFileChange(e: Event) {
                 ></path>
               </svg>
             {:else}
-              <!-- GitHub icon -->
-              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-                <path
-                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-                />
-              </svg>
+              <GithubIcon class="w-4 h-4" />
             {/if}
             load gist
           </button>