Icons

Parlemen uses Phosphor. Its rounded terminals match the clay shapes, and it ships fill and duotone weights so one family covers UI, state and illustration.

npm i @phosphor-icons/react

Three weights, three jobs

Bold

Default. Buttons, nav, inputs. Matches our heavy type.

Fill

Active or selected. Sidebar item, liked heart, current tab.

Duotone

Decorative, 32px and up. Feature cards, empty states.

Avoid thin weights

Thin, light and regular look starved next to puffy surfaces and 800-weight type.

vs

Color

Icons inherit currentColor, so they always follow the role of their parent. Duotone uses the same color at 20% for the back layer.

Fast

Delightful

Snappy

Friendly

SavedCheck thisFailedHeads up

Sizing

Inside Button, Navbar and Sidebar, icons are sized to 1.15em so they scale with the text. Elsewhere pass size.

16
20
24
32
48

Usage

import { HeartIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react";

<Button><PaperPlaneTiltIcon />Send</Button>

{/* Active state uses fill */}
<HeartIcon weight={liked ? "fill" : "bold"} />

{/* Sidebar swaps to fill automatically */}
<SidebarItem icon={HouseIcon} active>Dashboard</SidebarItem>

{/* Server components: import from the ssr entry */}
import { HouseIcon } from "@phosphor-icons/react/dist/ssr";

Wrap your app in IconProvider from components/ui/icon so client icons default to bold. Server icons from /dist/ssr do not read context, so pass weight="bold" there.