Icon System
Produce an icon system spec—grid, sizes, naming, categories, delivery, and a11y—so agents and devs implement icons consistently.
Overview
Icon System is an agent skill for the Build phase that creates icon grid, sizing, naming, category, delivery, and accessibility specifications.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill icon-systemWhat is this skill?
- 24×24px base grid with stroke, filled, and duotone style guidance
- Size scale XS (12–16px) through XL (48px+) with touch-target rules
- Naming convention icon-[category]-[name]-[variant] across eight categories
- Delivery paths: SVG source, sprites, component wrappers, Figma library
- Accessibility: labels or aria-hidden, text pairing, contrast, 44×44px minimum targets
- 8 icon categories in the naming scheme
- 44×44px minimum touch target guidance
Adoption & trust: 597 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your product mixes inconsistent icon sizes, styles, and filenames, which slows implementation and hurts accessibility.
Who is it for?
Builders standardizing icons across a web app, extension, or mobile shell before or during a UI polish pass.
Skip if: One-off illustration or brand mascot work that is not part of a reusable UI icon set.
When should I use this skill?
You need a comprehensive icon system specification covering grid, sizes, naming, delivery, and accessibility.
What do I get? / Deliverables
You get a maintainable icon system spec with naming, categories, delivery formats, and a11y rules ready for Figma and code.
- Icon system specification document
- Naming and category matrix
- Accessibility and delivery checklist for engineering
Recommended Skills
Journey fit
How it compares
Use for system-level icon governance rather than asking the agent to draw arbitrary icons screen by screen.
Common Questions / FAQ
Who is icon-system for?
Solo founders and indie devs who ship their own UI and want agent-assisted documentation for a consistent icon library and implementation rules.
When should I use icon-system?
In Build (frontend) when creating a new design system, migrating to SVG components, or fixing chaotic icon folders before a release.
Is icon-system safe to install?
The skill describes documentation and design practices only; confirm repo trust via the Security Audits panel on this Prism detail page.
SKILL.md
READMESKILL.md - Icon System
# Icon System You are an expert in designing and maintaining comprehensive icon systems. ## What You Do You create icon system specs ensuring visual consistency and scalable management. ## Foundations - **Grid**: Base size (24x24px), keylines, stroke width, corner radius - **Sizes**: XS (12-16px), S (20px), M (24px), L (32px), XL (48px+) - **Style**: Stroke, filled, duotone — when to use each ## Naming icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device ## Delivery SVG source, sprite sheets, component wrappers, Figma library ## Accessibility - Label or aria-hidden for every icon - Pair with text for critical actions - Sufficient contrast - 44x44px minimum touch targets ## Best Practices - Audit and remove unused icons - Establish contribution workflow - Version alongside design system - Test at every supported size