perf(ui): migrate icons to SVG sprite system

Replace @remixicon/react with a shared Icon component that renders
via <use href> references to a single hidden SVG sprite. This reduces
DOM node count by replacing inline SVGs with lightweight references.

- Create Icon component with sprite injection (packages/ui/src/components/icon/)
- Migrate all 164 files from @remixicon/react to Icon component
- Auto-generate sprite data from remixicon bundle (scripts/generate-icon-sprite.mjs)
- Add bun run icons:generate to package.json
- Move @remixicon/react to devDependencies
- Add icon usage instructions to theme-system skill

packages/ui/src/components/chat/message/DiffViewToggle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { RiAlignJustify, RiLayoutColumnLine } from '@remixicon/react';
 
 import { Button } from '@/components/ui/button';
+import { Icon } from "@/components/icon/Icon";
 import { cn } from '@/lib/utils';
 
 export type DiffViewMode = 'side-by-side' | 'unified';
@@ -30,9 +30,9 @@ export const DiffViewToggle: React.FC<DiffViewToggleProps> = ({ mode, onModeChan
             title={mode === 'side-by-side' ? 'Switch to unified view' : 'Switch to side-by-side view'}
         >
             {mode === 'side-by-side' ? (
-                <RiAlignJustify className="h-3 w-3" />
+                <Icon name="align-justify" className="h-3 w-3" />
             ) : (
-                <RiLayoutColumnLine className="h-3 w-3" />
+                <Icon name="layout-column" className="h-3 w-3" />
             )}
         </Button>
     );

packages/ui/src/components/chat/message/MessageBody.tsx

@@ -16,7 +16,6 @@ import { FadeInOnReveal } from './FadeInOnReveal';
 import { Button } from '@/components/ui/button';
 import { SaveProjectPlanDialog } from '@/components/session/SaveProjectPlanDialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { RiCheckLine, RiFileCopyLine, RiChatNewLine, RiArrowGoBackLine, RiGitBranchLine, RiHourglassLine, RiTimeLine, RiVolumeUpLine, RiStopLine, RiImageDownloadLine, RiLoader4Line, RiErrorWarningLine, RiBookletLine, RiGlobalLine, RiInformationLine } from '@remixicon/react';
 import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
 import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 
@@ -34,6 +33,7 @@ import { useChatSurfaceMode } from '@/components/chat/useChatSurfaceMode';
 import { isVSCodeRuntime } from '@/lib/desktop';
 import { toPng } from 'html-to-image';
 import { toast } from '@/components/ui';
+import { Icon } from "@/components/icon/Icon";
 import { formatTimestampForDisplay } from './timeFormat';
 import { ToolRevealOnMount } from './parts/ToolRevealOnMount';
 import { StaticToolRow } from './parts/ProgressiveGroup';
@@ -89,7 +89,6 @@ const normalizeSubtaskModel = (model: SubtaskPartLike['model']): string | null =
     return `${providerID}/${modelID}`;
 };
 
-
 const UserSubtaskPart: React.FC<{ part: SubtaskPartLike }> = ({ part }) => {
     const [expanded, setExpanded] = React.useState(false);
     const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
@@ -244,7 +243,7 @@ const UserShellActionPart: React.FC<{ part: ShellActionPartLike }> = ({ part })
                             aria-label={copiedOutput ? t('chat.messageBody.shellCommand.copied') : t('chat.messageBody.shellCommand.copyOutput')}
                             title={copiedOutput ? t('chat.messageBody.shellCommand.copied') : t('chat.messageBody.shellCommand.copyOutput')}
                         >
-                            {copiedOutput ? <RiCheckLine className="h-3.5 w-3.5" /> : <RiFileCopyLine className="h-3.5 w-3.5" />}
+                            {copiedOutput ? <Icon name="check" className="h-3.5 w-3.5" /> : <Icon name="file-copy" className="h-3.5 w-3.5" />}
                         </button>
                     </div>
                     {expanded ? (
@@ -268,8 +267,6 @@ const formatTurnDuration = (durationMs: number): string => {
     return `${minutes}m ${seconds}s`;
 };
 
-
-
 interface MessageBodyProps {
     sessionId?: string;
     messageId: string;
@@ -463,7 +460,7 @@ const UserMessageBody = React.memo(({ messageId, parts, isMobile, alwaysShowActi
                                     onRevert();
                                 }}
                             >
-                                <RiArrowGoBackLine className="h-3 w-3" />
+                                <Icon name="arrow-go-back" className="h-3 w-3" />
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent sideOffset={6}>{t('chat.messageBody.actions.revert')}</TooltipContent>
@@ -484,7 +481,7 @@ const UserMessageBody = React.memo(({ messageId, parts, isMobile, alwaysShowActi
                                     effectiveOnFork();
                                 }}
                             >
-                                <RiGitBranchLine className="h-3 w-3" />
+                                <Icon name="git-branch" className="h-3 w-3" />
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent sideOffset={6}>{t('chat.messageBody.actions.fork')}</TooltipContent>
@@ -510,9 +507,9 @@ const UserMessageBody = React.memo(({ messageId, parts, isMobile, alwaysShowActi
                                 }}
                             >
                                 {isMessageCopied ? (
-                                    <RiCheckLine className="h-3 w-3 text-[color:var(--status-success)]" />
+                                    <Icon name="check" className="h-3 w-3 text-[color:var(--status-success)]" />
                                 ) : (
-                                    <RiFileCopyLine className="h-3 w-3" />
+                                    <Icon name="file-copy" className="h-3 w-3" />
                                 )}
                             </Button>
                         </TooltipTrigger>
@@ -770,9 +767,9 @@ const AssistantMessageActionButtons = React.memo(({
                             }}
                         >
                             {isMessageCopied ? (
-                                <RiCheckLine className="h-3.5 w-3.5 text-[color:var(--status-success)]" />
+                                <Icon name="check" className="h-3.5 w-3.5 text-[color:var(--status-success)]" />
                             ) : (
-                                <RiFileCopyLine className="h-3.5 w-3.5" />
+                                <Icon name="file-copy" className="h-3.5 w-3.5" />
                             )}
                         </Button>
                     </TooltipTrigger>
@@ -796,9 +793,9 @@ const AssistantMessageActionButtons = React.memo(({
                         }}
                     >
                         {isSharing ? (
-                            <RiLoader4Line className="h-4 w-4 animate-spin" />
+                            <Icon name="loader-4" className="h-4 w-4 animate-spin" />
                         ) : (
-                            <RiImageDownloadLine className="h-4 w-4" />
+                            <Icon name="image-download" className="h-4 w-4" />
                         )}
                     </Button>
                 </TooltipTrigger>
@@ -820,9 +817,9 @@ const AssistantMessageActionButtons = React.memo(({
                             onClick={handleTTSClick}
                         >
                             {isTTSPlaying ? (
-                                <RiStopLine className="h-3.5 w-3.5" />
+                                <Icon name="stop" className="h-3.5 w-3.5" />
                             ) : (
-                                <RiVolumeUpLine className="h-3.5 w-3.5" />
+                                <Icon name="volume-up" className="h-3.5 w-3.5" />
                             )}
                         </Button>
                     </TooltipTrigger>
@@ -1033,7 +1030,6 @@ const AssistantMessageBody = React.memo(({
         return resolved ? { id: resolved.id, path: resolved.path } : null;
     }, [availableWorktreesByProject, currentSession?.directory, effectiveDirectory, projects]);
 
-
     const hasTools = toolParts.length > 0;
 
     const hasPendingTools = React.useMemo(() => {
@@ -1082,7 +1078,6 @@ const AssistantMessageBody = React.memo(({
         return toolParts.every((toolPart) => isToolFinalized(toolPart));
     }, [toolParts, hasPendingTools, isToolFinalized]);
 
-
     const reasoningParts = React.useMemo(() => {
         return visibleParts.filter((part) => part.type === 'reasoning');
     }, [visibleParts]);
@@ -1105,7 +1100,6 @@ const AssistantMessageBody = React.memo(({
         hasTools &&
         (hasPendingTools || hasOpenStep || !allToolsFinalized);
 
-
     const shouldHoldTools = awaitingMessageCompletion
         || (hasTools && (hasPendingTools || hasOpenStep || !allToolsFinalized));
     const shouldHoldReasoning = awaitingMessageCompletion || shouldHoldForReasoning;
@@ -1398,7 +1392,7 @@ const AssistantMessageBody = React.memo(({
 
     const shouldDeferSortedInlineText = isSortedRenderMode && !hasStopFinish;
     const showErrorMessage = Boolean(errorMessage);
-    const ErrorIcon = errorVariant === 'info' ? RiInformationLine : RiErrorWarningLine;
+    const errorIconName = errorVariant === 'info' ? 'information' : 'error-warning';
     const shouldShowMessageActions = hasCopyableText;
     const shouldShowTurnFooter = isLastAssistantInTurn && hasTextContent && (hasStopFinish || Boolean(errorMessage));
     const shouldRenderActionsInActivity = isSortedRenderMode;
@@ -1466,7 +1460,6 @@ const AssistantMessageBody = React.memo(({
 
     const shouldRenderStandaloneActionsAfterContent = shouldShowStandaloneMessageActions && lastRenderableTextPartIndex < 0;
 
-
     const renderedParts = React.useMemo(() => {
         const rendered: React.ReactNode[] = [];
 
@@ -1729,7 +1722,7 @@ const AssistantMessageBody = React.memo(({
                                 openContextPreview(directory, messagePreviewUrl);
                             }}
                         >
-                            <RiGlobalLine className="h-4 w-4" />
+                            <Icon name="global" className="h-4 w-4" />
                         </Button>
                     </TooltipTrigger>
                     <TooltipContent sideOffset={6}>{t('chat.messageBody.actions.openPreview')}</TooltipContent>
@@ -1750,7 +1743,7 @@ const AssistantMessageBody = React.memo(({
                             onPointerDown={(event) => event.stopPropagation()}
                             onClick={handleSaveAsPlanClick}
                         >
-                            <RiBookletLine className="h-4 w-4" />
+                            <Icon name="booklet" className="h-4 w-4" />
                         </Button>
                     </TooltipTrigger>
                     <TooltipContent sideOffset={6}>{t('chat.messageBody.actions.saveAsPlan')}</TooltipContent>
@@ -1766,7 +1759,7 @@ const AssistantMessageBody = React.memo(({
                         onPointerDown={(event) => event.stopPropagation()}
                         onClick={handleForkClick}
                     >
-                        <RiChatNewLine className="h-4 w-4" />
+                        <Icon name="chat-new" className="h-4 w-4" />
                     </Button>
                 </TooltipTrigger>
                 <TooltipContent sideOffset={6}>{t('chat.messageBody.actions.startNewSession')}</TooltipContent>
@@ -1824,7 +1817,7 @@ const AssistantMessageBody = React.memo(({
                                     : 'bg-[var(--status-error-background)] border-[var(--status-error-border)]',
                             )}>
                                 <div className="flex items-center gap-2">
-                                    <ErrorIcon className={cn(
+                                    <Icon name={errorIconName} className={cn(
                                         'h-4 w-4 shrink-0',
                                         errorVariant === 'info' ? 'text-[var(--status-info)]' : 'text-[var(--status-error)]',
                                     )} />
@@ -1862,7 +1855,7 @@ const AssistantMessageBody = React.memo(({
                                 <Tooltip>
                                     <TooltipTrigger asChild>
                                         <span className="text-sm text-muted-foreground/60 tabular-nums flex items-center gap-1">
-                                            <RiHourglassLine className="h-3.5 w-3.5" />
+                                            <Icon name="hourglass" className="h-3.5 w-3.5" />
                                             <span className="message-footer__label">{turnDurationText}</span>
                                         </span>
                                     </TooltipTrigger>
@@ -1876,7 +1869,7 @@ const AssistantMessageBody = React.memo(({
                                             className={footerTimestampClassName}
                                             aria-label={`Message time: ${footerTimestamp}`}
                                         >
-                                            <RiTimeLine className="h-3.5 w-3.5" />
+                                            <Icon name="time" className="h-3.5 w-3.5" />
                                             <span className="message-footer__label">{footerTimestamp}</span>
                                         </span>
                                     </TooltipTrigger>

packages/ui/src/components/chat/message/MessageHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { RiAiAgentLine, RiBrainAi3Line, RiUser3Line } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { getAgentColor } from '@/lib/agentColors';
 import { useProviderLogo } from '@/hooks/useProviderLogo';
+import { Icon } from "@/components/icon/Icon";
 
 interface MessageHeaderProps {
     isUser: boolean;
@@ -23,7 +23,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
                     <div className="flex-shrink-0">
                         {isUser ? (
                             <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
-                                <RiUser3Line className="h-4 w-4 text-primary" />
+                                <Icon name="user-3" className="h-4 w-4 text-primary" />
                             </div>
                         ) : (
                             <div className="flex items-center justify-center">
@@ -38,10 +38,9 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
                                         onError={handleLogoError}
                                     />
                                 ) : (
-                                    <RiBrainAi3Line
-                                        className="h-4 w-4"
-                                        style={{ color: `var(${getAgentColor(agentName).var})` }}
-                                    />
+                                    <Icon name="brain-ai-3" className="h-4 w-4"
+                                        
+                                        style={{ color: `var(${getAgentColor(agentName).var})` }}/>
                                 )}
                             </div>
                         )}
@@ -64,7 +63,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
                                     getAgentColor(agentName).class
                                 )}
                             >
-                                <RiAiAgentLine className="h-3 w-3 flex-shrink-0" />
+                                <Icon name="ai-agent" className="h-3 w-3 flex-shrink-0" />
                                 <span className="font-medium">{agentName}</span>
                             </div>
                         )}
@@ -85,7 +84,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
                                         : undefined
                                 }
                             >
-                                <RiBrainAi3Line className="h-3 w-3 flex-shrink-0" />
+                                <Icon name="brain-ai-3" className="h-3 w-3 flex-shrink-0" />
                                 <span className="font-medium">{variant.length > 0 ? variant[0].toLowerCase() + variant.slice(1) : variant}</span>
                             </div>
                         )}

packages/ui/src/components/chat/message/TextSelectionMenu.tsx

@@ -5,10 +5,10 @@ import { useSessions } from '@/sync/sync-context';
 import { useInputStore } from '@/sync/input-store';
 import { useUIStore } from '@/stores/useUIStore';
 import { useProjectsStore } from '@/stores/useProjectsStore';
-import { RiBookletLine, RiChatNewLine, RiAddLine, RiFileCopyLine, RiLoader4Line } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { copyTextToClipboard } from '@/lib/clipboard';
 import { toast } from '@/components/ui';
+import { Icon } from "@/components/icon/Icon";
 import { getProjectNotesAndTodos, saveProjectNotesAndTodos } from '@/lib/openchamberConfig';
 import { resolveProjectForSessionDirectory } from '@/lib/projectResolution';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
@@ -32,7 +32,6 @@ interface SelectionPayload {
   rect: DOMRect;
 }
 
-
 const appendDistilledInsightToNotes = (existingNotes: string, insight: string): string => {
   const trimmedInsight = insight.trim().replace(/^[-*+]\s+/, '');
   if (!trimmedInsight) {
@@ -592,7 +591,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
             title={t('chat.textSelection.title.addToCurrentChat')}
             type="button"
           >
-            <RiAddLine className="h-5 w-5 flex-shrink-0" />
+            <Icon name="add" className="h-5 w-5 flex-shrink-0" />
             <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.addToChat')}</span>
           </button>
 
@@ -608,7 +607,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
             title={t('chat.textSelection.title.newSessionWithSelection')}
             type="button"
           >
-            <RiChatNewLine className="h-5 w-5 flex-shrink-0" />
+            <Icon name="chat-new" className="h-5 w-5 flex-shrink-0" />
             <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.newSession')}</span>
           </button>
 
@@ -624,7 +623,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
             title={t('chat.textSelection.actions.copy')}
             type="button"
           >
-            <RiFileCopyLine className="h-5 w-5 flex-shrink-0" />
+            <Icon name="file-copy" className="h-5 w-5 flex-shrink-0" />
             <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.copy')}</span>
           </button>
 
@@ -642,7 +641,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
               title={t('chat.textSelection.title.saveInsightToNotes')}
               type="button"
             >
-              {isAddingToNotes ? <RiLoader4Line className="h-5 w-5 flex-shrink-0 animate-spin" /> : <RiBookletLine className="h-5 w-5 flex-shrink-0" />}
+              {isAddingToNotes ? <Icon name="loader-4" className="h-5 w-5 flex-shrink-0 animate-spin" /> : <Icon name="booklet" className="h-5 w-5 flex-shrink-0" />}
               <span className="min-w-0 whitespace-normal">{t('chat.textSelection.actions.addToNotes')}</span>
             </button>
           ) : null}
@@ -685,7 +684,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
           title={t('chat.textSelection.title.addToCurrentChat')}
           type="button"
         >
-          <RiAddLine className="h-4 w-4" />
+          <Icon name="add" className="h-4 w-4" />
           <span className="whitespace-nowrap">{t('chat.textSelection.actions.addToChat')}</span>
         </button>
       
@@ -703,7 +702,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
           title={t('chat.textSelection.title.newSessionWithSelection')}
           type="button"
         >
-          <RiChatNewLine className="h-4 w-4" />
+          <Icon name="chat-new" className="h-4 w-4" />
           <span className="whitespace-nowrap">{t('chat.textSelection.actions.newSession')}</span>
         </button>
 
@@ -724,7 +723,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
               title={t('chat.textSelection.title.saveInsightToNotes')}
               type="button"
             >
-              {isAddingToNotes ? <RiLoader4Line className="h-4 w-4 animate-spin" /> : <RiBookletLine className="h-4 w-4" />}
+              {isAddingToNotes ? <Icon name="loader-4" className="h-4 w-4 animate-spin" /> : <Icon name="booklet" className="h-4 w-4" />}
               <span className="whitespace-nowrap">{t('chat.textSelection.actions.addToNotes')}</span>
             </button>
           </>

packages/ui/src/components/chat/message/ToolOutputDialog.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { RiArrowLeftSLine, RiArrowRightSLine, RiBrainAi3Line, RiCloseLine, RiFileImageLine, RiFileList2Line, RiFilePdfLine, RiFileSearchLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiLoader4Line, RiPencilAiLine, RiSearchLine, RiTaskLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
 import { File as PierreFile, PatchDiff } from '@pierre/diffs/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { createPortal } from 'react-dom';
@@ -26,6 +25,7 @@ import type { ToolPopupContent, DiffViewMode } from './types';
 import { DiffViewToggle } from './DiffViewToggle';
 import { VirtualizedCodeBlock, type CodeLine } from './parts/VirtualizedCodeBlock';
 import { JsonTreeView } from '@/components/ui/JsonTreeView';
+import { Icon } from "@/components/icon/Icon";
 import { useI18n } from '@/lib/i18n';
 
 interface ToolOutputDialogProps {
@@ -40,54 +40,54 @@ const getToolIcon = (toolName: string) => {
     const tool = toolName.toLowerCase();
 
     if (tool === 'reasoning') {
-        return <RiBrainAi3Line className={iconClass} />;
+        return <Icon name="brain-ai-3" className={iconClass} />;
     }
     if (tool === 'image-preview') {
-        return <RiFileImageLine className={iconClass} />;
+        return <Icon name="file-image" className={iconClass} />;
     }
     if (tool === 'mermaid-preview') {
-        return <RiFileList2Line className={iconClass} />;
+        return <Icon name="file-list-2" className={iconClass} />;
     }
     if (tool === 'edit' || tool === 'multiedit' || tool === 'apply_patch' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
-        return <RiPencilAiLine className={iconClass} />;
+        return <Icon name="pencil-ai" className={iconClass} />;
     }
     if (tool === 'write' || tool === 'create' || tool === 'file_write') {
-        return <RiFilePdfLine className={iconClass} />;
+        return <Icon name="file-pdf" className={iconClass} />;
     }
     if (tool === 'read' || tool === 'view' || tool === 'file_read' || tool === 'cat') {
-        return <RiFilePdfLine className={iconClass} />;
+        return <Icon name="file-pdf" className={iconClass} />;
     }
     if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal') {
-        return <RiTerminalBoxLine className={iconClass} />;
+        return <Icon name="terminal-box" className={iconClass} />;
     }
     if (tool === 'list' || tool === 'ls' || tool === 'dir' || tool === 'list_files') {
-        return <RiFolder6Line className={iconClass} />;
+        return <Icon name="folder-6" className={iconClass} />;
     }
     if (tool === 'search' || tool === 'grep' || tool === 'find' || tool === 'ripgrep') {
-        return <RiSearchLine className={iconClass} />;
+        return <Icon name="search" className={iconClass} />;
     }
     if (tool === 'glob') {
-        return <RiFileSearchLine className={iconClass} />;
+        return <Icon name="file-search" className={iconClass} />;
     }
     if (tool === 'fetch' || tool === 'curl' || tool === 'wget' || tool === 'webfetch') {
-        return <RiGlobalLine className={iconClass} />;
+        return <Icon name="global" className={iconClass} />;
     }
     if (tool === 'web-search' || tool === 'websearch' || tool === 'search_web' || tool === 'google' || tool === 'bing' || tool === 'duckduckgo') {
-        return <RiSearchLine className={iconClass} />;
+        return <Icon name="search" className={iconClass} />;
     }
     if (tool === 'todowrite' || tool === 'todoread') {
-        return <RiListCheck3 className={iconClass} />;
+        return <Icon name="list-check-3" className={iconClass} />;
     }
     if (tool === 'plan_enter') {
-        return <RiFileList2Line className={iconClass} />;
+        return <Icon name="file-list-2" className={iconClass} />;
     }
     if (tool === 'plan_exit') {
-        return <RiTaskLine className={iconClass} />;
+        return <Icon name="task" className={iconClass} />;
     }
     if (tool.startsWith('git')) {
-        return <RiGitBranchLine className={iconClass} />;
+        return <Icon name="git-branch" className={iconClass} />;
     }
-    return <RiToolsLine className={iconClass} />;
+    return <Icon name="tools" className={iconClass} />;
 };
 
 const PREVIEW_ANIMATION_MS = 150;
@@ -442,7 +442,7 @@ const ImagePreviewDialog: React.FC<{
                         className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
                         aria-label={t('chat.toolOutputDialog.image.previousAria')}
                     >
-                        <RiArrowLeftSLine className="h-6 w-6" />
+                        <Icon name="arrow-left-s" className="h-6 w-6" />
                     </button>
                     <button
                         type="button"
@@ -451,7 +451,7 @@ const ImagePreviewDialog: React.FC<{
                         className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
                         aria-label={t('chat.toolOutputDialog.image.nextAria')}
                     >
-                        <RiArrowRightSLine className="h-6 w-6" />
+                        <Icon name="arrow-right-s" className="h-6 w-6" />
                     </button>
                 </>
             )}
@@ -480,7 +480,7 @@ const ImagePreviewDialog: React.FC<{
                             onClick={() => onOpenChange(false)}
                             aria-label={t('chat.toolOutputDialog.image.closeAria')}
                         >
-                            <RiCloseLine className="h-4 w-4" />
+                            <Icon name="close" className="h-4 w-4" />
                         </button>
                     </div>
 
@@ -927,7 +927,7 @@ const MermaidPreviewDialog: React.FC<{
                             onClick={() => onOpenChange(false)}
                             aria-label={t('chat.toolOutputDialog.mermaid.closeAria')}
                         >
-                            <RiCloseLine className="h-4 w-4" />
+                            <Icon name="close" className="h-4 w-4" />
                         </button>
                     </div>
                     <div
@@ -937,7 +937,7 @@ const MermaidPreviewDialog: React.FC<{
                         <div className="h-full overflow-hidden">
                             {status === 'loading' && (
                                 <div className="h-full min-h-28 flex items-center justify-center gap-2 text-muted-foreground typography-meta">
-                                    <RiLoader4Line className="h-4 w-4 animate-spin" />
+                                    <Icon name="loader-4" className="h-4 w-4 animate-spin" />
                                     <span>{t('chat.toolOutputDialog.mermaid.loading')}</span>
                                 </div>
                             )}
@@ -1016,7 +1016,7 @@ const ToolOutputDialog: React.FC<ToolOutputDialogProps> = ({ popup, onOpenChange
                 <div className="flex-shrink-0 pb-1">
                     <div className="flex items-start gap-2 text-foreground typography-ui-header font-semibold">
                         {popup.metadata?.tool ? getToolIcon(popup.metadata.tool as string) : (
-                            <RiToolsLine className="h-3.5 w-3.5 text-foreground flex-shrink-0" />
+                            <Icon name="tools" className="h-3.5 w-3.5 text-foreground flex-shrink-0" />
                         )}
                         <span className="break-words flex-1 leading-tight">{popup.title}</span>
                         {popup.isDiff && (

packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { RiStackLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import type { TurnActivityRecord as TurnActivityPart } from '../../lib/turns/types';
 import type { ToolPart as ToolPartType } from '@opencode-ai/sdk/v2';
@@ -11,6 +10,7 @@ import { MinDurationShineText } from './MinDurationShineText';
 import { ToolRevealOnMount } from './ToolRevealOnMount';
 import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
 import { Text } from '@/components/ui/text';
+import { Icon } from "@/components/icon/Icon";
 import { FadeInOnReveal } from '../FadeInOnReveal';
 import { getToolIcon } from './toolPresentation';
 import { getToolMetadata } from '@/lib/toolHelpers';
@@ -927,7 +927,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
                     onClick={onToggle}
                 >
                     <span className="inline-flex h-5 items-center flex-shrink-0" style={{ color: 'var(--tools-icon)' }}>
-                        <RiStackLine className="h-3.5 w-3.5" />
+                        <Icon name="stack" className="h-3.5 w-3.5" />
                     </span>
                     <span
                         className="leading-5 font-semibold inline-flex h-5 items-center flex-shrink-0"

packages/ui/src/components/chat/message/parts/ReasoningPart.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { ComponentType } from 'react';
 import type { Part } from '@opencode-ai/sdk/v2';
-import { RiArrowDownSLine, RiArrowRightSLine, RiBrainAi3Line, RiChatAi3Line } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Icon } from "@/components/icon/Icon";
+import type { IconName } from "@/components/icon/icons";
 import { useUIStore } from '@/stores/useUIStore';
 import { useDurationTickerNow } from './useDurationTicker';
 import { MarkdownRenderer } from '../../MarkdownRenderer';
@@ -14,15 +14,12 @@ type PartWithText = Part & { text?: string; content?: string; time?: { start?: n
 
 export type ReasoningVariant = 'thinking' | 'justification';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type IconComponent = ComponentType<any>;
-
 const variantConfig: Record<
     ReasoningVariant,
-    { label: string; Icon: IconComponent }
+    { label: string; Icon: IconName }
 > = {
-    thinking: { label: 'Thinking', Icon: RiBrainAi3Line },
-    justification: { label: 'Justification', Icon: RiChatAi3Line },
+    thinking: { label: 'Thinking', Icon: 'brain-ai-3' },
+    justification: { label: 'Justification', Icon: 'chat-ai-3' },
 };
 
 const cleanReasoningText = (text: string): string => {
@@ -99,7 +96,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
     const [isExpanded, setIsExpanded] = React.useState(false);
 
     const summary = React.useMemo(() => getReasoningSummary(text), [text]);
-    const { label, Icon } = variantConfig[variant];
+    const { label, Icon: iconName } = variantConfig[variant];
     const timeStart = typeof time?.start === 'number' && Number.isFinite(time.start) ? time.start : undefined;
     const timeEnd = typeof time?.end === 'number' && Number.isFinite(time.end) ? time.end : undefined;
 
@@ -131,7 +128,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
                                 !isExpanded && (alwaysShowActions ? 'opacity-0' : 'group-hover/tool:opacity-0')
                             )}
                         >
-                            <Icon className="h-3.5 w-3.5" />
+                            <Icon name={iconName} className="h-3.5 w-3.5" />
                         </div>
                         <div
                             className={cn(
@@ -140,7 +137,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
                                 !isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100')
                             )}
                         >
-                            {isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
+                            {isExpanded ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-right-s" className="h-3.5 w-3.5" />}
                         </div>
                     </div>
                     <span className="typography-meta font-medium">{label}</span>

packages/ui/src/components/chat/message/parts/ToolPart.tsx

@@ -1,7 +1,6 @@
 
 import React from 'react';
 import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
-import { RiArrowDownSLine, RiArrowRightSLine, RiExternalLinkLine } from '@remixicon/react';
 import { PatchDiff } from '@pierre/diffs/react';
 import { cn } from '@/lib/utils';
 import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
@@ -34,6 +33,7 @@ import {
     tryParseJsonOutput,
 } from '../toolRenderers';
 import { JsonTreeViewer } from '@/components/ui/JsonTreeViewer';
+import { Icon } from "@/components/icon/Icon";
 import { DiffViewToggle, type DiffViewMode } from '../DiffViewToggle';
 import { MinDurationShineText } from './MinDurationShineText';
 import { ToolRevealOnMount } from './ToolRevealOnMount';
@@ -722,7 +722,7 @@ const ToolScrollableSection: React.FC<ToolScrollableSectionProps> = ({
                 disableHorizontal ? 'overflow-y-auto overflow-x-hidden' : 'overflow-auto',
                 className,
             )}
-            size={24}
+           
         >
             <div className="w-full min-w-0">
                 {children}
@@ -1190,7 +1190,7 @@ const TaskToolSummary: React.FC<{
                     onPointerDown={(event) => event.stopPropagation()}
                     onClick={handleOpenSession}
                 >
-                    <RiExternalLinkLine className="h-3.5 w-3.5 flex-shrink-0" />
+                    <Icon name="external-link" className="h-3.5 w-3.5 flex-shrink-0" />
                     <span className="typography-meta text-primary font-medium">{t('chat.toolPart.openSubtask', { type: agentType.charAt(0).toUpperCase() + agentType.slice(1) })}</span>
                 </button>
             )}
@@ -1208,9 +1208,9 @@ const TaskToolSummary: React.FC<{
                         }}
                     >
                         {isOutputExpanded ? (
-                            <RiArrowDownSLine className="h-3.5 w-3.5 flex-shrink-0" />
+                            <Icon name="arrow-down-s" className="h-3.5 w-3.5 flex-shrink-0" />
                         ) : (
-                            <RiArrowRightSLine className="h-3.5 w-3.5 flex-shrink-0" />
+                            <Icon name="arrow-right-s" className="h-3.5 w-3.5 flex-shrink-0" />
                         )}
                         <span className="typography-meta text-foreground/80 font-medium">{t('chat.toolPart.output')}</span>
                     </button>
@@ -1884,8 +1884,6 @@ const ToolPart: React.FC<ToolPartProps> = ({
         sessionEvents.requestGitRefresh({ directory: currentDirectory });
     }, [currentDirectory, isError, isFinalized, normalizedPartTool, part.id, status]);
 
-
-
     const shouldNotifyStructuralChange = isFinalized || isTaskTool;
 
     const onContentChangeRef = React.useRef(onContentChange);
@@ -2419,7 +2417,6 @@ const ToolPart: React.FC<ToolPartProps> = ({
         taskSessionId,
     ]);
 
-
     const taskSummaryLenRef = React.useRef<number>(taskSummaryEntries.length);
     React.useEffect(() => {
         if (!isTaskTool) {
@@ -2565,7 +2562,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
                                 !isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100')
                             )}
                         >
-                            {isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
+                            {isExpanded ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-right-s" className="h-3.5 w-3.5" />}
                         </div>
                     </div>
                     {isMultiFileApplyPatch ? (

packages/ui/src/components/chat/message/parts/UserTextPart.tsx

@@ -4,7 +4,7 @@ import type { Part } from '@opencode-ai/sdk/v2';
 import type { AgentMentionInfo } from '../types';
 import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
 import { useUIStore } from '@/stores/useUIStore';
-import { RiArrowUpSLine } from '@remixicon/react';
+import { Icon } from "@/components/icon/Icon";
 
 type PartWithText = Part & { text?: string; content?: string; value?: string };
 
@@ -149,7 +149,7 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
                     className="absolute top-0 right-0 z-10 flex items-center justify-center rounded-sm bg-[var(--surface-elevated)] p-0.5 text-[var(--surface-mutedForeground)] hover:text-[var(--surface-foreground)] hover:bg-[var(--interactive-hover)] transition-colors"
                     aria-label="Collapse"
                 >
-                    <RiArrowUpSLine className="h-3.5 w-3.5" />
+                    <Icon name="arrow-up-s" className="h-3.5 w-3.5" />
                 </button>
             )}
             <div

packages/ui/src/components/chat/message/parts/toolPresentation.tsx

@@ -1,51 +1,33 @@
 import React from 'react';
-import {
-    RiAiAgentLine,
-    RiBookLine,
-    RiFileEditLine,
-    RiFileList2Line,
-    RiFileSearchLine,
-    RiFileTextLine,
-    RiFolder6Line,
-    RiGitBranchLine,
-    RiGlobalLine,
-    RiListCheck2,
-    RiListCheck3,
-    RiMenuSearchLine,
-    RiPencilLine,
-    RiSurveyLine,
-    RiTaskLine,
-    RiTerminalBoxLine,
-    RiToolsLine,
-} from '@remixicon/react';
+import { Icon } from "@/components/icon/Icon";
 
 export const getToolIcon = (toolName: string) => {
     const iconClass = 'h-3.5 w-3.5 flex-shrink-0';
     const tool = toolName.toLowerCase();
 
     if (tool === 'edit' || tool === 'multiedit' || tool === 'apply_patch' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
-        return <RiPencilLine className={iconClass} />;
+        return <Icon name="pencil" className={iconClass} />;
     }
     if (tool === 'write' || tool === 'create' || tool === 'file_write') {
-        return <RiFileEditLine className={iconClass} />;
+        return <Icon name="file-edit" className={iconClass} />;
     }
     if (tool === 'read' || tool === 'view' || tool === 'file_read' || tool === 'cat') {
-        return <RiFileTextLine className={iconClass} />;
+        return <Icon name="file-text" className={iconClass} />;
     }
     if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal') {
-        return <RiTerminalBoxLine className={iconClass} />;
+        return <Icon name="terminal-box" className={iconClass} />;
     }
     if (tool === 'list' || tool === 'ls' || tool === 'dir' || tool === 'list_files') {
-        return <RiFolder6Line className={iconClass} />;
+        return <Icon name="folder-6" className={iconClass} />;
     }
     if (tool === 'search' || tool === 'grep' || tool === 'find' || tool === 'ripgrep') {
-        return <RiMenuSearchLine className={iconClass} />;
+        return <Icon name="menu-search" className={iconClass} />;
     }
     if (tool === 'glob') {
-        return <RiFileSearchLine className={iconClass} />;
+        return <Icon name="file-search" className={iconClass} />;
     }
     if (tool === 'fetch' || tool === 'curl' || tool === 'wget' || tool === 'webfetch') {
-        return <RiGlobalLine className={iconClass} />;
+        return <Icon name="global" className={iconClass} />;
     }
     if (
         tool === 'web-search' ||
@@ -57,31 +39,31 @@ export const getToolIcon = (toolName: string) => {
         tool === 'duckduckgo' ||
         tool === 'perplexity'
     ) {
-        return <RiGlobalLine className={iconClass} />;
+        return <Icon name="global" className={iconClass} />;
     }
     if (tool === 'todowrite' || tool === 'todoread') {
-        return <RiListCheck3 className={iconClass} />;
+        return <Icon name="list-check-3" className={iconClass} />;
     }
     if (tool === 'structuredoutput' || tool === 'structured_output') {
-        return <RiListCheck2 className={iconClass} />;
+        return <Icon name="list-check-2" className={iconClass} />;
     }
     if (tool === 'skill') {
-        return <RiBookLine className={iconClass} />;
+        return <Icon name="book" className={iconClass} />;
     }
     if (tool === 'task') {
-        return <RiAiAgentLine className={iconClass} />;
+        return <Icon name="ai-agent" className={iconClass} />;
     }
     if (tool === 'question') {
-        return <RiSurveyLine className={iconClass} />;
+        return <Icon name="survey" className={iconClass} />;
     }
     if (tool === 'plan_enter') {
-        return <RiFileList2Line className={iconClass} />;
+        return <Icon name="file-list-2" className={iconClass} />;
     }
     if (tool === 'plan_exit') {
-        return <RiTaskLine className={iconClass} />;
+        return <Icon name="task" className={iconClass} />;
     }
     if (tool.startsWith('git')) {
-        return <RiGitBranchLine className={iconClass} />;
+        return <Icon name="git-branch" className={iconClass} />;
     }
-    return <RiToolsLine className={iconClass} />;
+    return <Icon name="tools" className={iconClass} />;
 };

packages/ui/src/components/chat/message/toolRenderers.tsx

@@ -1,9 +1,9 @@
-import { RiCheckLine } from '@remixicon/react';
 
 import { cn } from '@/lib/utils';
 import { typography } from '@/lib/typography';
 import { formatToolInput, detectToolOutputLanguage } from '@/lib/toolHelpers';
 import { SimpleMarkdownRenderer } from '../MarkdownRenderer';
+import { Icon } from "@/components/icon/Icon";
 
 const cleanOutput = (output: string) => {
     let cleaned = output.replace(/^<file>\s*\n?/, '').replace(/\n?<\/file>\s*$/, '');
@@ -473,13 +473,13 @@ export const renderTodoOutput = (
                 {todosByStatus.completed.length > 0 && (
                     <div className="space-y-2">
                         <div className="flex items-center gap-2">
-                            <RiCheckLine className="w-3 h-3" style={{ color: 'var(--status-success)' }} />
+                            <Icon name="check" className="w-3 h-3"  style={{ color: 'var(--status-success)' }}/>
                             <span className="typography-meta font-semibold uppercase tracking-wide" style={{ color: 'var(--status-success)' }}>{labels.completed}</span>
                         </div>
                         <div className="space-y-1.5 pl-4">
                             {todosByStatus.completed.map((todo, idx) => (
                                 <div key={todo.id || idx} className="flex items-start gap-2">
-                                    <RiCheckLine className="w-3 h-3 mt-0.5 flex-shrink-0" style={{ color: 'var(--status-success)', opacity: 0.7 }} />
+                                    <Icon name="check" className="w-3 h-3 mt-0.5 flex-shrink-0"  style={{ color: 'var(--status-success)', opacity: 0.7 }}/>
                                     <span className="typography-code text-foreground flex-1 leading-relaxed">{todo.content}</span>
                                 </div>
                             ))}