Icon System
- 1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
icon-system is a designer-skills module that generates a complete icon system specification covering grid, sizing, naming, categories, and implementation guidance for developers building UI component libraries.
About
icon-system is an owl-listener/designer-skills skill that produces icon system specs before any UI component library work begins. The skill defines a 24x24px base grid with keylines, stroke width, and corner radius; five size tiers from XS (12–16px) through XL (48px+); and naming as icon-[category]-[name]-[variant] across 8 categories including action, navigation, content, communication, social, status, file, and device. Delivery covers SVG source, sprite sheets, and React or Vue wrapper guidance with stroke, filled, and duotone style rules. Developers reach for icon-system when bootstrapping a design system or auditing inconsistent icon usage across a product surface.
- Creates full icon system specification covering grid, sizing, naming, categories and implementation guidance
- Defines 8 standardized categories: action, navigation, content, communication, social, status, file, device
- Specifies 5 size tiers from XS (12-16px) through XL (48px+)
- Includes stroke, filled and duotone style usage rules
- Delivers SVG source, sprite sheets, component wrappers and Figma library guidance
Icon System by the numbers
- 1,021 all-time installs (skills.sh)
- +49 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #380 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill icon-systemAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you design a scalable icon system spec?
Generate a complete, consistent icon system specification before building any UI component library.
Who is it for?
Frontend developers and designers starting a component library who need a consistent icon taxonomy before implementation.
Skip if: Teams needing one-off illustrative graphics or marketing illustrations instead of a reusable UI icon system.
When should I use this skill?
User asks for icon system specs, icon naming conventions, SVG sprite setup, or design-system icon grids.
What you get
Icon grid spec, size scale, naming convention doc, category taxonomy, and SVG or sprite implementation guide.
- icon system spec
- SVG sources
- sprite sheet guide
By the numbers
- 24x24px base grid with 5 defined size tiers
- 8 icon categories in naming taxonomy
Files
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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What grid does icon-system use?
icon-system uses a 24x24px base grid with defined keylines, stroke width, and corner radius. Size tiers span XS (12–16px), S (20px), M (24px), L (32px), and XL (48px+) for scalable UI coverage.
How does icon-system name icons?
icon-system names icons as icon-[category]-[name]-[variant] across 8 categories: action, navigation, content, communication, social, status, file, and device. The convention supports stroke, filled, and duotone variants.
Is Icon System safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.