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.
| Prop | Type | Default | Description |
|---|---|---|---|
name | IconName | One of ~65 semantic names in GLYPHS (checkmark, chevron-down, pencil, model-anthropic, …). | |
size | number | 16 | |
label | string | "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-iconhook 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.