# Icon Vscode

Create or review icons for Kilo's VS Code extension, webviews, and shared icon registry.

- Repository: https://github.com/Kilo-Org/kilocode (27829 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kilo-Org/kilocode --skill icon-vscode -g -a claude-code -y`
Codex: `npx skills add Kilo-Org/kilocode --skill icon-vscode -g -a codex -y`
Cursor: `npx skills add Kilo-Org/kilocode --skill icon-vscode -g -a cursor -y`
Gemini CLI: `npx skills add Kilo-Org/kilocode --skill icon-vscode -g -a gemini-cli -y`

## Description

Create or review icons for Kilo's VS Code extension, webviews, and shared icon registry.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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](https://code.visualstudio.com/api/references/contribution-points#contributes.commands) 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

The rest: https://github.com/Kilo-Org/kilocode/blob/HEAD/.kilo/skills/icon-vscode/SKILL.md