Pho Design System

Icons

Pho uses Tabler as its icon set — a 24px-grid stroke family whose weight is a single continuousstroke prop, so icons tune to the type they sit beside. It's a peer dependency (@tabler/icons-react) so you control the version. UI controls use the default stroke (2); marketing surfaces may drop to 1.5 for the photon.codes thin-line voice. Photon's own product and brand marks are shown first. Click any icon to copy its name.

Brand & product marks

Tabler icons74 shown · full set in @tabler/icons-react

Usage

import { IconSearch } from "@tabler/icons-react";

<Button prefix={IconSearch}>Search</Button>
<IconSearch className="size-5 text-pho-secondary" />
<IconSearch className="size-5" stroke={1.5} /> {/* marketing, thin-line */}