# Iconography

> Design and apply icon systems that are recognizable, consistent, and supportive of UI clarity. Use when creating icon sets, choosing icons for actions, or establishing icon style guidelines.

- Skill: `itsual/iconography` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itsual/iconography`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itsual/iconography/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: itsual (https://skillmd.com/u/itsual)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/itsual/iconography

---


# Iconography

## Overview

Icons aid recognition and scanning when used well. When used poorly, they confuse. A coherent icon system reinforces the design language and speeds comprehension.

## When to Use

- Building or extending a product icon set
- Choosing icons for navigation and actions
- Establishing style, sizing, and usage rules
- Improving accessibility of icon-only controls

## Core Practices

- Maintain consistent optical size, stroke, and corner language
- Prefer recognizable metaphors over clever abstraction
- Pair icons with labels for critical or uncommon actions
- Provide accessible names for icon-only buttons
- Define clear do/don’t usage guidelines

## Principles

- Clarity beats cleverness
- Consistency within the set matters more than individual perfection
- Icons should simplify, not require a legend
- Test recognition with users when introducing uncommon metaphors

## Verification

- [ ] Icons are distinguishable at intended sizes
- [ ] Critical actions aren’t icon-only without labels or tooltips
- [ ] Style is consistent across the set