How to install icon-system
npx skills add https://github.com/owl-listener/designer-skills --skill icon-systemFull instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: icon-system description: Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
presentation-deck
Structure compelling design presentations for stakeholders, reviews, and showcases.
typography-scale
Create a modular typography scale with size, weight, and line-height relationships.
illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
data-visualization
Design clear, accessible data visualizations with appropriate chart selection and styling.
color-system
Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
dark-mode-design
Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.