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="noblefir"} Use a simple and recognizable
icon base that leaves room for additions to indicate
state.{.do}
:::
::: {.container}<code>Don't.</code>{.interpreted-text role="iconred"} 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="noblefir"} 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="ambientamber"} 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="iconred"} 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="iconred"} 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}
:::
:::
