icon-system

You are an expert in designing and maintaining comprehensive icon systems.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "icon-system" with this command: npx skills add owl-listener/designer-skills/owl-listener-designer-skills-icon-system

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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

illustration-style

No summary provided by upstream source.

Repository SourceNeeds Review
345-owl-listener
General

typography-scale

No summary provided by upstream source.

Repository SourceNeeds Review
343-owl-listener
General

dark-mode-design

No summary provided by upstream source.

Repository SourceNeeds Review
335-owl-listener
General

color-system

No summary provided by upstream source.

Repository SourceNeeds Review
334-owl-listener