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.
illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
interview-script
Create a structured user interview script with warm-up, core exploration, and wrap-up sections. Use when preparing for user research interviews to ensure consistent, insightful conversations.
jobs-to-be-done
Map user Jobs-to-Be-Done with functional, emotional, and social dimensions plus outcome expectations. Use when reframing product decisions around user motivations rather than features.
journey-map
Create an end-to-end user journey map with stages, touchpoints, emotions, pain points, and opportunity areas. Use when mapping the full user experience for a product, feature, or service.
layout-grid
Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.
loading-states
Design loading, skeleton, and progressive content reveal patterns.