Foundations
Iconography
One icon library for the whole product: Phosphor. 1,200+ icons across six consistent weights — never mix in an icon from another set, and never ship emoji as icons.
Library (28 icons wired in lib/icons.tsx)
House
User
Users
ChartBar
ShieldCheck
Lightning
Globe
Wallet
Bell
Gear
Lock
CreditCard
ChatCircle
DeviceMobile
Rocket
Clock
Weights
regular
bold
duotone
fill
| Weight | When to use it |
|---|---|
| regular | Default — used everywhere unless a rule below applies |
| bold | Active or selected states (e.g. the current nav item) |
| duotone | Decorative feature icons (e.g. homepage section cards) |
| fill | Status glyphs (e.g. a filled bell for "has notifications") |
Usage rules
| Rule | Detail |
|---|---|
| Single source | Every icon comes from @phosphor-icons/react. No mixed libraries, no emoji in shipped product. |
| Server components | Import from the /dist/ssr subpath in any file that might render on the server — the default export breaks server-side page-data collection. |
| Size | Icons default to 20px inline with text, 24px in isolation (buttons, nav). |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug iconography to manage the usage rules above from the CMS.