# Annotated New UI Icon Examples Each example below is paired with a dark variant and a short note on the pattern it represents. Use these as templates when generating new icons. Place generated icons in `packages/kilo-jetbrains/frontend/src/main/resources/icons/` (or the `icons/views/` subfolder for in-view chat/session icons). --- ## 1. Single-color action (16×16) — primary gray stroke + filled glyph Plus / add action — the most common action icon shape. **Light:** ```svg ``` **Dark:** swap `#6C707E` → `#CED0D6`. Why it works: one filled path, primary gray. Drop in any glyph and you have a complete action icon. --- ## 2. Two-tone action (16×16) — neutral base + blue accent modifier Add-file action — base glyph in neutral gray, "+" sticker in primary blue. **Light:** ```svg ``` **Dark:** `#3574F0` → `#548AF7`, `#6C707E` → `#CED0D6`. Pattern: stick the small modifier glyph in the bottom-right of the canvas (`(9..15, 9..15)` for 16×16) and let the base glyph occupy the top-left two-thirds. --- ## 3. Stroke-only action (16×16) — chevrons, refresh, edit Refresh action — multiple stroked sub-paths sharing one color. **Light:** ```svg ``` `stroke-width` defaults to `1`. `stroke-linecap="round"` softens path ends; pair it with `stroke-linejoin="round"` whenever paths bend. For secondary glyphs (chevrons in popups, dropdown arrows) use `#818594` light / `#6F737A` dark instead of the primary gray. --- ## 4. Node icon (16×16) — tinted circle with stroke + glyph Class / method nodes — the canonical PSI-node shape. **Light (class — blue):** ```svg ``` **Dark (class):** ```svg ``` **Method (red) follows the same template** with `#FFF7F7`/`#DB3B4B` (light) → `#402929`/`#DB5C5C` (dark). Rules: - Circle is always `cx="8" cy="8" r="6.5"` (so the 1-px stroke is centered between pixels 1 and 15). - Fill = soft background pair, stroke = accent. - Glyph inside uses the same accent color filled — never stroked. --- ## 5. Status badge (16×16) — circle/triangle with white glyph Error badge: ```svg ``` The warning badge is the same idea but with a rounded triangle filled `#FFAF0F` (light) / `#F2C55C` (dark). In the dark theme, the glyph inside the warning triangle uses `#5E4D33` instead of `white` (white on warm yellow is unreadable). The success badge uses a 2-px stroked checkmark inside a `#55A76A` (light) / `#57965C` (dark) circle — `stroke="white"` and `stroke-width="2"`. --- ## 6. Tool window stripe (20×20) — single-tone glyph on a larger canvas Build tool-window stripe: ```svg ``` Notes: - 20×20 canvas with **at least 2 px** breathing room on each edge (geometry lives in `2..18`). - Re-balance vs. a 16×16 sibling — do not just paste a 16×16 path into a 20×20 viewBox. - Keep a 16×16 sibling (`name.svg`) for compact mode; the `@20x20` variant is used by default. --- ## 7. Main toolbar action (20×20) — same template as tool window Add action (20×20): ```svg ``` Main-toolbar icons reuse the 20×20 conventions of tool window stripes — the canvas size and stroke weights are identical, only the visual semantics differ. --- ## 8. Gutter icon (14×14) — thin stroke, no padding Edit-doc gutter mark: ```svg ``` Gutter icons: - Canvas is 14×14 (not 16×16). Glyph extends to the edge — there is *no* outer padding margin in the gutter. - Prefer `stroke-miterlimit="10"` for hard-pointed glyphs (pencil tip), `stroke-linecap="round"` for chevrons / arrows. - Compound gutter glyphs (e.g. implemented + override marker) layer two badges; keep each badge ≤ 9 px so the composition stays legible. --- ## 9. Breakpoint mark (14×14) — solid filled circle Breakpoint mark: ```svg ``` Breakpoint marks read at a glance — a single solid fill in the status-error red. Variants (disabled, conditional, log) layer a small overlay in the bottom-right corner. --- ## 10. Dark-variant gotcha — white-on-warm vs. muted-dark The warning badge dark variant shows the only common case where a literal find-and-replace from the light SVG would produce a broken icon: ```svg ``` `white` → `#5E4D33` inside the warning triangle. Apply the same swap whenever a light icon paints a glyph as `white` over a warm fill (`#FFAF0F`, `#E66D17`, etc.). For cool fills (`#3574F0`, `#208A3C`, `#DB3B4B`), the dark-theme glyph stays `white` because contrast is still sufficient.