Iconography

Primitive · Iconography

Enterprise icon management

Governed registry, accessibility intelligence and impact analysis — the source of truth for icons across components, patterns, flows, blueprints and generated experiences.

Library
Lucide
Icons
84
Approved
82
A11y verified
100%
84 results
Studio AI · quick suggestions

Icon size outline · token map

Six optical sizes, each bound to stroke, density, type and spacing tokens. Click any token to copy.

Lucide default
WCAG 2.2 AA
currentColor
PreviewSize tokenStrokeType pairingSpacingDensityTouch targetRole · usage
12px · 0.75rem
compact
non-interactive
Metadata · decorative
Inline badges, table chips, helper text, dense status dots.
14px · 0.875rem
compact
non-interactive
Affordance · inline
Form field affixes, breadcrumbs, secondary labels, tag rows.
16px · 1rem
regular
min target 24×24
Default · UI control
Buttons, menu items, list rows, tabs — the system default.
20px · 1.25rem
regular
min target 32×32
Navigation · emphasis
Sidebar nav, segmented controls, toolbar actions, card headers.
24px · 1.5rem
spacious
WCAG 2.5.8 · 24×24 min
Primary action · mobile
Mobile tab bar, FAB, page headers, empty-state hints.
32px · 2rem
spacious
AAA · 44×44 padded
Hero · feature tile
Onboarding tiles, marketing modules, illustration anchors.
Density rule

Compact maps to icon.xs–sm, regular to icon.md–lg, spacious to icon.xl–2xl.

Type pairing

Icon height equals the cap height of its paired text token — never larger than the line-box.

Accessibility

Interactive icons must reach a 24×24 hit area (WCAG 2.5.8). Pad smaller sizes via the parent control.

Navigation

10 icons

Status

4 icons

Finance

8 icons

AI

4 icons

Actions

10 icons

Communication

5 icons

Security

6 icons

People

4 icons

Devices

3 icons

Data & Analytics

5 icons

Files

4 icons

System

3 icons

Workflows

3 icons

Maps

2 icons

Commerce

3 icons

Media

3 icons

Accessibility

4 icons

Administration

3 icons
Navigation
Home
icon.navigation.home
Usage
558
Popularity
70%
A11y
92
Status
Production
Version
2.4.1
Owner
Design Systems
Aliases
house
dashboard
start
Use for
  • · Primary navigation root
  • · Mobile tab bar
  • · Breadcrumb start
Avoid for
  • · Property listings (use House)
  • · Bank branches (use Landmark)
Alternatives
Accessibility · WCAG 2.5.5 · 2.4.7
ARIA
Wrap in <button aria-label="…">
Label
Verb-led (e.g. 'Edit profile')
Touch
Minimum 44×44
Keyboard
Enter / Space activates · visible focus ring
Where it's used
Components3
AppShell, Sidebar, MobileTabBar
Patterns1
GlobalNav
Flows1
Onboarding
Blueprints1
Retail Banking