Icon Systemby Owl-Listener

Icon System Skill.

Give icons a consistent construction and naming system instead of collecting unrelated symbols.

Design Systems
Specifications

Source Review · Icon SystemSKILL.md

Task Design Systems Produces • An icon construction and size specification • Naming categories and delivery requirements • Accessibility and contribution rules Before You Start An agent that can inspect representative icons, their intended sizes, and the required design and code formats.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Icon System: Standardize Product Iconography

Define how icons are drawn, named, delivered and used accessibly across a product.

Source-based workflowNot an execution benchmark

The Working Approach

Icon System defines the rules around a product's icon library: grid, keylines, stroke weight, corner treatment, size variants, naming, and delivery. It distinguishes stroke, filled, and duotone use rather than treating all icon styles as interchangeable.

The source also covers labels, decorative hiding, contrast, and interaction targets. Its proposed pixel sizes are reference values to adapt to the product. An icon-system specification does not mean that a complete SVG library has already been drawn or tested.

Expected Deliverables

An icon construction and size specification
Naming categories and delivery requirements
Accessibility and contribution rules

See the Example Brief

From Brief to Review

01
Set Construction Rules
Define grid, keylines, stroke, corners, and supported styles.
02
Organize the Library
Choose categories, names, variants, and required source or component formats.
03
Check Use in Context
Inspect supported sizes, labels, critical-action text, and interactive targets.

02 When to Use It

When to Use It

Use it to bring mixed icon sets into one system or document a shared library for design and development.

A Good Fit

Mixed Icon LibrariesBring inconsistent symbol families under one construction standard.
Shared Product ComponentsDefine names and wrappers that design and development can use consistently.

Limits to Check

Not a Full Illustration GuideBroader storytelling artwork belongs to illustration-style.
Not Automatic Asset CreationThe source specifies a system; actual icons and wrappers still need production.

Bring These Inputs

Current IconsSupply representative symbols and conflicts.
Usage SizesList intended display sizes and interaction contexts.
Delivery StackState SVG, sprites, component wrappers, or design-library needs.

03 Decisions That Matter

Decisions That Matter

Construction Consistency
Shared geometry rules make symbols feel related even when their subjects differ.
Meaningful Names
Category and variant names improve discoverability and maintenance.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load this task's SKILL.md from the designer-skills repository in your agent's supported skill location. No universal installer command is established by the entry file.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Supply representative icons and their usage contexts. The skill defines rules; creating and testing the actual icon assets is separate.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use icon-system to standardize our mixed navigation icons. Define grid, stroke, corner, size, and naming rules, then specify SVG and component delivery. Distinguish decorative icons from labeled actions and flag where visible text is necessary.

Inspect the Result

Check the actual output against these observable criteria.

Icons share documented construction rules.
Names distinguish category and variant.
Accessibility treatment matches each use.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: design-systems/skills/icon-system/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

Define how icons are drawn, named, delivered and used accessibly across a product.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does an icon's visual size equal its touch target?

No. The source treats display sizing and interactive target guidance as separate concerns.

Should every icon have an accessible name?

Meaningful icons need appropriate labeling; decorative ones may be hidden from assistive technology.

Does this cover hero illustrations?

No. The source routes broader illustration work to a separate skill.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills