SUI Icons

The icon system for the Speyer UI Design System. Click any icon to copy its <use> snippet.

538 Symbols 456 Unique 27 Aliases 28 Categories 24×24 · 2px Stroke WCAG 2.1 AA currentColor MIT Licence

↗ = alias to another icon · i = usage note (hover) · Click any icon to copy snippet

Accessibility Usage Patterns

Pattern A — Decorative

<svg class="sui-icon" viewBox="0 0 24 24" aria-hidden="true">
  <use href="#sui-icon-status-check-circle"/>
</svg>
Active

Active

Pattern B — Icon Button

<button class="sui-icon-btn" aria-label="Delete">
  <svg class="sui-icon" viewBox="0 0 24 24"
       aria-hidden="true">
    <use href="#sui-icon-act-trash"/>
  </svg>
</button>

44px touch target

Pattern C — Icon Link

<a href="/search" class="sui-icon-btn"
   aria-label="Search">
  <svg class="sui-icon" viewBox="0 0 24 24"
       aria-hidden="true">
    <use href="#sui-icon-act-search"/>
  </svg>
</a>

aria-label on <a>, not SVG

Size Classes

Class	Size
`.sui-icon-xs`	12px
`.sui-icon-sm`	14px
`.sui-icon-md`	16px
`.sui-icon-lg`	20px
`.sui-icon-xl`	24px (default)
`.sui-icon-2xl`	32px
`.sui-icon-3xl`	48px

Colour Utilities

Class	Token
`.sui-icon-primary`	`--sui-blue-primary`
`.sui-icon-success`	`--sui-success`
`.sui-icon-warning`	`--sui-warning`
`.sui-icon-error`	`--sui-error`
`.sui-icon-info`	`--sui-info`
`.sui-icon-muted`	`--sui-text-muted`

Design Rules

Rule	Value
Canvas	24 × 24px, `viewBox="0 0 24 24"`
Stroke	2px, `currentColor`, round caps/joins
Fill	`none` (outline) or `currentColor` (solid)
Content area	2px – 22px boundary
Hardcoded colours	Never

Minimum Sizes (Fine Detail)

Icon	Min Size
`act-qr-code`, `data-chart-scatter`	20px (`.sui-icon-lg`)
`ops-barcode`, `a11y-keyboard`, `misc-snowflake`, `brand-codepen`	16px (`.sui-icon-md`)

Spinner

<svg class="sui-icon sui-icon-spin sui-icon-xl"
     viewBox="0 0 24 24"
     role="img" aria-label="Loading">
  <use href="#sui-icon-status-loader"/>
</svg>

.sui-icon-spin required — respects prefers-reduced-motion

Naming Convention

sui-icon-{category}-{descriptor}

Examples: act-download, status-check-circle, pay-credit-card

Icons marked ↗ are aliases — alternate names pointing to the same geometry.

nav-Navigation36 (2 alias)

act-Actions74 (8 alias)

status-Status & Feedback29 (1 alias)

data-Data & Analytics30

people-People & Organisation16

pay-Commerce & Payments24

file-Files & Documents24 (1 alias)

time-Time & Scheduling13

sec-Security & Auth16

comm-Communication15 (1 alias)

loc-Location11 (1 alias)

dev-Development23 (3 alias)

soc-Social & Engagement21 (2 alias)

media-Media & Content19

ai-AI & Automation14

brand-Brand & Social Media15 (8 alias)

input-Input & Form Controls12

ui-UI & Layout48

view-View & Display12 (2 alias)

ops-Operations & Logistics9

work-Workspace & Productivity11 (1 alias)

sci-Science1 (1 alias)

format-Text Formatting2

misc-Miscellaneous & Delight31 (1 alias)

weather-Weather8

health-Health & Wellness6

edu-Education6

travel-Travel7

a11y-Accessibility5

No icons match your search.