About icon-system
A design skill for specifying and maintaining consistent, scalable icon systems. It covers visual foundations, naming, delivery formats, accessibility, and ongoing library maintenance.
Key features
- 01Grid, sizes, and style specifications
- 02Consistent icon naming scheme
- 03SVG, sprites, components, and Figma delivery
- 04Accessibility labels and contrast guidance
- 05Audits and contribution workflow
Use cases
- 01Define visual rules for an icon library
- 02Prepare icons for product and design tools
- 03Review unused icons and manage updates
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