Section 06 · Foundations

Iconography.

Phosphor at the Regular weight. Three sizes — 16 / 20 / 24. Mapped to recurring concepts so the same shape always means the same thing.

The library

Use Phosphor via @phosphor-icons/vue in the app and @phosphor-icons/web in Starlight. Regular weight only. Bold for the live indicator dot. Never mix weights inside one screen.

installnpm install @phosphor-icons/vue
// in main.ts
import { PhosphorIcons } from "@phosphor-icons/vue";
app.use(PhosphorIcons, { weight: "regular" });

Sizes

16pxinline within text · prefix on a button at 13.5/14px label

20pxdefault · sidebar items, button icons at 15/16px label, table cell prefix

24pxapp-rail · empty-state hero · large card decoration

32px+empty states only · never on a dense surface

Concept mapping

One concept, one icon. Don't swap a "save" icon for "floppy" in one place and "download-simple" in another. The list below is the contract.

Probe (HTTP/SMTP/...)PlugsConnected · all probes

ProjectFolderOpen · sidebar group

ChainLinkSimple · multi-step flows

HistoryClockCounterClockwise

MITM proxyShieldCheckered

LibraryBooks

Send / ProbePaperPlaneTilt

SaveFloppyDisk · never DownloadSimple

CopyCopy · two-page glyph

Delete (destructive)Trash · with --vp-color-danger

SettingsGearSix · the six-toothed variant

Help / docsQuestion

External linkArrowSquareOut

Success / OKCheckCircle · only beside text · never alone in a row

Error / Failed probeXCircle · with --vp-color-danger

Warning / soft failWarningCircle · with --vp-color-warn

Live / streamingsmall filled circle · not an icon · use the pulse dot

Don't

Don't use coloured Phosphor (Duotone, Fill). We control colour with currentColor. Multi-tone glyphs fight the protocol palette.
Don't decorate with icons. An icon prefixing every paragraph is noise. Icons earn their slot only when they accelerate scanning (lists, sidebars, button verbs).
Don't invent app-specific glyphs from SVG. Exception: the dagger logomark and protocol micro-tags. Those are brand surface, not iconography.

Custom: protocol micro-tags

The 3-letter monospace tags (HTTP SMTP IMAP LDAP) are our protocol icons. Always prefer them over a Phosphor glyph for "this row is an HTTP request." See Components · Badges & tags.