# Iconography

Source: section 23 — Iconography.

Vecreal icons are stroke-based, calm, and technical without feeling cold. They should inherit color from surrounding text and avoid separate asset variants (source: section 23 — Iconography).

## Core Rules

- Use a 14x14 viewBox for the default icon grid (source: section 23 — Iconography).
- Use stroke width 1.4 with round caps and joins (source: section 23 — Iconography).
- Use a single SVG layer and no fill unless the icon is filled by design, such as a status dot (source: section 23 — Iconography).
- Use `currentColor` so icons inherit the surrounding color (source: section 23 — Iconography).
- Use inline SVG for production icons. Do not use icon fonts (source: section 23 — Iconography).

## Sizes

- 14px is the default size for icon-only buttons and dense chrome (source: section 23 — Iconography).
- 18px is for icon grids and more prominent actions (source: section 23 — Iconography).
- 20px is for empty, error, or loading state icons in an icon-tile container (source: section 23 — Iconography).

## Accessibility

- Decorative icons are `aria-hidden="true"` (source: section 23 — Iconography).
- Meaningful icons use `role="img"` and an `aria-label` (source: section 23 — Iconography).
- Icon-only buttons put the label on the button, not only on the SVG (source: section 23 — Iconography).
- Icon plus text buttons hide the icon from screen readers because the text already carries the label (source: section 23 — Iconography).

## Starter Set

The HTML reference includes the first 42 icons for navigation, status, action, communication, file, and time. The library should grow only when product surfaces need new icons (source: section 23 — Iconography).

## CTA Accent Rule

Primary CTAs can use a clay-bright leading icon with soft-white text on the dark primary bubble. This is a deliberate brand accent moment, not a general permission to color every icon (source: section 24 — Buttons).