icon-system

designowl-listener2K installs

Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use `illustration-style` (ui-design).

Install

npx skills add https://github.com/owl-listener/designer-skills --skill icon-system

SKILL.md

---name: icon-systemdescription: 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

frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography hyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.