Iconography: AI Skill for UX Design

Iconography is an AI skill that picks icons users recognize on sight: universal metaphors, one consistent style, and labels where meaning isn't obvious. No more ambiguous icon-only buttons.

npx skills add Uxcel-Lab/product-skills --skill ux-iconography

Copied

What this skill does

Helps an AI assistant choose icons that users read instantly rather than decorative glyphs they have to decode.

Checks the platform, the library, and whether each icon earns its place.
Uses universal metaphors users already read, not clever substitutes.
Applies one consistent style across stroke weight, geometry, and color.
Labels ambiguous icons and gives every icon-only control an accessible name.
Keeps one icon per action across the whole product.
Simplifies glyphs so they stay legible at small sizes.
Sizes touch targets at 44pt on iOS and 48dp on Android.
Flags style, library, and state variant choices as deliberate decisions.

When to use it

Use it when you need an AI assistant to:

add or pick icons for a screen;
design a consistent icon set;
decide between filled and outlined styles;
choose between SF Symbols, Material, and custom icons;
fix mixed or ambiguous iconography;
label icons for screen readers;
size icons and touch targets for mobile.

Decisions this skill helps you make

Decision	Options
Icon style	Outlined for text-heavy UIs, filled for compact contrast; one primary style
System library or custom	Platform library first; custom icons that match its stroke and grid
Label or icon-only	Icon plus label when in doubt; always an accessible name
Filled and outlined for state	Outlined as default, filled as selected; never for decoration
Rendering mode	Monochrome for interface controls; richer modes for semantic icons
Container & grid	Consistent frames with trim and padding, aligned to an icon grid
Library structure	Consistent naming, tags, and component structure in design systems