About icon-system
icon-system is a design skill for specifying and maintaining consistent, scalable icon collections. It covers visual foundations, naming, delivery formats, accessibility, and ongoing upkeep.
Key features
- 01Grid, sizes, and style guidance
- 02Category-based icon naming
- 03SVG, sprite, component, and Figma delivery
- 04Accessibility and touch-target guidance
- 05Auditing, contribution, and versioning
Use cases
- 01Define a shared icon system for a product
- 02Prepare icon assets for design and implementation
- 03Review icon accessibility and supported sizes
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/icon-systemin Claude Code to confirm it loaded.
Details
From the project READMEIcon 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
Comments
Markdown supported