Why is optical sizing important for icons?

Icons designed for large headers often look cluttered when scaled down to 16px. This skill provides guidance on simplifying details and adjusting stroke weights for different sizes.

What are keyline shapes in iconography?

Keylines are geometric templates (circles, squares, rectangles) used within a grid to ensure different icon shapes appear to have the same optical size and weight.

Can this skill help me choose an icon library?

Yes, it evaluates standard libraries like Lucide, Heroicons, or Phosphor against your brand brief to determine if they meet your specific metaphor and style needs.

How does this skill ensure icon consistency?

It uses a structured checklist to evaluate stroke weights, corner radii, level of detail, and perspective across the entire set, ensuring all icons feel like a unified family.

What are recognition tiers?

Recognition tiers categorize icons as Universal, Contextual, Learned, or Ambiguous to help determine when an icon requires a text label for better accessibility.

Iconography Design Critique

Name: Iconography Design Critique
Author: metedata

bymetedata

0•

Design Tools

Evaluates and iterates on icon systems, visual metaphors, and style consistency to build a professional symbolic language.

The Iconography Critique skill provides a structured framework for developing and auditing professional icon systems within Claude Code. It guides designers and developers through evaluating icon styles, defining rigorous grid and keyline systems, and ensuring metaphor clarity across different recognition tiers. By generating HTML wireframe artifacts for side-by-side comparison, it helps users make informed decisions on stroke weights, optical sizing (from XS to XL), and the trade-offs between using standard libraries like Lucide versus custom-drawn assets, ensuring every icon aligns with the project's brand identity and functional requirements.

Key Features

01Rigid grid and keyline system definitions for visual weight balance

02Comprehensive icon style taxonomy (outlined, filled, duotone, sharp, rounded)

03Metaphor clarity analysis to ensure high usability and recognition

040 GitHub stars

05Library vs. Custom icon harmonization and trade-off evaluation

06Optical sizing rules for scaling icons from 12px to 48px+

Use Cases

01Auditing an existing product UI for icon inconsistency and cognitive overhead

02Defining optical scaling rules for a design system's iconography component

03Establishing a cohesive icon system for a new SaaS platform or mobile app

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-iconography

For use in Claude.ai and ChatGPT

Key Features

01Rigid grid and keyline system definitions for visual weight balance

02Comprehensive icon style taxonomy (outlined, filled, duotone, sharp, rounded)

03Metaphor clarity analysis to ensure high usability and recognition

040 GitHub stars

05Library vs. Custom icon harmonization and trade-off evaluation

06Optical sizing rules for scaling icons from 12px to 48px+

Use Cases

01Auditing an existing product UI for icon inconsistency and cognitive overhead

02Defining optical scaling rules for a design system's iconography component

03Establishing a cohesive icon system for a new SaaS platform or mobile app