Status Icons

============

Status icons are used to indicate the status of hardware and software. They come in two sizes: 16px, 22px, and use the monochrome style .

Purpose

Status icons allow a user to discern the current state of hardware and software at a glance. They reassure users that software is functional, and warn them when hardware is dysfunctional.

Design

Anatomy

Base

The base of a status icon indicates to the user what item the state of the icon represents.

::: {.container .flex} ::: {.container}

<code>Do.</code>{.interpreted-text role=&quot;noblefir&quot;} Use a simple and recognizable icon base that leaves room for additions to indicate state.
{.do} :::

::: {.container}

<code>Don't.</code>{.interpreted-text role=&quot;iconred&quot;} Don't use an overly simple base---this makes it hard for the user to identify what an icon represents. Additionally, don't use more details than you need to make something recognizable--- this doesn't leave you room for indicating states.
{.dont} ::: :::

Overlay

The overlay of a status icon indicates to the user what status the item the icon represents is in.

::: {.container .flex} ::: {.container}

<code>Do.</code>{.interpreted-text role=&quot;noblefir&quot;} Use a simple and recognizable overlay with appropriately used color to clue in the user to an icon's status.
{.do} :::

::: {.container}

<code>Caution.</code>{.interpreted-text role=&quot;ambientamber&quot;} Some overlays can be hard to identify on their own---provide appropriate context to allow a user to identify what a simple icon represents.
{.caution} ::: :::

::: {.container .flex} ::: {.container}

<code>Don't.</code>{.interpreted-text role=&quot;iconred&quot;} Don't exclusively rely on colour to indicate state---this is an accessibility problem and makes it hard to discern state.
{.dont} :::

::: {.container}

<code>Don't.</code>{.interpreted-text role=&quot;iconred&quot;} Don't use too-generic details to represent state---this makes it hard for a user to identify what an icon's state represents.
{.dont} ::: :::