Login
owl-listener/designer-skills1 file

Icon System

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

Use this skillView repositoryView on skills.sh
Specification
Skill ID
owl-listener/designer-skills/icon-system
Publisher
owl-listener
Repository
designer-skills
Installs
0
Files
1
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

owl-listener/designer-skills/icon-systemInstalls these files
  • SKILL.md

What this skill tells the agent

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

More from owl-listener

owl-listener/designer-skills

A B Test Design

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

owl-listener/designer-skills

Accessibility Audit

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

owl-listener/designer-skills

Accessibility Test Plan

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

Use this skill in a project

Open any RiverX project, search the Skills panel for owl-listener/designer-skills/icon-system, and install it in one click.

Use this skill