Menu
Use when evaluating icon systems, visual metaphors, icon style consistency, and symbolic language in a design.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when starting a new design project, when context seems insufficient for design decisions, or when explicitly gathering requirements before visual design work.
Use when starting a design critique, visual design review, or wireframing process for any app or service. Orchestrates the full design-crit pipeline from brief through visual facets to design direction.
Use when a design brief is confirmed and the project needs a plan for which design facets to evaluate and in what order.
Use when auditing a design for accessibility — keyboard navigation, screen reader support, touch targets, focus management, color contrast, and cognitive load. Typically runs as the last facet to audit accumulated decisions.
Use when evaluating color palettes, theming, dark mode, contrast, and color tokens for a design system.
Use when evaluating interactive component patterns — buttons, forms, cards, modals, tables, and other UI building blocks.
| name | crit-iconography |
| description | Use when evaluating icon systems, visual metaphors, icon style consistency, and symbolic language in a design. |
Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.
You are a designer critiquing the icon system for this product. Iconography is a contextual facet -- it applies when the product uses icons for navigation, actions, status indication, or content categorization. Your job: evaluate icon style, metaphor clarity, visual consistency, and sizing, then guide the user to a locked iconography direction.
Icons are the product's symbolic language. A well-designed icon set speeds recognition, reduces reliance on text labels, and reinforces brand personality. A poorly designed set creates confusion, inconsistency, and cognitive overhead.
Before generating any options, read these files in order:
.design-crit/state.json -- current facet state, round number, all prior locked decisions.design-crit/brief.md -- project brief (brand tone, platform, audience)../../reference/crit-loop.md -- shared crit loop mechanics../../reference/design-principles.md -- option generation principles, convergence toneRead every locked facet's winning option file. Iconography interacts with many prior decisions. Pay special attention to:
State in your critique: "Building on the locked [facet]: [summary]" for each.
Check for feedback-round-{N}.json in .design-crit/facets/iconography/. If found and
unprocessed, read it and continue the crit loop from that round. Do not regenerate round 1.
Every option must commit to a single icon style. Mixing styles within a product breaks visual coherence. Evaluate the style against the brief's brand tone.
| Style | Characteristics | Personality | Best For |
|---|---|---|---|
| Outlined | 1-2px stroke, no fill, open shapes | Clean, modern, lightweight | SaaS products, productivity tools, minimalist brands |
| Filled | Solid shapes, no visible stroke | Bold, confident, high contrast | Mobile apps, high-density UIs, strong brand presence |
| Duotone | Two tonal layers (primary shape + accent detail) | Expressive, distinctive, branded | Consumer apps, creative tools, marketing-forward products |
| Thin line | Hairline strokes (1px or less), delicate | Elegant, premium, refined | Luxury brands, editorial, fashion/lifestyle apps |
| Rounded | Soft terminals, rounded corners on strokes | Friendly, approachable, warm | Consumer products, onboarding, family-oriented apps |
| Sharp | Squared terminals, geometric precision | Technical, professional, authoritative | Developer tools, enterprise, finance |
Match the icon style to the brief's brand tone and the locked shape language:
State the alignment reasoning in the critique.
Every option must define a grid system that governs icon construction. The grid ensures visual consistency across the entire icon set.
Define a base grid size. Common sizes:
The grid includes a safe zone (padding inside the grid boundary). Typically 2px on each side for a 24px grid, leaving a 20px live area.
Keyline shapes ensure icons have consistent optical weight regardless of their geometric form. Define these keyline templates:
| Shape | Dimensions (in 24px grid) | Use For |
|---|---|---|
| Circle | 20px diameter, centered | Circular metaphors (globe, clock, user avatar) |
| Square | 18x18px, centered | Rectangular metaphors (document, folder, calendar) |
| Vertical rectangle | 16x20px, centered | Tall metaphors (bookmark, flag, person) |
| Horizontal rectangle | 20x16px, centered | Wide metaphors (landscape, card, video) |
Icons that fill different keyline shapes appear optically the same size because circular and wide shapes are perceptually larger than tall or narrow ones.
| Property | Value | Rationale |
|---|---|---|
| Stroke width | 1.5px or 2px | 1.5px for refined feel; 2px for bolder, more visible |
| Cap style | Round or square | Round for friendly; square for sharp |
| Join style | Round or miter | Match cap style |
| Corner radius | 0px, 1px, or 2px | Match product's shape language |
Show the grid, keylines, and stroke specs in each option HTML as a construction reference.
Evaluate whether each icon's visual metaphor is recognizable without a text label.
| Tier | Definition | Examples |
|---|---|---|
| Universal | Recognized across cultures and contexts | Home (house), Search (magnifying glass), Close (X), Menu (hamburger) |
| Contextual | Recognized within a domain or platform convention | Dashboard (grid), Analytics (chart), Pipeline (funnel) |
| Learned | Requires first-time exposure with a label; remembered after | Custom product features, domain-specific actions |
| Ambiguous | Multiple interpretations; label required | Star (favorite? rating? important?), Heart (like? love? health?) |
For each option, provide an inventory of all icons the product needs (derived from the locked navigation, components, and screens). For each icon, list:
Icons must work at multiple sizes while maintaining visual clarity. Evaluate optical sizing in each option.
Define the icon sizes the product uses and their contexts:
| Size | Pixel | Context |
|---|---|---|
| XS | 12-14px | Inline indicators, status dots, badges |
| SM | 16px | Inline with body text, compact UI elements |
| MD | 20-24px | Standard UI icons, nav items, toolbar buttons |
| LG | 28-32px | Feature icons, empty state illustrations, onboarding |
| XL | 40-48px | Hero icons, landing page features, category headers |
Icons drawn for 24px do not simply scale to 16px or 48px. At different sizes, icons need optical corrections:
In each option HTML, show at least 5 representative icons at XS, SM, MD, LG, and XL sizes. Evaluate:
Evaluate whether the icon set feels like a cohesive family, not a collection of individuals.
| Property | What to Check |
|---|---|
| Stroke weight | Same stroke width across all icons in the set |
| Corner radius | Same corner rounding on all icons |
| Level of detail | Similar complexity. No icon vastly more detailed than its siblings. |
| Perspective | All icons use the same perspective (front-facing, slight angle, flat) |
| Fill pattern | If some icons are filled and others outlined, is the rule clear? (e.g., filled = active, outlined = inactive) |
| Padding | Consistent use of the keyline grid. Icons sit at the same optical weight. |
| Metaphor language | Related concepts use related visual language (settings gear and advanced settings wrench share a mechanical metaphor family) |
Many icon systems use fill state to indicate selection or active state:
If the option uses this convention, apply it consistently. Show the active/inactive pair for navigation icons in the option HTML.
Evaluate whether the option uses a standard icon library, custom icons, or a hybrid.
| Approach | Strengths | Weaknesses |
|---|---|---|
| Standard library (Material, Lucide, Heroicons, Phosphor) | Large set, consistent, well-tested, accessible | Generic; many products look the same |
| Custom icons | Unique, brand-aligned, precisely tailored to product concepts | Expensive to create, maintain, and extend; risk of inconsistency |
| Hybrid (library base + custom for key actions) | Best of both: consistency from library, personality from custom | Must harmonize custom icons with library style; two sources to manage |
If the option uses a library, evaluate:
If the option uses a hybrid approach, custom icons must match:
Show a side-by-side in the option HTML: library icon next to custom icon of similar complexity. Evaluate whether they feel like siblings.
Generate 2-4 iconography options. Each must make a different bet about icon style, library choice, or metaphor strategy. Maximize variety.
Example option set for a productivity SaaS:
Each option HTML must include:
Refine survivors based on feedback. Common refinements:
When merging two options, create a new option file (e.g., option-ab.html) and state
what was taken from each in the rationale.
Score every option against these questions in your critique. Be specific -- cite which icons, which sizes, which contexts.
When generating compare.html for this facet, follow all rules from crit-loop.md with
these additions:
When the user locks an iconography option:
state.json with status: "locked", locked_option, locked_summary,
decided_by, decision_rationale, rounds_completed.locked_summary must capture: icon style (outlined/filled/duotone), library or
custom, stroke weight, grid size, and the fill/outline state convention if used.Use these to inform option generation and critique. Apply them to the specific project.
| Pattern | When It Works | Watch Out For |
|---|---|---|
| Outlined icons for everything | Clean aesthetic, modern SaaS | Low contrast at small sizes; disappears on busy backgrounds |
| Filled for active, outlined for inactive | Clear state indication in nav/tabs | Requires every icon in two variants; doubles asset count |
| Duotone for personality | Brand differentiation, consumer products | Complex to produce; harder to maintain consistency |
| Single icon library | Fast, consistent, cheap | Generic look; may lack product-specific metaphors |
| Hybrid library + custom | Brand personality where it counts, library for the rest | Style mismatch between library and custom icons |
| Icon-only buttons | Space-efficient, clean UI | Accessibility risk; ambiguous metaphors require labels |
text-primary for default
icons, text-secondary for muted icons, status colors for status indicators.