Icons
One registry of Arcadia glyphs, outline with a filled form for the active state, plus the brand mark.
Registry
Every glyph is an outline with a filled form for the active state.
Click an icon to copy its name. Names describe the job (new-chat, compact, plan), not the drawing, and the search knows the usual words for each: try delete, gear or undo.
Icons are always decorative (aria-hidden): the label belongs on the control. Colour is currentColor, set by the parent from the --icon-* ladder, and the stroke stays 1.25px at every size (vector-effect: non-scaling-stroke).
Outline and filled
Outline is the default.
Fill: the selected sidebar or settings row, the selected tab and segment, a toggle that is on (Fast, Contributor, the sidebar filter, Multitask), the composer's mode chip, a pinned chat's pin.
Never fill: actions (copy, trash, New chat as a button, Unpin, every menu item), radio and checkbox rows whose check already says it, hover, focus, an open popup's trigger, status glyphs (their tone carries the meaning) and chevrons. The two forms swap instantly, never crossfade.
The filled form means one thing: this is the current place, or this state is on. The components that know the state draw it: the current row of a nav, the selected tab or segment, a pressed toggle, and a chip or mark that only exists while its state holds.
Sizes
Five sizes on the icon scale.
| Size | Sample | Token | Value |
|---|---|---|---|
| Knob | Takes | Default | Sets |
|---|---|---|---|
Ref<IconSizeToken> | var(--icon-base) | Width and height, unless the size prop fixes them. |
An icon inherits --icon-size from its parent unless it pins one. The outline keeps a 1.25px non-scaling stroke across the whole scale (the drawings are designed at 1.5 on 24, which reads thin below 20px); a 24px size would take 1.5px. A filled form has no stroke: its weight is the drawing's.
Brand mark
ArcadiaMark is the Arcadia pine: two arms and a pine, the only filled, multi-path glyph in the kit.
--brand-mark, an icon rank, so it sits back in the chrome.| Knob | Takes | Default | Sets |
|---|---|---|---|
Ref<IconSize> | var(--icon-lg) | Height; the width follows the mark. |
Its height comes from --brand-size (default --icon-lg) and its colour from --brand-mark, which a product theme may set.
Adding an icon
Every glyph is Arcadia's, drawn into the kit as data. The kit owns the names, so adding one is a kit change, never a product one.
Draw it on the 24 grid: live area 2 to 22, a 1.5 design stroke, round caps and joins, squircle corners on frames, and the off-slash rule (a full corner-to-corner slash the drawing meets on one side). Paste the stroked drawing as outline and the solid one as filled, with every paint attribute stripped; a glyph that is one solid shape in both states (the send button's stop) is solid. No script, no dependency: glyphs.test.ts holds the grammar. isIconName(value) narrows a string to IconName at runtime, for names that arrive as data. Add the new name's search words to the site's icon aliases so people can find it.
Icon
namerequired- IconName
size- "xs" | "sm" | "base" | "lg" | "xl"
- Omit to inherit --icon-size from the parent component (Button, MenuItem, …).
filled- boolean
- Draw the filled form: the active state. Kit components set it from their own state (a current row, a selected tab or segment, a pressed toggle); set it yourself only for a standalone indicator (a pinned chat's pin). Names without a filled form stay outline.
rootStyle- RootStyle<IconKnobs>
- Typed StyleX override: layout and
--icon-size. className- string
- The part name a parent gives the icon it renders (
ui-menu-item-chevron), for its own rules.
Rest props go to SVG element props.
title- string
- Accessible name. Without it the mark is decorative (aria-hidden).
size- "sm" | "md" | "lg"Default"md"
- The mark's height on the icon scale:
sm12px,md16px,lg20px. rootStyle- RootStyle<BrandMarkKnobs>
- Typed StyleX override: layout and
--brand-size. className- string
- The part name a parent gives the mark it renders, for its own rules.
Rest props go to SVG element props.