Icons

Standard uses Phosphor Icons for its visual language. Icons provide visual context, improve scannability, and reinforce meaning throughout the interface.

Basic Usage

Include icons using the Phosphor icon font classes.

<i class="ph ph-house" style="font-size: 1.5rem;"></i>
<i class="ph ph-gear" style="font-size: 1.5rem;"></i>
<i class="ph ph-user" style="font-size: 1.5rem;"></i>
<i class="ph ph-envelope" style="font-size: 1.5rem;"></i>
<i class="ph ph-magnifying-glass" style="font-size: 1.5rem;"></i>

<i class="ph ph-house"></i>
<i class="ph ph-gear"></i>
<i class="ph ph-user"></i>

Icon Styles

Phosphor icons come in multiple styles: regular, bold, fill, and duotone.

Regular

Bold

Fill

Duotone

<div style="display: flex; gap: var(--space-6); align-items: center;">
<div style="text-align: center;">
<i class="ph ph-heart" style="font-size: 2rem;"></i>
<div style="font-size: 0.75rem; color: var(--fg-3); margin-top: var(--space-2);">Regular</div>
</div>
<div style="text-align: center;">
<i class="ph-bold ph-heart" style="font-size: 2rem;"></i>
<div style="font-size: 0.75rem; color: var(--fg-3); margin-top: var(--space-2);">Bold</div>
</div>
<div style="text-align: center;">
<i class="ph-fill ph-heart" style="font-size: 2rem;"></i>
<div style="font-size: 0.75rem; color: var(--fg-3); margin-top: var(--space-2);">Fill</div>
</div>
<div style="text-align: center;">
<i class="ph-duotone ph-heart" style="font-size: 2rem;"></i>
<div style="font-size: 0.75rem; color: var(--fg-3); margin-top: var(--space-2);">Duotone</div>
</div>
</div>

<i class="ph ph-heart"></i>         <!-- Regular -->
<i class="ph-bold ph-heart"></i>    <!-- Bold -->
<i class="ph-fill ph-heart"></i>    <!-- Fill -->
<i class="ph-duotone ph-heart"></i> <!-- Duotone -->

Icon Sizes

Control icon size using font-size or predefined classes.

<i class="ph ph-star Icon Icon--xs"></i>
<i class="ph ph-star Icon Icon--small"></i>
<i class="ph ph-star Icon"></i>
<i class="ph ph-star Icon Icon--large"></i>
<i class="ph ph-star Icon Icon--xl"></i>

<i class="ph ph-star Icon Icon--xs"></i>    <!-- 12px -->
<i class="ph ph-star Icon Icon--small"></i> <!-- 16px -->
<i class="ph ph-star Icon"></i>             <!-- 20px -->
<i class="ph ph-star Icon Icon--large"></i> <!-- 24px -->
<i class="ph ph-star Icon Icon--xl"></i>    <!-- 32px -->

<i class="ph ph-rocket" style="font-size: 1rem;"></i>
<i class="ph ph-rocket" style="font-size: 1.5rem;"></i>
<i class="ph ph-rocket" style="font-size: 2rem;"></i>
<i class="ph ph-rocket" style="font-size: 3rem;"></i>

<i class="ph ph-rocket" style="font-size: 2rem;"></i>

Icon Colors

Icons inherit the current text color. Override with CSS.

<i class="ph ph-check-circle" style="font-size: 1.5rem; color: oklch(55% 0.15 150);"></i>
<i class="ph ph-warning" style="font-size: 1.5rem; color: oklch(70% 0.15 80);"></i>
<i class="ph ph-x-circle" style="font-size: 1.5rem; color: oklch(55% 0.2 25);"></i>
<i class="ph ph-info" style="font-size: 1.5rem; color: var(--accent);"></i>
<i class="ph ph-star-fill" style="font-size: 1.5rem; color: oklch(75% 0.15 80);"></i>

<i class="ph ph-check-circle" style="color: oklch(55% 0.15 150);"></i>
<i class="ph ph-warning" style="color: oklch(70% 0.15 80);"></i>

<i class="ph ph-check-circle Icon Icon--success"></i>
<i class="ph ph-warning Icon Icon--warning"></i>
<i class="ph ph-x-circle Icon Icon--error"></i>
<i class="ph ph-info Icon Icon--info"></i>

<i class="ph ph-check-circle Icon Icon--success"></i>
<i class="ph ph-warning Icon Icon--warning"></i>

Icons in Buttons

Common pattern for enhanced button clarity.

<button class="Button Button--primary">
<i class="ph ph-plus Button-icon"></i>
Create New
</button>
<button class="Button Button--secondary">
<i class="ph ph-download Button-icon"></i>
Download
</button>
<button class="Button Button--danger">
<i class="ph ph-trash Button-icon"></i>
Delete
</button>

<button class="Button Button--primary">
    <i class="ph ph-plus Button-icon"></i>
    Create New
</button>

<button class="Button Button--primary">
Continue
<i class="ph ph-arrow-right Button-icon Button-icon--trailing"></i>
</button>
<button class="Button Button--secondary">
External Link
<i class="ph ph-arrow-square-out Button-icon Button-icon--trailing"></i>
</button>

<button class="Button Button--primary">
    Continue
    <i class="ph ph-arrow-right Button-icon Button-icon--trailing"></i>
</button>

<button class="Button Button--icon" aria-label="Search">
<i class="ph ph-magnifying-glass"></i>
</button>
<button class="Button Button--icon Button--primary" aria-label="Add item">
<i class="ph ph-plus"></i>
</button>
<button class="Button Button--icon Button--secondary" aria-label="Settings">
<i class="ph ph-gear"></i>
</button>
<button class="Button Button--icon Button--ghost" aria-label="More options">
<i class="ph ph-dots-three"></i>
</button>

<button class="Button Button--icon" aria-label="Search">
    <i class="ph ph-magnifying-glass"></i>
</button>

Icons in Inputs

Add context to form inputs.

<div class="Input-wrapper" style="max-width: 280px;">
<i class="ph ph-magnifying-glass Input-icon"></i>
<input type="text" class="Input Input--withIcon" placeholder="Search...">
</div>
<div class="Input-wrapper" style="max-width: 280px; margin-top: var(--space-3);">
<i class="ph ph-envelope Input-icon"></i>
<input type="email" class="Input Input--withIcon" placeholder="Email address">
</div>

<div class="Input-wrapper">
    <i class="ph ph-magnifying-glass Input-icon"></i>
    <input type="text" class="Input Input--withIcon" placeholder="Search...">
</div>

Icons in Lists

Enhance list items with icons.

Feature included in plan
Unlimited storage space
Priority customer support
Advanced analytics

<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3);">
<li style="display: flex; align-items: center; gap: var(--space-3);">
<i class="ph ph-check-circle Icon Icon--success"></i>
<span>Feature included in plan</span>
</li>
<li style="display: flex; align-items: center; gap: var(--space-3);">
<i class="ph ph-check-circle Icon Icon--success"></i>
<span>Unlimited storage space</span>
</li>
<li style="display: flex; align-items: center; gap: var(--space-3);">
<i class="ph ph-check-circle Icon Icon--success"></i>
<span>Priority customer support</span>
</li>
<li style="display: flex; align-items: center; gap: var(--space-3);">
<i class="ph ph-x-circle" style="color: var(--fg-3);"></i>
<span style="color: var(--fg-3);">Advanced analytics</span>
</li>
</ul>

<li style="display: flex; align-items: center; gap: var(--space-3);">
    <i class="ph ph-check-circle Icon Icon--success"></i>
    <span>Feature included</span>
</li>

Icons in Alerts

Add visual weight to alert messages.

This is an informational message.

Changes saved successfully.

Please review your settings.

An error occurred. Please try again.

<div class="Alert Alert--info" style="max-width: 400px;">
<i class="ph ph-info Alert-icon"></i>
<div>This is an informational message.</div>
</div>
<div class="Alert Alert--success" style="max-width: 400px; margin-top: var(--space-3);">
<i class="ph ph-check-circle Alert-icon"></i>
<div>Changes saved successfully.</div>
</div>
<div class="Alert Alert--warning" style="max-width: 400px; margin-top: var(--space-3);">
<i class="ph ph-warning Alert-icon"></i>
<div>Please review your settings.</div>
</div>
<div class="Alert Alert--error" style="max-width: 400px; margin-top: var(--space-3);">
<i class="ph ph-x-circle Alert-icon"></i>
<div>An error occurred. Please try again.</div>
</div>

<div class="Alert Alert--success">
    <i class="ph ph-check-circle Alert-icon"></i>
    <div>Changes saved successfully.</div>
</div>

Icon Backgrounds

Icons in circular or square backgrounds.

<span class="IconBg">
<i class="ph ph-house"></i>
</span>
<span class="IconBg IconBg--primary">
<i class="ph ph-gear"></i>
</span>
<span class="IconBg IconBg--success">
<i class="ph ph-check"></i>
</span>
<span class="IconBg IconBg--warning">
<i class="ph ph-warning"></i>
</span>
<span class="IconBg IconBg--error">
<i class="ph ph-x"></i>
</span>

<span class="IconBg IconBg--primary">
    <i class="ph ph-gear"></i>
</span>

<span class="IconBg IconBg--small IconBg--primary">
<i class="ph ph-star"></i>
</span>
<span class="IconBg IconBg--primary">
<i class="ph ph-star"></i>
</span>
<span class="IconBg IconBg--large IconBg--primary">
<i class="ph ph-star"></i>
</span>

<span class="IconBg IconBg--small IconBg--primary">...</span>
<span class="IconBg IconBg--large IconBg--primary">...</span>

Animated Icons

Icons with loading or state animations.

<i class="ph ph-spinner Icon Icon--spin" style="font-size: 1.5rem;"></i>
<i class="ph ph-circle-notch Icon Icon--spin" style="font-size: 1.5rem;"></i>
<i class="ph ph-arrows-clockwise Icon Icon--spin" style="font-size: 1.5rem;"></i>

<i class="ph ph-spinner Icon Icon--spin"></i>

<i class="ph ph-bell Icon Icon--pulse" style="font-size: 1.5rem; color: var(--accent);"></i>
<i class="ph ph-heart-fill Icon Icon--pulse" style="font-size: 1.5rem; color: oklch(55% 0.2 25);"></i>

<i class="ph ph-bell Icon Icon--pulse"></i>

Common Icons Reference

house

magnifying-glass

gear

bell

user

sign-out

<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); text-align: center;">
<div>
<i class="ph ph-house" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">house</div>
</div>
<div>
<i class="ph ph-magnifying-glass" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">magnifying-glass</div>
</div>
<div>
<i class="ph ph-gear" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">gear</div>
</div>
<div>
<i class="ph ph-bell" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">bell</div>
</div>
<div>
<i class="ph ph-user" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">user</div>
</div>
<div>
<i class="ph ph-sign-out" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">sign-out</div>
</div>
</div>

Actions

plus

pencil

trash

download

upload

<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); text-align: center;">
<div>
<i class="ph ph-plus" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">plus</div>
</div>
<div>
<i class="ph ph-pencil" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">pencil</div>
</div>
<div>
<i class="ph ph-trash" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">trash</div>
</div>
<div>
<i class="ph ph-download" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">download</div>
</div>
<div>
<i class="ph ph-upload" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">upload</div>
</div>
<div>
<i class="ph ph-share" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">share</div>
</div>
</div>

Status & Feedback

check

warning

info

question

spinner

<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); text-align: center;">
<div>
<i class="ph ph-check" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">check</div>
</div>
<div>
<i class="ph ph-x" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">x</div>
</div>
<div>
<i class="ph ph-warning" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">warning</div>
</div>
<div>
<i class="ph ph-info" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">info</div>
</div>
<div>
<i class="ph ph-question" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">question</div>
</div>
<div>
<i class="ph ph-spinner" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">spinner</div>
</div>
</div>

Arrows & Chevrons

arrow-left

arrow-right

caret-down

caret-right

arrow-square-out

arrows-clockwise

<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); text-align: center;">
<div>
<i class="ph ph-arrow-left" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">arrow-left</div>
</div>
<div>
<i class="ph ph-arrow-right" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">arrow-right</div>
</div>
<div>
<i class="ph ph-caret-down" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">caret-down</div>
</div>
<div>
<i class="ph ph-caret-right" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">caret-right</div>
</div>
<div>
<i class="ph ph-arrow-square-out" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">arrow-square-out</div>
</div>
<div>
<i class="ph ph-arrows-clockwise" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">arrows-clockwise</div>
</div>
</div>

Media & Files

image

file

folder

video

link

paperclip

<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); text-align: center;">
<div>
<i class="ph ph-image" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">image</div>
</div>
<div>
<i class="ph ph-file" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">file</div>
</div>
<div>
<i class="ph ph-folder" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">folder</div>
</div>
<div>
<i class="ph ph-video" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">video</div>
</div>
<div>
<i class="ph ph-link" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">link</div>
</div>
<div>
<i class="ph ph-paperclip" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">paperclip</div>
</div>
</div>

Communication

envelope

chat

phone

paper-plane-tilt

users

<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); text-align: center;">
<div>
<i class="ph ph-envelope" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">envelope</div>
</div>
<div>
<i class="ph ph-chat" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">chat</div>
</div>
<div>
<i class="ph ph-phone" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">phone</div>
</div>
<div>
<i class="ph ph-paper-plane-tilt" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">paper-plane-tilt</div>
</div>
<div>
<i class="ph ph-at" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">at</div>
</div>
<div>
<i class="ph ph-users" style="font-size: 1.5rem;"></i>
<div style="font-size: 0.7rem; color: var(--fg-3); margin-top: var(--space-1);">users</div>
</div>
</div>

Common Patterns

Empty State

No files yet

Upload your first file to get started.

<div style="text-align: center; padding: var(--space-8); max-width: 320px; margin: 0 auto;">
<span class="IconBg IconBg--large" style="margin-bottom: var(--space-4);">
<i class="ph ph-folder-open" style="font-size: 2rem; color: var(--fg-3);"></i>
</span>
<h4 style="margin: 0 0 var(--space-2);">No files yet</h4>
<p style="color: var(--fg-3); margin: 0 0 var(--space-4); font-size: 0.9rem;">Upload your first file to get started.</p>
<button class="Button Button--primary">
<i class="ph ph-upload Button-icon"></i>
Upload File
</button>
</div>

Feature List

Pro Plan Features

Unlimited projects
Advanced analytics
Priority support
Custom integrations

<div class="Card" style="max-width: 360px;">
<div class="Card-body">
<h4 class="Card-title" style="margin-bottom: var(--space-4);">Pro Plan Features</h4>
<ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3);">
<li style="display: flex; align-items: flex-start; gap: var(--space-3);">
<span class="IconBg IconBg--small IconBg--success">
<i class="ph ph-check"></i>
</span>
<span>Unlimited projects</span>
</li>
<li style="display: flex; align-items: flex-start; gap: var(--space-3);">
<span class="IconBg IconBg--small IconBg--success">
<i class="ph ph-check"></i>
</span>
<span>Advanced analytics</span>
</li>
<li style="display: flex; align-items: flex-start; gap: var(--space-3);">
<span class="IconBg IconBg--small IconBg--success">
<i class="ph ph-check"></i>
</span>
<span>Priority support</span>
</li>
<li style="display: flex; align-items: flex-start; gap: var(--space-3);">
<span class="IconBg IconBg--small IconBg--success">
<i class="ph ph-check"></i>
</span>
<span>Custom integrations</span>
</li>
</ul>
</div>
<div class="Card-footer">
<button class="Button Button--primary Button--block">Upgrade to Pro</button>
</div>
</div>

<div style="background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r-m); padding: var(--space-2); width: 200px; box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1);">
<button style="display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer; border-radius: var(--r-s); font-size: 0.9rem; color: var(--fg);">
<i class="ph ph-user"></i>
Profile
</button>
<button style="display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer; border-radius: var(--r-s); font-size: 0.9rem; color: var(--fg);">
<i class="ph ph-gear"></i>
Settings
</button>
<button style="display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer; border-radius: var(--r-s); font-size: 0.9rem; color: var(--fg);">
<i class="ph ph-question"></i>
Help
</button>
<hr style="border: none; border-top: 1px solid var(--bd); margin: var(--space-2) 0;">
<button style="display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer; border-radius: var(--r-s); font-size: 0.9rem; color: oklch(55% 0.2 25);">
<i class="ph ph-sign-out"></i>
Sign out
</button>
</div>

Customization

Override icon styles using CSS custom properties:

/* Custom icon color scheme */
.Icon--brand {
  color: oklch(55% 0.2 280);
}

/* Custom icon background */
.IconBg--brand {
  background-color: oklch(55% 0.2 280 / 0.15);
  color: oklch(45% 0.2 280);
}

/* Square icon backgrounds */
.IconBg--square {
  border-radius: var(--r-s);
}

/* Custom animation speed */
.Icon--spin-slow {
  animation: spin 2s linear infinite;
}

/* Custom size scale */
.Icon--xxl {
  font-size: 3rem;
}

API Reference

Classes

Class	Description
`.Icon`	Base icon styling
`.Icon--xs`	Extra small (12px)
`.Icon--small`	Small (16px)
`.Icon--large`	Large (24px)
`.Icon--xl`	Extra large (32px)
`.Icon--success`	Success/green color
`.Icon--warning`	Warning/yellow color
`.Icon--error`	Error/red color
`.Icon--info`	Info/primary color
`.Icon--spin`	Spinning animation
`.Icon--pulse`	Pulsing animation
`.IconBg`	Icon with circular background
`.IconBg--small`	Small background (28px)
`.IconBg--large`	Large background (56px)
`.IconBg--primary`	Primary color background
`.IconBg--success`	Success color background
`.IconBg--warning`	Warning color background
`.IconBg--error`	Error color background

Phosphor Icon Styles

Class Prefix	Description
`ph`	Regular weight
`ph-bold`	Bold weight
`ph-fill`	Filled style
`ph-duotone`	Two-tone style

Attributes

Attribute	Description
`aria-hidden="true"`	For decorative icons (text provides meaning)
`aria-label`	For meaningful icons without visible text
`role="img"`	When icon conveys meaning

CSS Custom Properties

Property	Default	Description
`--text-secondary`	—	Default icon color
`--bg-secondary`	—	IconBg background
`--accent-primary`	—	Info color

CSS Reference

/* Base Icon */
.Icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}

/* Sizes */
.Icon--xs { font-size: 0.75rem; }
.Icon--small { font-size: 1rem; }
.Icon--large { font-size: 1.5rem; }
.Icon--xl { font-size: 2rem; }

/* Colors */
.Icon--success { color: oklch(55% 0.15 150); }
.Icon--warning { color: oklch(70% 0.15 80); }
.Icon--error { color: oklch(55% 0.2 25); }
.Icon--info { color: var(--accent); }

/* Animations */
.Icon--spin {
  animation: spin 1s linear infinite;
}

.Icon--pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Icon Background */
.IconBg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-s);
  color: var(--fg-3);
}

.IconBg--small {
  width: 28px;
  height: 28px;
  font-size: 0.875rem;
}

.IconBg--large {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

.IconBg--primary {
  background-color: oklch(60% 0.15 250 / 0.15);
  color: oklch(50% 0.15 250);
}

.IconBg--success {
  background-color: oklch(65% 0.15 150 / 0.15);
  color: oklch(45% 0.15 150);
}

.IconBg--warning {
  background-color: oklch(75% 0.15 80 / 0.15);
  color: oklch(50% 0.15 80);
}

.IconBg--error {
  background-color: oklch(55% 0.2 25 / 0.15);
  color: oklch(50% 0.2 25);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Accessibility

Icons require attention to ensure they’re accessible:

Decorative Icons

<!-- Icon is purely decorative, text provides meaning -->
<button class="Button Button--primary">
    <i class="ph ph-plus" aria-hidden="true"></i>
    Add Item
</button>

Meaningful Icons

<!-- Icon-only button needs aria-label -->
<button class="Button Button--icon" aria-label="Search">
    <i class="ph ph-magnifying-glass"></i>
</button>

<!-- Or use visually-hidden text -->
<button class="Button Button--icon">
    <i class="ph ph-magnifying-glass"></i>
    <span class="sr-only">Search</span>
</button>

Status Icons

<!-- Provide text alternative for status -->
<span>
    <i class="ph ph-check-circle Icon Icon--success" aria-hidden="true"></i>
    <span>Complete</span>
</span>

Best Practices

Do

✓ Use consistent sizing — Match icon size to text size
✓ Pair icons with text — When possible, provide labels
✓ Use recognizable icons — Stick to common conventions
✓ Provide aria-labels — Required for icon-only buttons
✓ Match icon style — Use the same weight throughout
✓ Use semantic color classes — .Icon--success for positive states

Don’t

✗ Overuse icons — Not everything needs an icon
✗ Create visual noise — Too many icons reduce clarity
✗ Use ambiguous icons — A hamburger menu isn’t a hamburger
✗ Forget color contrast — Icons need sufficient contrast
✗ Mix icon libraries — Stick to Phosphor for consistency
✗ Use icons without accessible names — Icon-only elements need aria-label

Icons

Icons

Basic Usage

Icon Styles

Icon Sizes

Icon Colors

Icons in Buttons

Icons in Inputs

Icons in Lists

Icons in Alerts

Icon Backgrounds

Animated Icons

Common Icons Reference

Navigation

Actions

Status & Feedback

Arrows & Chevrons

Media & Files

Communication

Common Patterns

Empty State

No files yet

Feature List

Pro Plan Features

Menu with Icons

Customization

API Reference

Classes

Phosphor Icon Styles

Attributes

CSS Custom Properties

CSS Reference

Accessibility

Decorative Icons

Meaningful Icons

Status Icons

Best Practices

Do

Don’t