icon-system
owl-listener/designer-skills
Design and standardize icon systems with grid, sizing, naming, and implementation specs.
What is icon-system?
Expert guidance for creating comprehensive, scalable icon systems. Use this skill when establishing visual consistency across iconography, defining grid foundations, sizing tiers, stroke weights, naming conventions, and delivery formats. For broader illustration work, use illustration-style instead.
- Define grid foundations (base size, keylines, stroke width, corner radius)
- Establish sizing tiers (XS through XL) with appropriate use cases
- Specify style variants (stroke, filled, duotone) and when to apply each
- Create naming conventions (category-based structure) and icon categories
- Generate deliverables (SVG source, sprite sheets, component wrappers, Figma libraries)
- Ensure accessibility compliance (labels, contrast, touch targets, pairing with text)
How to install icon-system
npx skills add https://github.com/owl-listener/designer-skills --skill icon-systemHow to use icon-system
- 1.Define your base grid size and keylines (typically 24x24px)
- 2.Establish sizing tiers for your use cases (XS, S, M, L, XL)
- 3.Choose style variants (stroke, filled, duotone) and document when each applies
- 4.Create your naming convention using the category-based structure
- 5.Audit existing icons and organize into defined categories
- 6.Set up delivery formats (SVG, sprite sheets, component wrappers, Figma library)
- 7.Document accessibility requirements (labels, contrast, touch targets)
- 8.Establish a contribution workflow and versioning strategy
Use cases
- Standardizing iconography across a new design system
- Auditing and reorganizing existing icon libraries for consistency
- Defining icon sizing and stroke weight rules for responsive interfaces
- Creating contribution workflows and versioning strategies for icon maintenance
- Establishing naming conventions to reduce confusion in large icon sets
- Design system managers
- UI/UX designers
- Product designers building scalable systems
- Design leads standardizing team workflows
- Frontend developers implementing icon systems
icon-system FAQ
icon-system focuses on standardizing reusable icons with grids, sizing, naming, and scalable management. illustration-style is for broader illustration work and visual storytelling.
24x24px is the standard foundation, with keylines and stroke width defined relative to that base.
Define explicit sizing tiers (XS 12-16px, S 20px, M 24px, L 32px, XL 48px+) and test each icon at every supported size.
Every icon needs a label or aria-hidden attribute, critical actions must pair with text, maintain sufficient contrast, and ensure 44x44px minimum touch targets.
SVG source files, sprite sheets, component wrappers, and a Figma library, with clear versioning alongside your design system.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: icon-system
description: Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use illustration-style (ui-design).
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 visual language, colour usage, and application rules for consistent illustrations across your product.
information-architecture
Design content structure, hierarchy, labeling, and navigation models to help users find information and understand their location.
interview-script
Generate structured interview scripts with warm-up, core exploration, and wrap-up sections for user research.
jobs-to-be-done
Map functional, emotional, and social jobs to uncover deeper user motivations beyond features.
journey-map
Map a persona's end-to-end experience across stages, touchpoints, emotions, and pain points.
law-of-common-region
Apply visual boundaries and containers to group elements clearly, regardless of spacing.