skills.rest
metedata
metedataCOMMUNITY
Explore all skills by this author →
𝕏@metedataGitHub

crit-iconography

Evaluate icon systems for style, metaphor clarity, sizing, and accessibility in product UI.

3|Updated Feb 23, 2026
Search Tags:#accessibility#icons#wireframes#design-system#metaphor#visual-design#iconography
One-click install
npx skills add https://github.com/metedata/design-crit --skill crit-iconography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: crit-iconography
Source: https://github.com/metedata/design-crit/tree/main/skills/crit-iconography
Command: npx skills add https://github.com/metedata/design-crit --skill crit-iconography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent or unclear iconography creates confusion, increases cognitive load, and undermines brand recognition; this Skill guides teams to a coherent, accessible icon system aligned with product tone and locked design decisions.

Core Features & Use Cases

  • Style alignment: Map icon style (outlined, filled, duotone, rounded, sharp) to brand tone and locked shape language.
  • Option generation: Produce 2-4 divergent iconography options with HTML specimens, grid/keyline specs, and size variants for compare view.
  • Inventory & accessibility: Create a complete icon inventory, evaluate metaphor clarity, optical sizing, fill/outline state conventions, and accessibility labels and contrast.
  • Use case: Ideal for refining navigation and toolbar icons in a SaaS dashboard, harmonizing library and custom icons, or locking an icon direction before a design handoff.

Quick Start

Run the crit-iconography skill to analyze the current icon set, generate 2-4 HTML options with specimens and inventories, and produce a compare.html for side-by-side review.

Frequently Asked Questions about crit-iconography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate multiple icon design options for side-by-side comparison?▼

Generate 2-4 divergent iconography options with HTML specimens, grid keyline specs, and size variants. Produce a compare.html file for side-by-side review, allowing teams to evaluate different icon styles against locked design decisions before finalizing the visual direction.

Can I align custom and library icons in a SaaS dashboard design system?▼

Ensure navigation and toolbar icons meet accessibility standards by evaluating contrast levels, optical sizing, and accessibility labels. Generate a complete icon inventory that documents metaphor clarity and state conventions to maintain a coherent, accessible icon system aligned with product tone.

When do I need an icon inventory and accessibility review before design handoff?▼

You can harmonize library and custom icons by mapping outlined, filled, duotone, rounded, or sharp styles to your locked shape language. Evaluate metaphor clarity and optical sizing across the complete icon inventory to create a consistent visual design system for your SaaS dashboard.

Why does inconsistent iconography increase cognitive load in wireframes?▼

You need an icon inventory and accessibility review before design handoff to lock an icon direction and prevent inconsistent visual design. Evaluate metaphor clarity, sizing specimens, and accessibility labels to ensure the final icon system is coherent and properly documented for developers.

Why does inconsistent iconography increase cognitive load in wireframes?▼

Inconsistent iconography increases cognitive load because unclear metaphors and mismatched styles confuse users and undermine brand recognition. Evaluating style alignment, sizing, and accessibility labels during the iterative crit loop ensures a coherent icon system that reduces user confusion.

Related Skills

Explore More Design & Creative Skills→
metedatametedata
3

crit-content-voice

Evaluate UI microcopy and propose voice options with a terminology glossary.

Community
Advanced
metedatametedata
3

crit-typography

Generate HTML type specimens and implementation tokens for typographic critiques.

Community
Advanced
avvaleavvale

angular-material-19

Integrate Angular Material 19 components with Material 3 theming and CDK patterns.

Official
Intermediate
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate