# Icon

> A mark from the app's icon library, in a chosen color and size, optionally driven by Logic variables.

**Icon** draws one mark from the app's icon library — about 2,770 named glyphs, the
same set the Button's face, the LED's states and the screens' own marks pick from — or
one of your own imported icon assets. The mark can be static, or either of its two
slots (the glyph and the color) can follow a Logic variable, so a valve symbol flips
between marks or an indicator recolors as the plant moves. It is a *Media* component;
a new one occupies 2 × 2 cells.

## Content {#content}

| Field | What it does | Values | Default |
|---|---|---|---|
| Icon (search by name or tag) | Narrows the glyph grid below by the library's names and curated search tags ("wifi, save, warning…"). Every picker in the app searches the library the same way, so a mark found in one is found in all. | Free text | empty |
| The glyph grid | The default glyph, chosen by pressing a cell. Shown statically, and the fallback whenever the bound variable resolves nothing. | Any library glyph | the Star glyph |

An icon *asset* you imported (a single-path SVG under Logic ▸ Assets ▸ Icons) can also
stand in the glyph slot — it is drawn in the same box, at the same stated size, and
takes the same ink where it inherits color; a drawing that paints itself keeps its own
colors.

## Data {#data}

Both bindings confirm themselves in the panel as what they stand for — the bound
variable's current mark drawn in the station's font, the bound color painted beside its
hex — because a code point written out is a tofu box and a hex is a word nobody can
picture.

| Field | What it does | Values | Default |
|---|---|---|---|
| Glyph from Icon variable | A rooted address of an Icon-output Logic variable. Bound, the glyph slot follows whatever mark the variable resolves to — the value-to-icon logic lives in the variable, not here (see the [Logic page](logic)). `(none)` clears the bind and returns the slot to the static glyph. | An Icon variable, or `(none)` | `(none)` |
| Color from Color variable | A rooted address of a Color-output Logic variable, driving the color slot the same way. Independent of the glyph slot, so a fixed glyph can take a logic-driven color or vice versa. | A Color variable, or `(none)` | `(none)` |

A bound slot that fails to read (unresolved address, or bad quality) keeps the
configured default instead of drawing the variable's stale value, and the component
wears the shared bad-reading mark. A bound color is validated as a safe paint before it
reaches the screen; text that is no color leaves the configured color in force.

## Color and size {#color-and-size}

| Field | What it does | Values | Default |
|---|---|---|---|
| Color | The glyph's ink as a hex color. Empty follows the theme's own foreground, which already answers to light and dark. | `#RRGGBB`, or empty | empty (theme) |
| Size | The glyph's size in device-independent pixels. The same number sizes an SVG asset's box, so both kinds of mark answer the field the same way. | Any number | 40 |

## Advanced {#advanced}

| Field | What it does | Values | Default |
|---|---|---|---|
| Glyph code (advanced) | The raw glyph string behind the picker, for pasting a code point directly. | Raw text | the chosen glyph |

Icon is a display component: it commands nothing and never wears the lock mark. The
shared Appearance, Identification, Position and layer and Actions sections are described
on the [components page](components#the-shared-property-sections).