VS Code Icons

Use this skill for icon work in packages/kilo-vscode/, packages/kilo-ui/, and the shared packages/ui/ icon registry. Keep official VS Code workbench rules separate from Kilo's webview design system.

Choose the icon system first

Surface	Use	Source of truth	Theme handling
VS Code commands, menus, and editor actions	Codicon, for example $(add), or a 16x16 single-color SVG only when needed	packages/kilo-vscode/package.json records usages; VS Code command icons defines the contract	VS Code themes Codicons; SVGs use light/dark contribution fields
Activity bar and view containers	24x24 centered single-color icon by the VS Code convention; existing Kilo branding is an intentional asset exception	packages/kilo-vscode/package.json, packages/kilo-vscode/assets/icons/	Follow the contribution point; do not redesign the existing brand mark
Marketplace and extension branding	Packaged brand asset	packages/kilo-vscode/package.json, packages/kilo-vscode/assets/icons/	Existing Kilo assets define their own palette and variants
Webview buttons and UI	Icon or IconButton from @kilocode/kilo-ui	packages/kilo-ui/src/components/icon.tsx, then packages/ui/src/components/icon.tsx	currentColor and the VS Code theme bridge
Extension-contributed product icon	Existing WOFF2 font entry, for example $(kilo-logo)	contributes.icons in packages/kilo-vscode/package.json and its usages	VS Code product-icon theming

Do not draw a custom SVG when an appropriate Codicon or existing registry icon already exists. Do not use a webview icon directly in package.json, or a VS Code contribution icon directly in the webview.

Existing repository conventions