Iconography

Use Phosphor icons throughout. Icons inherit their colour from the text around them, so leave stroke and fill on currentColor.

npm i @phosphor-icons/react

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

<Button variant="outline">
  <GearIcon /> Settings
</Button>

With shadcn

shadcn's stock components use lucide by default. In your app, set "iconLibrary": "phosphor" in components.json so shadcn add writes Phosphor imports, or swap them after adding. Icons in app code should be Phosphor.

The components on this site were resolved that way: the internal chevrons, checks and close marks are Phosphor. The demo icons — everything in the Code tabs — are Phosphor too. Where an equivalent does not exist, the closest Phosphor glyph stands in.

Sizing

Icons inside stock components size themselves (size-4 by default, from the component's own classes). Outside components, use 16, 20 or 24px. Do not recolour with a hex; use a text colour utility.