Design system
Docs
Desktop

Icons

components/icons.tsx and file-type-icon.tsx: semantic icon names over central-icons-desktop, and Pierre file identity

Icon

import { Icon, type IconName } from "../components/icons.tsx";

packages/desktop/src/renderer/src/components/icons.tsx. From its header:

One leaf owns the desktop's icon family. Feature components choose a semantic name; they never sketch SVG paths or import individual glyphs.

PropTypeDefaultDescription
nameIconNameOne of ~65 semantic names in GLYPHS (checkmark, chevron-down, pencil, model-anthropic, …).
sizenumber16
labelstring"Announced to assistive tech. Without it the icon is decorative and hidden."
variant"outlined" | "filled""outlined"Each row of GLYPHS is an outlined/filled pair.

The table in the file is semantic name → Central Icons name, sorted by semantic name, with static member access "so bundlers can tree-shake." Add a row there; do not import a glyph in a feature file.

Stroke weight, from the file:

Central Icons draw a 1.5-unit stroke on a 24-unit grid, which renders too thin at the 10–17px sizes the desktop uses. Every frame carries the data-nyte-icon hook so the global stylesheet can thicken those strokes; StyleX cannot reach into the glyph's paths itself.

theme/global.css thickens to 1.875 units on [data-nyte-icon].

PanelToggleIcon

{ side: "left" | "right"; visible: boolean }. A custom glyph for the sidebar and workbench toggles: "A visible panel draws a full-height divider inside the frame; a hidden one shrinks it and nudges it toward the edge it collapsed into." Passed as icon to IconButton.

FileTypeIcon, FileTypeIconSprite

import { FileTypeIcon, FileTypeIconSprite } from "../components/file-type-icon.tsx";

File identity is Pierre's concern; size and color remain Nyte schema choices. One shared sprite keeps rows cheap, while exact basenames and compound extensions stay inside Pierre's resolver instead of becoming desktop lore.

FileTypeIconSprite is mounted once per screen (the thread screen does it); FileTypeIcon references a symbol from it. A FileIconTone map assigns a color per language family (typescript → blue, markdown → green, …).

Two icon packages

The desktop uses central-icons-desktop (@central-icons-react/round-outlined-radius-2-stroke-1.5). @nyte-ai/ui and this site use central-icons (radius 1). Do not mix them on one surface. See Foundations › Icons.