Documentation

Iconography

This page uses the Phosphor icon set directly. Search by icon name, preview style weights, and copy ready-to-use code.

Phosphor Catalog

1,513 icons · showing 120

Usage Guidance

Do

  • Use outline (`weight="regular"`) as the default in implementation code.
  • Use `duotone` only for heading-level icon treatment.
  • Use `fill` only for high-emphasis states.

Don't

  • Mix random icon packs in one surface.
  • Use filled icons everywhere by default.
  • Set non-tokenized icon colors in components.