refactor(ui): replace remaining inline icons with the shared icon module

src/App.tsx

@@ -4,6 +4,7 @@ import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/sora/400.css';
 import '@fontsource/sora/500.css';
+import { ChevronRightIcon, GitHubIcon } from './components/icons';
 import '@fontsource/sora/600.css';
 import '@fontsource/sora/700.css';
 import '@fontsource/space-grotesk/500.css';
@@ -125,15 +126,7 @@ function DropOverlay() {
         'backdrop-filter': 'blur(4px)',
       }}
     >
-      <svg
-        width="48"
-        height="48"
-        viewBox="0 0 16 16"
-        fill={theme.accent}
-        style={{ opacity: '0.9' }}
-      >
-        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
-      </svg>
+      <GitHubIcon size={48} style={{ color: theme.accent, opacity: '0.9' }} />
       <span
         style={{
           color: theme.fg,
@@ -928,9 +921,7 @@ function App() {
                 'flex-shrink': '0',
               }}
             >
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
-              </svg>
+              <ChevronRightIcon size={14} />
             </button>
           </Show>
           <div class="task-workspace">

src/arena/ArenaOverlay.tsx

@@ -4,6 +4,7 @@ import './arena-countdown.css';
 import './arena-battle.css';
 import './arena-results.css';
 import './arena-history.css';
+import { ScrambleIcon } from '../components/icons';
 import { Show, onMount } from 'solid-js';
 import { arenaStore } from './store';
 import { loadArenaPresets, loadArenaHistory } from './persistence';
@@ -31,19 +32,7 @@ export function ArenaOverlay(props: ArenaOverlayProps) {
     <div class="arena-overlay">
       <div class="arena-header">
         <div class="arena-title">
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M3 3L13 13M9 12L12 9" />
-            <path d="M13 3L3 13M4 9L7 12" />
-          </svg>
+          <ScrambleIcon size={20} />
           AI Arena
         </div>
         <button class="arena-close-btn" onClick={handleClose}>

src/arena/BattleScreen.tsx

@@ -1,4 +1,5 @@
 import { For, Show, createSignal, createEffect, onCleanup } from 'solid-js';
+import { StopIcon } from '../components/icons';
 import { TerminalView } from '../components/TerminalView';
 import { ChangedFilesList } from '../components/ChangedFilesList';
 import { DiffViewerDialog } from '../components/DiffViewerDialog';
@@ -115,9 +116,7 @@ export function BattleScreen() {
                           onClick={() => handleStop(agentId)}
                           title="Stop"
                         >
-                          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-                            <rect x="3" y="3" width="10" height="10" rx="1" />
-                          </svg>
+                          <StopIcon size={12} />
                         </button>
                       </Show>
                     </div>

src/arena/ConfigScreen.tsx

@@ -19,7 +19,7 @@ import { invoke } from '../lib/ipc';
 import { IPC } from '../../electron/ipc/channels';
 import { saveArenaPresets } from './persistence';
 import { ProjectSelect } from '../components/ProjectSelect';
-import { CloseIcon } from '../components/icons';
+import { CloseIcon, ScrambleIcon } from '../components/icons';
 import { MAX_COMPETITORS, MIN_COMPETITORS } from './store';
 import type { BattleCompetitor } from './types';
 
@@ -218,20 +218,7 @@ export function ConfigScreen() {
       {/* Actions */}
       <div class="arena-config-actions">
         <button class="arena-fight-btn" disabled={!canFight() || preparing()} onClick={handleFight}>
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style={{ 'margin-right': '6px' }}
-          >
-            <path d="M3 3L13 13M9 12L12 9" />
-            <path d="M13 3L3 13M4 9L7 12" />
-          </svg>
+          <ScrambleIcon size={20} style={{ 'margin-right': '6px' }} />
           Fight!
         </button>
       </div>

src/arena/HistoryScreen.tsx

@@ -4,6 +4,7 @@ import { saveArenaHistory } from './persistence';
 import { formatDuration } from './utils';
 import { confirm } from '../lib/dialog';
 import { invoke } from '../lib/ipc';
+import { ChevronLeftThinIcon, TrashIcon } from '../components/icons';
 import { IPC } from '../../electron/ipc/channels';
 
 function formatDate(iso: string): string {
@@ -82,18 +83,7 @@ export function HistoryScreen() {
           class="arena-close-btn"
           onClick={() => setPhase(arenaStore.previousPhase ?? 'config')}
         >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M10 3L5 8l5 5" />
-          </svg>
+          <ChevronLeftThinIcon size={14} />
           Back
         </button>
       </div>
@@ -123,18 +113,7 @@ export function HistoryScreen() {
                     title="Delete match and clean up worktrees"
                   >
                     <Show when={deleting() !== match.id} fallback={<span>...</span>}>
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <path d="M3 4h10M6 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1M5 4v9a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4" />
-                      </svg>
+                      <TrashIcon size={14} />
                     </Show>
                   </button>
                 </div>

src/arena/ResultsScreen.tsx

@@ -1,5 +1,15 @@
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import { ChangedFilesList } from '../components/ChangedFilesList';
+import {
+  ChevronLeftThinIcon,
+  ClockIcon,
+  CompareIcon,
+  MergeIcon,
+  PlusThinIcon,
+  ShieldIcon,
+  StarIcon,
+  SyncIcon,
+} from '../components/icons';
 import { DiffViewerDialog } from '../components/DiffViewerDialog';
 import { CommitDialog } from './CommitDialog';
 import { createMergeWorkflow } from './merge';
@@ -259,9 +269,7 @@ export function ResultsScreen() {
                           onClick={() => setRating(competitor.id, star)}
                           title={`${star} star${star > 1 ? 's' : ''}`}
                         >
-                          <svg width="28" height="28" viewBox="0 0 16 16" fill="currentColor">
-                            <path d="M8 1.3l1.8 3.6 4 .6-2.9 2.8.7 4-3.6-1.9-3.6 1.9.7-4L2.2 5.5l4-.6L8 1.3z" />
-                          </svg>
+                          <StarIcon size={28} />
                         </button>
                       )}
                     </For>
@@ -280,21 +288,7 @@ export function ResultsScreen() {
                         disabled={merge.merging() || merge.mergedId() !== null}
                         onClick={() => merge.handleMergeClick(competitor)}
                       >
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 16 16"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="1.5"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <circle cx="4" cy="4" r="2" />
-                          <circle cx="12" cy="4" r="2" />
-                          <circle cx="8" cy="13" r="2" />
-                          <path d="M4 6v1c0 2 4 4 4 4M12 6v1c0 2-4 4-4 4" />
-                        </svg>
+                        <MergeIcon size={14} />
                         {merge.merging() ? 'Merging...' : 'Merge'}
                       </button>
                     </Show>
@@ -312,104 +306,33 @@ export function ResultsScreen() {
 
       <Show when={projectLabel()}>
         <div class="arena-results-project">
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M2 4l6-2 6 2v8l-6 2-6-2z" />
-            <path d="M8 2v12" />
-          </svg>
+          <ShieldIcon size={14} />
           {projectLabel()}
         </div>
       </Show>
 
       <div class="arena-config-actions">
         <button class="arena-close-btn" onClick={() => void openCompareTask()}>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M3 3h4v10H3zM9 3h4v10H9zM5 6H3M5 8H3M5 10H3M11 6H9M11 8H9M11 10H9" />
-          </svg>
+          <CompareIcon size={14} />
           Compare All
         </button>
         <Show when={!isHistoryView()}>
           <button class="arena-close-btn" onClick={() => void resetForRematch()}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M2 8a6 6 0 0 1 10.2-4.3" />
-              <path d="M14 8a6 6 0 0 1-10.2 4.3" />
-              <path d="M12 1v3h-3" />
-              <path d="M4 15v-3h3" />
-            </svg>
+            <SyncIcon size={14} />
             Rematch
           </button>
           <button class="arena-close-btn" onClick={() => void resetForNewMatch()}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M8 3v10M3 8h10" />
-            </svg>
+            <PlusThinIcon size={14} />
             New Match
           </button>
           <button class="arena-close-btn" onClick={() => setPhase('history')}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <circle cx="8" cy="8" r="6" />
-              <path d="M8 4.5V8l2.5 2.5" />
-            </svg>
+            <ClockIcon size={14} />
             History
           </button>
         </Show>
         <Show when={isHistoryView()}>
           <button class="arena-close-btn" onClick={returnToHistory}>
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 16 16"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M10 3L5 8l5 5" />
-            </svg>
+            <ChevronLeftThinIcon size={14} />
             Back to History
           </button>
         </Show>

src/components/AddProjectMenu.tsx

@@ -2,7 +2,7 @@ import { onCleanup, onMount } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { theme } from '../lib/theme';
 import { sf } from '../lib/fontScale';
-import { DocumentIcon } from '../documents/DocumentIcon';
+import { DocumentIcon, FolderAltIcon } from '../components/icons';
 
 export type ProjectKindChoice = 'code' | 'document';
 
@@ -111,9 +111,7 @@ export function AddProjectMenu(props: AddProjectMenuProps) {
           {row(
             'code',
             () => (
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                <path d="M1.5 3.25A1.75 1.75 0 0 1 3.25 1.5h2.9c.46 0 .9.18 1.23.51l.86.86h4.51c.97 0 1.75.78 1.75 1.75v7.63c0 .97-.78 1.75-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75z" />
-              </svg>
+              <FolderAltIcon size={14} />
             ),
             'Code project…',
             'A git repo that holds tasks',

src/components/AskCodeCard.tsx

@@ -2,6 +2,7 @@ import { createSignal, onCleanup, onMount, Show } from 'solid-js';
 import { theme } from '../lib/theme';
 import { sf } from '../lib/fontScale';
 import { Channel, invoke } from '../lib/ipc';
+import { CloseIcon } from './icons';
 import { IPC } from '../../electron/ipc/channels';
 import { store } from '../store/store';
 import { warn as logWarn, errMessage } from '../lib/log';
@@ -130,7 +131,7 @@ export function AskCodeCard(props: AskCodeCardProps) {
           }}
           title="Dismiss"
         >
-          ×
+          <CloseIcon size={12} />
         </button>
       </div>
 

src/components/BranchPrefixField.tsx

@@ -1,5 +1,6 @@
 import { Show } from 'solid-js';
 import { theme } from '../lib/theme';
+import { FolderIcon, GitBranchIcon } from './icons';
 
 interface BranchPrefixFieldProps {
   branchPrefix: string;
@@ -54,27 +55,11 @@ export function BranchPrefixField(props: BranchPrefixFieldProps) {
           }}
         >
           <span style={{ display: 'flex', 'align-items': 'center', gap: '6px' }}>
-            <svg
-              width="11"
-              height="11"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-              style={{ 'flex-shrink': '0' }}
-            >
-              <path d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6.25 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 7.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 0h5.5a2.5 2.5 0 0 0 2.5-2.5v-.5a.75.75 0 0 0-1.5 0v.5a1 1 0 0 1-1 1H5a3.25 3.25 0 1 0 0 6.5h6.25a.75.75 0 0 0 0-1.5H5a1.75 1.75 0 1 1 0-3.5Z" />
-            </svg>
+            <GitBranchIcon size={11} style={{ 'flex-shrink': '0' }} />
             {props.branchPreview}
           </span>
           <span style={{ display: 'flex', 'align-items': 'center', gap: '6px' }}>
-            <svg
-              width="11"
-              height="11"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-              style={{ 'flex-shrink': '0' }}
-            >
-              <path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z" />
-            </svg>
+            <FolderIcon size={11} style={{ 'flex-shrink': '0' }} />
             {props.projectPath}/.worktrees/{props.branchPreview}
           </span>
         </div>