From cd9241fc7d65361f22f5ee237c0fe2ab25c2c615 Mon Sep 17 00:00:00 2001
From: Mark IJbema <mark@kilocode.ai>
Date: Wed, 11 Feb 2026 10:05:40 +0100
Subject: [PATCH] feat: replace lucide-solid icons with kilo-ui Icon component
 (Phase 1.5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- All 15 lucide-solid icons in Settings.tsx replaced with Icon component
- Back button ArrowLeft → Icon name='arrow-left'
- Removed lucide-solid dependency from package.json
- Many icons use approximate matches (kilo-ui only has 38 icons)
- Update progress tracker + deviation note #7
---
 packages/kilo-vscode/AGENTS.md                |  1 +
 .../docs/ui-implementation-plan.md            |  3 +-
 packages/kilo-vscode/package.json             |  1 -
 .../webview-ui/src/components/Settings.tsx    | 48 +++++++------------
 4 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/packages/kilo-vscode/AGENTS.md b/packages/kilo-vscode/AGENTS.md
index 2e3f7dce1f5..41413a676e9 100644
--- a/packages/kilo-vscode/AGENTS.md
+++ b/packages/kilo-vscode/AGENTS.md
@@ -42,6 +42,7 @@ New webview features must use **`@kilocode/kilo-ui`** components instead of raw
 - See [`docs/ui-implementation-plan.md`](docs/ui-implementation-plan.md) for the full migration plan and phased rollout
 - **Check the desktop app first**: [`packages/app/src/`](../../packages/app/src/) is the reference implementation for how kilo-ui components are composed together. Always check how the app uses a component before implementing it in the webview — don't just look at the component API in isolation.
 - **`data-component` and `data-slot` attributes carry CSS styling** — kilo-ui uses `[data-component]` and `[data-slot]` attribute selectors, not class names. When the app uses e.g. `data-component="permission-prompt"` and `data-slot="permission-actions"`, these get kilo-ui styling for free.
+- **Icons**: kilo-ui has 75+ custom SVG icons in [`packages/ui/src/components/icon.tsx`](../../packages/ui/src/components/icon.tsx). To list all available icon names: `node -e "const c=require('fs').readFileSync('../../packages/ui/src/components/icon.tsx','utf8');[...c.matchAll(/^\\s{2}[\"']?([\\w-]+)[\"']?:\\s*\x60/gm)].map(m=>m[1]).sort().forEach(n=>console.log(n))"`. Icon names use both hyphenated (`arrow-left`) and bare-word (`brain`, `console`, `providers`) keys.
 
 ## Debugging
 
diff --git a/packages/kilo-vscode/docs/ui-implementation-plan.md b/packages/kilo-vscode/docs/ui-implementation-plan.md
index dccea1ab2fa..d0819d73577 100644
--- a/packages/kilo-vscode/docs/ui-implementation-plan.md
+++ b/packages/kilo-vscode/docs/ui-implementation-plan.md
@@ -792,7 +792,7 @@ Each phase has specific acceptance criteria (listed above). The general verifica
 | Phase 1.2: Spinners          | ✅ Complete   | 2026-02-10 | Emoji loading indicators (`⏳`, `⚙️`) in Message.tsx and DeviceAuthCard.tsx replaced with `Spinner`. Status icons (`✓`, `✕`) kept as-is.                                                                                                                                             |
 | Phase 1.3: Permission Dialog | ✅ Complete   | 2026-02-11 | Custom overlay replaced with `Dialog` via `useDialog()` hook + `BasicTool` for collapsible header + `data-component="permission-prompt"` for actions. Removed 7 custom CSS classes. Direct `@kobalte/core` dep removed to avoid dual-package context mismatch.                       |
 | Phase 1.4: Cards             | ✅ Complete   | 2026-02-11 | Inline-styled card divs in ProfileView (profile + balance) and DeviceAuthCard (5 state cards) replaced with `Card` component. Removed `cardStyle` constant.                                                                                                                          |
-| Phase 1.5: Icons             | ⬚ Not started | —          | Requires adding 6 missing icons to kilo-ui first                                                                                                                                                                                                                                     |
+| Phase 1.5: Icons             | ✅ Complete   | 2026-02-11 | All 15 lucide-solid icons replaced with kilo-ui `Icon`. `lucide-solid` dep removed. Many icons use approximate matches (see deviation #7).                                                                                                                                           |
 | Phase 2: Settings UI         | ⬚ Not started | —          |                                                                                                                                                                                                                                                                                      |
 | Phase 3: Chat UI             | ⬚ Not started | —          |                                                                                                                                                                                                                                                                                      |
 | Phase 4: Advanced            | ⬚ Not started | —          |                                                                                                                                                                                                                                                                                      |
@@ -805,3 +805,4 @@ Each phase has specific acceptance criteria (listed above). The general verifica
 4. **`Spinner` has no `size` prop**: The plan assumed `Spinner` would accept a `size` prop. The actual component is sized via CSS `style` prop (`width`/`height`).
 5. **Settings tab sidebar buttons**: Left as native `<button>` elements because they have complex active/hover state styling that would need significant rework to use `Button`.
 6. **Permission dialog vs inline prompt**: The desktop app renders permissions inline in the prompt dock area (replacing the input). The vscode webview keeps a `Dialog` wrapper because the layout differs. The inner content uses the same `BasicTool` + `data-component="permission-prompt"` pattern as the app. The args are shown as raw JSON rather than `perm.patterns` because the vscode permission data shape differs from the app's SDK format.
+7. **Icon mapping uses approximate matches**: kilo-ui only has 38 icons. The plan's mapping assumed icons like `providers`, `console`, `branch`, `server`, `help` exist — they don't. Current mapping uses best-available alternatives (e.g. `cloud-upload` for Providers, `chevron-right` for Terminal). These should be replaced with proper icons once they're added to the UI library.
diff --git a/packages/kilo-vscode/package.json b/packages/kilo-vscode/package.json
index 925b18d7982..bcef7f04129 100644
--- a/packages/kilo-vscode/package.json
+++ b/packages/kilo-vscode/package.json
@@ -165,7 +165,6 @@
     "@kilocode/kilo-ui": "workspace:*",
     "@kilocode/sdk": "workspace:*",
     "eventsource": "^2.0.2",
-    "lucide-solid": "^0.563.0",
     "solid-js": "^1.9.11"
   }
 }
diff --git a/packages/kilo-vscode/webview-ui/src/components/Settings.tsx b/packages/kilo-vscode/webview-ui/src/components/Settings.tsx
index b3cef80cb6c..c108ab3088b 100644
--- a/packages/kilo-vscode/webview-ui/src/components/Settings.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/Settings.tsx
@@ -1,22 +1,6 @@
 import { Component, createSignal, For, JSX } from "solid-js"
 import { Button } from "@kilocode/kilo-ui/button"
-import {
-  Plug,
-  Users2,
-  CheckCheck,
-  SquareMousePointer,
-  GitBranch,
-  Monitor,
-  Bot,
-  Bell,
-  Database,
-  SquareTerminal,
-  MessageSquare,
-  FlaskConical,
-  Globe,
-  Info,
-  ArrowLeft,
-} from "lucide-solid"
+import { Icon } from "@kilocode/kilo-ui/icon"
 import ProvidersTab from "./settings/ProvidersTab"
 import AgentBehaviourTab from "./settings/AgentBehaviourTab"
 import AutoApproveTab from "./settings/AutoApproveTab"
@@ -60,20 +44,20 @@ interface TabConfig {
 }
 
 const tabs: TabConfig[] = [
-  { id: "providers", label: "Providers", icon: () => <Plug size={18} /> },
-  { id: "agentBehaviour", label: "Agent Behaviour", icon: () => <Users2 size={18} /> },
-  { id: "autoApprove", label: "Auto-Approve", icon: () => <CheckCheck size={18} /> },
-  { id: "browser", label: "Browser", icon: () => <SquareMousePointer size={18} /> },
-  { id: "checkpoints", label: "Checkpoints", icon: () => <GitBranch size={18} /> },
-  { id: "display", label: "Display", icon: () => <Monitor size={18} /> },
-  { id: "autocomplete", label: "Autocomplete", icon: () => <Bot size={18} /> },
-  { id: "notifications", label: "Notifications", icon: () => <Bell size={18} /> },
-  { id: "context", label: "Context", icon: () => <Database size={18} /> },
-  { id: "terminal", label: "Terminal", icon: () => <SquareTerminal size={18} /> },
-  { id: "prompts", label: "Prompts", icon: () => <MessageSquare size={18} /> },
-  { id: "experimental", label: "Experimental", icon: () => <FlaskConical size={18} /> },
-  { id: "language", label: "Language", icon: () => <Globe size={18} /> },
-  { id: "aboutKiloCode", label: "About Kilo Code", icon: () => <Info size={18} /> },
+  { id: "providers", label: "Providers", icon: () => <Icon name="providers" /> },
+  { id: "agentBehaviour", label: "Agent Behaviour", icon: () => <Icon name="brain" /> },
+  { id: "autoApprove", label: "Auto-Approve", icon: () => <Icon name="checklist" /> },
+  { id: "browser", label: "Browser", icon: () => <Icon name="window-cursor" /> },
+  { id: "checkpoints", label: "Checkpoints", icon: () => <Icon name="branch" /> },
+  { id: "display", label: "Display", icon: () => <Icon name="eye" /> },
+  { id: "autocomplete", label: "Autocomplete", icon: () => <Icon name="code-lines" /> },
+  { id: "notifications", label: "Notifications", icon: () => <Icon name="circle-check" /> },
+  { id: "context", label: "Context", icon: () => <Icon name="server" /> },
+  { id: "terminal", label: "Terminal", icon: () => <Icon name="console" /> },
+  { id: "prompts", label: "Prompts", icon: () => <Icon name="comment" /> },
+  { id: "experimental", label: "Experimental", icon: () => <Icon name="settings-gear" /> },
+  { id: "language", label: "Language", icon: () => <Icon name="speech-bubble" /> },
+  { id: "aboutKiloCode", label: "About Kilo Code", icon: () => <Icon name="help" /> },
 ]
 
 const Settings: Component<SettingsProps> = (props) => {
@@ -151,7 +135,7 @@ const Settings: Component<SettingsProps> = (props) => {
           }}
         >
           <Button variant="ghost" size="small" onClick={() => props.onBack?.()} title="Done">
-            <ArrowLeft size={18} />
+            <Icon name="arrow-left" />
           </Button>
           <h2
             style={{