Skip to main content

Icon

Implemented

Icon system with five atoms per ADR-022: PhosphorIcon (Admin-UI, 242 canonical names incl. 9 ADR-022-amend-01 EXTRAS + 25 Figma aliases, provenance in PHOSPHOR_ICON_SOURCES), VuesaxIcon (Storefront, 660 names, DS-ICONO-004), BrandIcon (~50 brands, DS-ICONO-005), FlagIcon (13 province flags, google/region-flags Public Domain), AlertIcon (variant-driven Phosphor wrapper — error/warning/info/success — for role=alert slots, ADR-026 + DS-ICONO-006b). ADR-021 size convention (7 sizes + stroke/LARGE_GRAPHIC/brand exceptions). Always aria-hidden unless the sole label. ICONO-ADOPT run (2026-08-17) migrated all dashboard/admin SVG to PhosphorIcon, all storefront public SVG to VuesaxIcon, Footer social letters to BrandIcon, and province flags to google/region-flags.

Categoryatoms
Sourcepatterns/atoms/icon.html
AI HintIcon rendering entry points — PhosphorIcon (Admin-UI, ADR-022) wraps a tree-shakeable Phosphor component at ADR-021 sizes (12-24px) inheriting currentColor; BrandIcon resolves vendored/registry brand glyphs; FlagIcon renders country flags. Decorative by default: pass aria-label only when the icon is the sole label.

Catalog fallback

Live MDX preview not available for Icon. Showing component catalog metadata instead.

Props

Preview

Icon

Prop
Type
Required
Default
Description
icon (PhosphorIcon)
PhosphorComponent
Required
—

Per-icon import from @phosphor-icons/react/dist/ssr (Admin-UI surfaces)

name + src (VuesaxIcon)
VuesaxIconName | string, string
Required
—

Figma/canonical name + per-icon SVG import from vuesax-icons/linear/<name>.svg (storefront public)

name (BrandIcon)
BrandName
Required
—

Registry brand name (google, apple, facebook, instagram, twitter, youtube, …) or custom icon component

country (FlagIcon)
ISO 3166 code | CA province code
Required
—

fi-xx classes incl. 13 vendored CA provinces (google/region-flags)

Quick use:<Icon />

Accessibility

Type

1 rule

NASA Rule 5

name must be a valid IconName union member

ARIA

1 rule

WCAG 1.1.1

Icon must always be aria-hidden='true' — never the only label for an interactive element

Usage

Import

tsxSnippet
import { Icon } from "@epasslive/design-system"

Example 1

tsxSnippet
<Icon />

Example 2

tsxSnippet
<Icon variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms

Design System v4.1.0 | ePassLive