IntelliJ Platform New UI Icons

Guidance for authoring SVG icons for the JetBrains plugin. This skill is the single source of truth for icon sizing, palette, dark variants, composition rules, and placement. Other docs (including packages/kilo-jetbrains/AGENTS.md) defer here for SVG authoring details.

Icons follow IntelliJ New UI conventions: a fixed canvas per role, a strict light/dark palette, and explicit per-shape colors (the IntelliJ SVG loader recolors by matching literal hex values, so currentColor and CSS do not work). The plugin loads icons directly from its resource folder — see Where the SVGs live.

Golden rules

1. Always ship two SVGs — one for the light theme (e.g. add-file.svg) and one for the dark theme with the _dark suffix (add-file_dark.svg). Geometry must be identical between them; only the palette swaps.
   • Tool-window icons ship as a quartet, not a pair. When a tool window has both a 16×16 base (name.svg / name_dark.svg) and a 20×20 stripe variant (name@20x20.svg / name@20x20_dark.svg), they must share the same metaphor. The stripe is only one surface — the 16×16 base also appears in Search Everywhere, Find Action, context menus, the Services tool window, recent locations, and the View ▸ Tool Windows menu. Changing only the @20x20 leaves users seeing two different icons for the same tool window depending on where they encounter it. Always update all four files together (this repo's tool-window quartet is kilo.svg / kilo_dark.svg + kilo@20x20.svg / kilo@20x20_dark.svg).
2. Only use colors from the canonical palette. See palette.md. Picking a one-off color breaks theming and contrast.
3. One canvas size per icon role. See Icon roles. Do not invent new sizes or pad with empty space — IntelliJ scales the canvas as a single unit.
4. No raster, no gradients, no filters, no embedded fonts. Path geometry only (<path>, <rect>, <circle>, <line>, <polyline>, <polygon>). Text must be converted to outlines.
5. Use fill="none" on the root <svg> and set fill / stroke explicitly per shape — never rely on CSS or currentColor.
6. Strokes use stroke-width="1", stroke-linecap="round", stroke-linejoin="round" (or stroke-miterlimit="10" for hard joins). Heavier strokes are reserved for hero glyphs inside a circle badge (e.g. status checkmarks) and use stroke-width="1.5" or "2". The 1 applies to the primary glyph stroke — do not force every stroke to 1. Hairline/decorative strokes (e.g. a thin stroke used to fatten a filled dot) and strokes whose width is coupled to geometry (e.g. a badge ring meant to sit flush with a fill edge) must keep their intended weight (scale with the artwork), or they fatten and misalign.
7. Pixel-grid align: keep stroke axes on half-pixel centers (x.5) and fills on whole pixels so the icon stays crisp at 1× rendering. Getting the base grid right also keeps it crisp on HiDPI/Retina; fine sub-pixel detail blurs at fractional scales (125%/150%), so keep geometry simple rather than chasing detail that won't survive scaling. SVGs are resolution-independent — ship one vector per theme, never @2x raster variants.
8. File names use kebab-case and stay ASCII-only (e.g. arrow-down-to-line.svg, book-open-check.svg, kilo@20x20.svg), matching every existing icon in packages/kilo-jetbrains/frontend/src/main/resources/icons/.

Icon roles