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=&ldquo;noblefir&rdquo;} Use a simple and recognizable icon base that leaves room for additions to indicate state.
{.do} :::

::: {.container}

<code>Don't.</code>{.interpreted-text role=&ldquo;iconred&rdquo;} Don't use an overly simple base&mdash;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&mdash; 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=&ldquo;noblefir&rdquo;} 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=&ldquo;ambientamber&rdquo;} Some overlays can be hard to identify on their own&mdash;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=&ldquo;iconred&rdquo;} Don't exclusively rely on colour to indicate state&mdash;this is an accessibility problem and makes it hard to discern state.
{.dont} :::

::: {.container}

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