Icon System

owl-listener/designer-skills/design-systems/skills/icon-system

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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

Instructions onlyDesign & Creative
AI-generated overview

Specifies an icon system: grid, sizing, stroke weight, naming, categories, delivery and accessibility.

What it does
This skill provides guidance for designing and maintaining a comprehensive icon system. It covers foundations such as grid, keylines, stroke width and corner radius, size scales, and icon styles, plus a naming convention with defined categories. It also outlines delivery formats and accessibility rules, and lists best practices for auditing, contribution and versioning.
When to use it
Use it when standardising iconography across a product or design system. It fits work that defines icon grids, sizes, styles, naming and accessibility rules. For broader illustration work, the document points to a separate illustration-style skill.
Requirements
No scripts or tools are required; it is instructions only.

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 and attribution

Source:owl-listener/designer-skillsindesign-systems/skills/icon-systemat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from owl-listener/designer-skills

Zeigarnik Effect

owl-listener

Applies the Zeigarnik Effect to design progress indicators, saved drafts, interruption handling and re-engagement prompts.

Design & Creative2.8Kupdated 4 weeks ago

Teslers Law

owl-listener

Applies Tesler's Law to decide whether product or user should absorb irreducible complexity in a design.

Design & Creative2.8Kupdated 4 weeks ago

Von Restorff Effect

owl-listener

Applies the Von Restorff (isolation) effect to make one key element visually distinct in a UI or layout.

Design & Creative2.8Kupdated 4 weeks ago

State Machine

owl-listener

Models UI component behavior as finite state machines with states, events, transitions, guards, and actions.

Design & Creative2.8Kupdated 4 weeks ago

Visual Hierarchy

owl-listener

Guidance for establishing visual hierarchy in interface layouts using size, weight, colour, spacing and position.

Design & Creative2.8Kupdated 4 weeks ago

Serial Position Effect

owl-listener

Applies the Serial Position Effect to order menus, lists, and step sequences so key items land where users recall them best.

Design & Creative2.8Kupdated 4 weeks ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today
Icon System · design-systems/skills/icon-system Agent Skill | SourceWeft