Icon

atoms

Inline SVG icon library — 21 standard icons used across admin. Always aria-hidden — paired with text or aria-label from parent.

Demo

Demo for Icon (atoms)

Inline SVG icon library — 21 standard icons used across admin. Always aria-hidden — paired with text or aria-label from parent.

Props

PropTypeRequiredDefaultDescription
nameIconNameYes—

TypeScript Interface

interface IconProps {
  name: 'dashboard' | 'events' | 'transactions' | 'bookings' | 'statistics' | 'promotions' | 'packages' | 'consignment' | 'permissions' | 'settings' | 'search' | 'bell' | 'gear' | 'chevron-down' | 'check' | 'arrow-up' | 'arrow-down' | 'location' | 'music' | 'close' | 'plus' | 'minus';
  size?: 16 | 20 | 24;
  strokeWidth?: 1.5 | 2;
  className?: string;
}

Assertions (NASA Rule 5)

  • [type]name must be a valid IconName union member(NASA Rule 5)
  • [aria]Icon must always be aria-hidden='true' — never the only label for an interactive element(WCAG 1.1.1)

Usage

Import

import { Icon } from '@epasslive/design-system'

Basic

<Icon />

With Variants

<Icon variant="primary" size="md" />