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.
Use a simple and recognizable icon base that leaves room for additions to indicate
state.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.
Overlay
The overlay of a status icon indicates to the user what status the item
the icon represents is in.
Use a simple and recognizable
overlay with appropriately used color to clue in the user to an icon's
status.Some overlays can be hard to identify on their own — provide appropriate context to allow a
user to identify what a simple icon
represents.
Don't exclusively rely on
colour to indicate state — this is an accessibility problem and makes it
hard to discern state.Don't use too-generic details to represent state — this makes it hard for a user to identify
what an icon's state represents.
