# Icons (/cloud/desktop/icons)



## `Icon` [#icon]

```ts
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-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` [#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` [#filetypeicon-filetypeiconsprite]

```ts
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 [#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](/cloud/foundations/icons).