icon-vscode
Installation
SKILL.md
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.