What is the icon-system skill?
The icon-system skill is a SKILL.md in the design-systems plugin of Owl-Listener's designer-skills repository. It tells an AI coding agent to specify an icon system: a 24 by 24 pixel base grid, size steps, stroke or filled styles, a naming scheme, delivery formats and accessibility rules.
The icon-system skill belongs to the design-systems plugin of Owl-Listener's designer-skills repository. Its SKILL.md frames the agent as an expert in designing and maintaining icon systems, with the goal of visual consistency and scalable management.
The description limits scope to standardising iconography. Broader illustration work is handed to illustration-style in the ui-design plugin, so this skill never drifts into artwork.
The foundations it fixes
- Grid: a 24 by 24 pixel base, with keylines, stroke width and corner radius defined.
- Sizes: XS at 12 to 16px, S at 20px, M at 24px, L at 32px and XL at 48px and above.
- Style: stroke, filled or duotone, with guidance on when each applies.
Naming and delivery
Icons follow the pattern icon-[category]-[name]-[variant]. Categories are action, navigation, content, communication, social, status, file and device. Delivery covers SVG source, sprite sheets, component wrappers and a Figma library.
Who the icon-system skill is for
Best for
- Teams whose icons come from several packs and no longer match in weight or size.
- Setting naming and folder conventions so developers can find an icon without asking.
- Documenting iconography next to tokens. Related: tailwind-design-system and uiux-design-system.
Not for
- Drawing the icons themselves. The skill writes the specification, not the SVG artwork.
- Illustration and brand imagery, which the file routes to a different skill.
- Extracting an existing system from a live site. Related: extract-design-system.
Use it with UiChemy
A defined icon set keeps a converted page consistent. When a design reaches WordPress through UiChemy, Figma to WordPress carries the Figma file across, and Composer lets you adjust icons visually in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Icon System Skill: Grid, Sizes, Naming and Delivery
/plugin marketplace add Owl-Listener/designer-skills
/plugin install design-systems@designer-skillsAdd the marketplace
Run
/plugin marketplace add Owl-Listener/designer-skillsinside Claude Code. The README says this step only tells the agent where the skills live and installs nothing yet.Install the design-systems plugin
Run
/plugin install design-systems@designer-skills. The icon-system skill ships inside this plugin. You can also type/plugin, open the Discover tab, tick the plugin and press enter.Using Gemini CLI instead
The README says each plugin is also a Gemini CLI extension. Clone the repository, create
.gemini/extensionsin your project root and copy the cloned.gemini/extensionscontents into it.Ask for the skill by task
Try a prompt such as: use icon-system to standardise the icons in this repo. Name the folder so the agent can audit what exists.
Check that it loaded
Ask the agent to write an icon system spec for a small SaaS app. It should return the 24px grid, the five sizes, the naming pattern with categories and the accessibility rules.
Key features
- 24px base gridThe foundation is a 24 by 24 pixel grid with keylines, a defined stroke width and a corner radius rule.
- Five size stepsXS from 12 to 16px, S at 20px, M at 24px, L at 32px and XL at 48px and above give every icon a named size.
- Style rulesStroke, filled and duotone styles each get guidance on when to use them, so one set does not mix styles at random.
- Naming schemeThe pattern icon-[category]-[name]-[variant] with eight categories keeps files sortable and searchable.
- Delivery formatsSVG source, sprite sheets, component wrappers and a Figma library are the listed ways to ship the set.
- Accessibility rulesEvery icon gets a label or aria-hidden, critical actions pair with text and contrast stays sufficient.
- Touch targetsA 44 by 44 pixel minimum touch target applies to interactive icons, whatever the drawn glyph size.
- Maintenance habitsAudit and remove unused icons, set a contribution workflow, version the set with the design system and test at every supported size.
Frequently asked questions
What is the icon-system skill?
It is a SKILL.md in the design-systems plugin of Owl-Listener's designer-skills repository. It guides an AI coding agent to specify an icon system covering grid, sizing, stroke weight, naming, categories and implementation, so icons stay consistent and manageable.
How do I install the icon-system skill?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install design-systems@designer-skills. The skill is part of that plugin, which also holds token, theming and governance skills. The Discover tab in /plugin offers the same route.
What icon sizes does the skill define?
XS is 12 to 16px, S is 20px, M is 24px, L is 32px and XL is 48px and above, built on a 24 by 24 pixel base grid. Adjust the steps if your product needs different ones, and record the change in the spec.
How does the skill name icons?
It uses icon-[category]-[name]-[variant]. The listed categories are action, navigation, content, communication, social, status, file and device. A consistent pattern lets developers and designers search for icons without browsing a whole library.
Does it generate the icon artwork?
No. The skill specifies the system: grid, sizes, style, naming, delivery and accessibility. Producing the SVG shapes is separate work. It also hands broader illustration to illustration-style in the ui-design plugin.
Which AI coding agents can use the skill?
The README says the collection is for Claude Code and Gemini CLI, with each plugin also packaged as a Gemini CLI extension. Other agents are not mentioned, so their support is unconfirmed.
What license does the skill use?
GitHub lists the repository as MIT licensed. The icon-system folder sits inside the design-systems plugin of that repository, so the same license applies. Check the license in the repository itself before redistributing the folder.