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

responsive-design

No summary provided by upstream source.

Repository SourceNeeds Review
31-owl-listener
General

summarize-interview

No summary provided by upstream source.

Repository SourceNeeds Review
29-owl-listener
General

component-spec

No summary provided by upstream source.

Repository SourceNeeds Review
28-owl-listener
General

user-flow-diagram

No summary provided by upstream source.

Repository SourceNeeds Review
27-owl-listener