skills.rest
Kilo-Org
Kilo-OrgOFFICIAL
Explore all skills by this author →
Website𝕏@kilocodeGitHub

icon-jetbrains

Create and review IntelliJ New UI SVG icons with theme variants, sizes, and palette rules.

27.1k|3.1k|Updated Mar 10, 2025
Search Tags:#plugin#svg#jetbrains#dark theme#intellij#icon design#Color palette
One-click install
npx skills add https://github.com/Kilo-Org/kilocode --skill icon-jetbrains
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-jetbrains
Source: https://github.com/Kilo-Org/kilocode/tree/main/.kilo/skills/icon-jetbrains
Command: npx skills add https://github.com/Kilo-Org/kilocode --skill icon-jetbrains

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Authoring SVG icons for the JetBrains plugin requires strict adherence to IntelliJ New UI conventions: fixed canvas sizes per role, a canonical light/dark color palette, and paired light/dark files with identical geometry. Without a single source of truth, icons end up off-palette, mis-sized, or invisible in dark themes.

Core Features & Use Cases

  • Icon authoring rules: Enforces canvas sizes per role (16×16 actions, 20×20 tool-window stripes, 14×14 gutter marks), pixel-grid alignment, stroke conventions, and composition patterns like node circles and status badges.
  • Theme variant generation: Defines the mandatory light/dark SVG pair workflow, including the algorithmic hex-swap mapping and special cases like muted-dark glyphs inside warm warning fills.
  • Palette and examples references: Ships a canonical color table (palette.md) and annotated SVG templates (examples.md) for every icon role.
  • Use Case: When adding a new action icon to the Kilo Code JetBrains plugin, follow the skill to pick the 16×16 canvas, apply the #6C707E/#CED0D6 neutral pair, and produce both name.svg and name_dark.svg in the plugin's resources/icons folder.

Quick Start

Create a new 16x16 add-file action icon for the JetBrains plugin with both light and dark theme SVG variants following the New UI palette.

Frequently Asked Questions about icon-jetbrains

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an IntelliJ New UI SVG icon?▼

Pick the canvas size from the icon role (16×16 for actions, 20×20 for tool-window stripes), lay out geometry on the pixel grid, apply colors only from the canonical palette, and save with fill="none" on the root svg element. Then duplicate the file with a _dark suffix and swap each color for its dark-theme partner.

How do I make a dark theme variant of an IntelliJ SVG icon?▼

Copy the light SVG to a file with the _dark suffix and replace each light hex value with its mapped dark partner, keeping all path geometry byte-identical. Watch for white glyphs on warm fills like warning yellow, which must switch to a muted dark tone such as #5E4D33.

Why can't IntelliJ SVG icons use currentColor or CSS?▼

The IntelliJ SVG loader recolors icons by matching literal hex values, so currentColor, CSS, and style blocks do not work. Every shape must set fill or stroke explicitly with a palette hex value for theme recoloring to function.

What canvas size should a JetBrains tool window icon use?▼

Tool-window icons ship as a quartet: a 16×16 base pair (name.svg, name_dark.svg) and a 20×20 New UI stripe pair (name@20x20.svg, name@20x20_dark.svg). All four must share the same metaphor and be updated together.

Why does my icon look blurry or clipped at the edges?▼

Blurriness comes from coordinates off the pixel grid; keep fills on whole pixels and stroke centers on half-pixels. Clipping happens when round-capped strokes end at the canvas edge, since caps overshoot by half the stroke width, so keep endpoints within 0.5 to 15.5 on a 16×16 canvas.

Related Skills

Explore More Design & Creative Skills→
skydovesskydoves
472

using-stability-analyzer-ide-plugin

Install and configure the Compose Stability Analyzer plugin for IDE stability feedback.

Community
Intermediate
paul-macfarlanepaul-macfarlane

generate-icons

Generate light/dark SVG icons for Competiscore app components into public folders.

Community
Intermediate
taltal

iconifier

Generate macOS folder icons by detecting existing styles and previewing before application.

Community
Intermediate
mazin-muslehmazin-musleh
14

nds-hgi-font-update

Fetch CDN CSS, rebuild the local SCSS icon map, and update the HGI font file.

Community
Intermediate