Create and review icons for VS Code extensions, webviews, and shared icon registries.
npx skills add https://github.com/Kilo-Org/kilocode --skill icon-vscode
Please help me install this Agent Skill. Skill: icon-vscode Source: https://github.com/Kilo-Org/kilocode/tree/main/.kilo/skills/icon-vscode Command: npx skills add https://github.com/Kilo-Org/kilocode --skill icon-vscode
Icon work in a VS Code extension spans multiple surfaces—command contributions, activity bar containers, webview UI, and packaged brand assets—each with different geometry, theming, and registration rules. This Skill prevents mismatched canvases, clipped strokes, wrong registries, and accessibility gaps when creating or reviewing icons.
Icon/IconButton registry for webviews, or WOFF2 product-icon fonts.currentColor usage, and static SVG geometry without gradients, filters, or embedded fonts.packages/kilo-ui vs packages/ui), how to expose them via stories, and how to verify rendering at 1x/2x across light, dark, and high-contrast themes.currentColor, and verify it in a Storybook story across themes.Ask the agent to create a new webview icon for a specific action and register it in the Kilo icon component following the existing sibling conventions.
High-intent search queries and answers about installing and using this skill.
Add the icon as an inline SVG path entry in the icon registry, using currentColor for all painted shapes and matching the viewBox of the closest sibling. Register Kilo-only icons in packages/kilo-ui/src/components/icon.tsx and consume them through the Icon or IconButton component.
Use a Codicon for VS Code commands, menus, and editor actions whenever an appropriate one exists, since VS Code themes them automatically. Only create a custom 16x16 single-color SVG when no suitable Codicon or existing registry icon covers the meaning.
Command contribution icons use a 16x16 canvas with 1px padding in a single color. Activity bar and view container icons follow the VS Code convention of a centered 24x24 single-color design.
No. Registry icons must use static SVG geometry such as path, rect, circle, and line elements only. Gradients, filters, raster images, embedded fonts, and style blocks are not allowed; apply semantic colors through the component or CSS tokens instead.
Clipping usually comes from round-capped endpoints placed at the canvas edge or from pasting a path onto a different viewBox without rescaling. Match the closest sibling's bounds, stroke weight, caps, and joins, and verify rendering at 1x and 2x in all theme variants.
mParticleRegister new mParticle SVG icons into the Aquarium library with synchronized updates.
qdhenryCreate Foundry platform UI components with Storybook stories and Untitled UI icons.
japurcellIdentify and fix accessibility issues in UI components to meet WCAG guidelines.
gitkrakenAdd SVG icons to the GitLens GL Icons font and update mappings.