Iconography

Overview

Phosphor is a flexible icon family with over 1,000 icons available in six weights. Icons are tree-shaken by default, only the icons you import are bundled.

npm install @phosphor-icons/react

Usage

Import icons by name from the package, then render them as React components. Use Tailwind's size-* utility to control dimensions, never set width or height directly.

import { MagnifyingGlass, X, Check } from "@phosphor-icons/react"

<MagnifyingGlass className="size-4" />
<X className="size-4" />
<Check className="size-4" />

Size conventions

Styles

Phosphor ships six weights: Regular, Bold, Duotone, Fill, Light, and Thin. This system uses Regular exclusively, the default when you import directly from @phosphor-icons/react. Do not introduce other weights without a deliberate design decision.

System Icons

All icons currently in use across registry components and documentation.