Foundations

Icons

Phosphor is the icon family of the system — more than 1,500 icons in six weights, drawn on a 256×256 grid. Components import the*Icon-suffixed exports from @phosphor-icons/react; lucide is not used anywhere.

Usage

Icons inherit currentColor, so color comes from the text tokens of the surrounding element — never from a literal color. Size with the size-* utilities: size-4 inside controls and menus, size-5 to size-6 for standalone icons. In server components import the same names from @phosphor-icons/react/dist/ssr.

import { MagnifyingGlassIcon } from "@phosphor-icons/react"

<MagnifyingGlassIcon className="size-4 text-muted-foreground" />

Weights

Every icon ships in six weights, switched with the weight prop. The system default is regular; fill marks active or selected states (see the sidebar navigation), and the other weights are available for display moments. Don't mix weights inside one surface.

weight="regular"

thin

light

regular

bold

fill

duotone

Library

Every Phosphor icon at the regular weight, 200 per page. Search by name, tag or category — the same metadata as phosphoricons.com — and click an icon to copy its import name.

1,512 icons · page 1 of 8

Tokens used

10 design tokens consumed by this page.

--background
Background
bg-background
--card
Card
bg-card
--muted
Muted
bg-muted
--accent
Accent
hover:bg-accent
--accent-foreground
Accent Foreground
hover:text-accent-foreground
--border
Border
borderborder-dashed
--input
Input
border-input
--ring
Ring
focus-visible:ring-ring
--foreground
Foreground
text-foreground
--muted-foreground
Muted Foreground
text-muted-foreground