skill CX Codex

icon-system — Claude Code skill: what it does, how to install

Q: How to install icon-system in Claude Code?

Run `npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-code`. Alternatively, place the file directly at `~/.claude/skills/icon-system/SKILL.md`.

Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. Ideal for standardising iconography in design systems.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-code

Open on GitHub

What icon-system does

The skill instructs the agent to create specifications for iconography. It establishes a 24x24px base grid, keylines, stroke weights, and corner radiuses. Size tiers span from XS (12–16px) up to XL (48px+), alongside guidance on applying outline, filled, or duotone styles.

Naming follows a strict pattern: icon-[category]-[name]-[variant]. Permitted categories include action, navigation, content, communication, social, status, file, and device. Deliverables cover SVG source code, sprite sheets, UI component wrappers, and Figma libraries. Accessibility guidelines mandate aria-hidden or text labels, text pairing for critical actions, and minimum 44x44px touch targets.

This skill focuses strictly on iconography. Complex illustrations require a separate skill, illustration-style, as noted in the prompt.

What it helps with

standardise UI icon sizing across XS to XL tiers
enforce consistent SVG file naming with category prefixes
verify icon accessibility and 44x44px touch target compliance
organise delivery formats across SVG sprites, wrappers, and Figma

Example prompts for the agent

Create an icon system spec based on a 24x24px grid
Name our navigation and action icons following the icon-[category]-[name]-[variant] convention
List accessibility requirements and touch target minimums for our icon set

How to install icon-system

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-code

2Manually: put the files in place

~/.claude/skills/icon-system/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/icon-system/

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill icon-system -a codex

2Manually: put the files in place

.agents/skills/icon-system/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill icon-system -a cursor

2Manually: put the files in place

.cursor/skills/icon-system/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install Owl-Listener/designer-skills icon-system

2Manually: put the files in place

.github/skills/icon-system/SKILL.md

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill icon-system -a gemini-cli

2Platform CLI

gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/icon-system

Manually: put the files in place

.devin/skills/icon-system/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill icon-system -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about icon-system

How to install icon-system in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-code. Alternatively, place the file directly at ~/.claude/skills/icon-system/SKILL.md.

What does the icon-system skill do?

It generates technical specifications for UI icons, including base grids, stroke styles, size ladders, naming schemas, and accessibility rules.

Can icon-system be used for large illustrations?

No, it is built specifically for UI icons. For broader illustrations, the author specifies using illustration-style instead.

Source text

SKILL.md · MIT

---
name: icon-system
description: Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use `illustration-style` (ui-design).
---
# 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

Similar skills

Everything for Design →

design-system-patterns Seth Hobson Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project. CX Codex 15,953installs figma-create-design-system-rules official openai Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository. CX Codex +1 2,900installs ui-design-system Alireza Rezvani This skill builds design tokens, component structures, and responsive calculations. Use it when a project needs a consistent UI system or a developer handoff. 1,076installs design-system rampstackco Builds or audits a design system: tokens, component library, naming conventions, contribution model and docs. Useful when products drift apart visually. CX Codex +1 310installs design-system-rules-agent official Figma A subagent that turns your codebase conventions into Figma-to-code rules and writes them into AGENTS.md, so later implementations stay consistent. CX Codex GP ChatGPT ★ 7,596repo stars icon-set-generator jezweb Draws a set of SVG icons for one project: same grid, same stroke, same corners. Useful when a site needs its own icons instead of a stock library. CX Codex +1 1,900installs

From the same set109

illustration-style Define an illustration style guide covering visual language, colour usage, and component placement rules. Useful when standardising graphics or commissioning art. CX Codex +1 2,500installs visual-hierarchy This skill sets the order in which interface elements attract attention through size, weight, colour, spacing, and position. Use it when composing new screens. CX Codex +1 2,500installs data-visualization Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. CX Codex +1 2,400installs layout-grid This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. Handy when you are setting up page structure from scratch. CX Codex +1 2,400installs user-flow-diagram Draws screen-level flow diagrams with entry points, decision branches and error paths. Useful when a feature needs step-by-step specs. CX Codex +1 2,400installs dark-mode-design This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. Use it when the light tokens already exist. CX Codex +1 2,400installs responsive-design A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods. CX Codex +1 2,300installs spacing-system Builds a systematic spacing scale from a 4px or 8px base unit with rules for padding and margins. Useful when cleaning up inconsistent layout values. CX Codex +1 2,300installs