Iconography
Inline draws every icon from one library at one weight and four sizes. An icon takes the color of the text beside it and names an action or a state; it never decorates, and it never speaks for the brand.
One library
Every Inline icon is Phosphor, Regular weight, exactly as the library draws it. There is no second weight in product UI and no custom one-off icons without a system review.
| Property | Value |
|---|---|
| Library | Phosphor Icons, MIT license |
| Set | 1,512 icons in six weights: Thin, Light, Regular, Bold, Fill, Duotone |
| Grid | 256-unit viewBox, designed natively at 16px |
| Construction | Flattened filled outlines with fill="currentColor"; no stroke attribute |
| Weights | Hand-drawn per weight, not scaled strokes |
| Delivery | Raw SVG from @phosphor-icons/core or the first-party React package, shipped as inline SVG; no icon fonts, no PNG icons |
Phosphor replaces Lucide for three plain reasons. It is drawn at 16px, so it is optically native at the sizes an editor UI uses. Its filled-outline construction is visibly distinct from the ubiquitous 2px-stroke Feather and Lucide genre. And its vocabulary covers the product's nouns, including highlighter, note-pencil, chalkboard-teacher, and clock-counter-clockwise.
The markup carries the whole contract: a 256 viewBox, one flattened path, and fill="currentColor". There is no stroke attribute to override; set the rendered width and height and the drawing scales.
<svg width="16" height="16" viewBox="0 0 256 256"
fill="currentColor" aria-hidden="true">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
</svg>Phosphor has no stroke attribute to bind the token to; the weight is the token now, icon.weight = regular, and the token shipped in v0.14.0.
| Weight | Ships |
|---|---|
| Regular | The product weight at every size: 12, 16, 20, and 24 |
| Light | Large marketing moments only, never product UI |
| Fill | Only as the saved or selected twin of the same icon's Regular rest state |
| Thin, Bold, Duotone | Never |
The standalone Inline mark never sits in an icon slot, and icons never appear inside the logo lockups. One is identity, the other is interface.
Sizes in context
Four sizes cover the product, and a control carries exactly one of them. Sizing and density owns the mapping from control size to icon size.
icon.size.xs · chips and metadataicon.size.sm · buttons, fields, menusicon.size.md · touch and utilityicon.size.lg · status and empty statesIcon-only buttons carry an aria-label and keep the 44px effective target from sizing. Decorative icons beside their own words are aria-hidden="true".
Color and pairing
Icons inherit currentColor from the text they sit with, so state changes recolor them for free. Color never replaces words: a status or taxonomy hue appears only beside its written label.
The working set
The product vocabulary in use today, grouped by where it works. Twenty-seven icons ship today; a new icon joins the set only when a real surface needs it, and it comes from Phosphor Regular.
| Group | Icons | Where they work |
|---|---|---|
| Navigation and chrome | list x caret-down arrow-square-out | The shell: menus, dismissal, disclosure, links that leave Inline |
| Editor actions | upload-simple copy download-simple note-pencil clock-counter-clockwise lock-simple plus | The draft toolbar and document actions |
| Status and help | check check-circle warning-circle question info | Confirmation and alerts beside their written labels |
| Files | file-text file-x | Draft lists, upload results, and empty states |
| Account | user sign-out gear-six crown-simple | Profile, session, preferences, and the Pro trial |
| Education and product nouns | highlighter chalkboard-teacher student share-network chart-bar | Passage marks, professor and student surfaces, shared reports, and activity charts |
sparkle is banned in that role; it is the generic AI-feature badge and says nothing about the plan.
Rules
Seven rules keep the set one voice.
- Use Phosphor as shipped. One library in Regular weight; an edited or custom icon does not exist without a system review.
- Regular at every size. Light serves large marketing moments only, Fill only the saved or selected twin of an outline rest state; Thin, Bold, and Duotone never ship.
- One size per control. Pick from 12, 16, 20, and 24 and never enlarge an icon to add emphasis.
- Inherit the text color. Icons take
currentColorfrom their context; they are never set in their own hue. - Never color without words. Status and taxonomy hues appear only beside a written label, and yellow never fills an icon.
- Name it or hide it. Icon-only buttons carry an
aria-labeland a 44px effective target; decorative icons arearia-hidden. - Ship inline SVG. No icon fonts, no PNG icons, and never the brand mark in an icon slot.