Icon

StableAccessible

Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content.

Usage
Code
Accessibility
Customisation

Usage

Example

See the the icon library to browse a full list of HDS icons.

Principles

An icon should always serve a distinct, easily understandable purpose. Icons should not be used solely for decoration.
An icon should preferably be accompanied with a text label to give context for interpretation. The meaning of icons by them self can be ambiguous and change depending on the context. Label can be omitted only if the meaning of the icon is commonly established, or can be easily interpreted from the context, e.g. volume buttons in video playback.
An icon and its related content or label should have the same meaning. Conflicting and ambivalent interpretations can have a negative effect on usability and accessibility.

Variations

Default

Icon sizes

Icon visible for assistive technologies

If the icon has a meaning or is used as an interactive element, it should not be hidden from assistive technologies. This is important if, for example, you are using icons as buttons, although we encourage to use a proper Button component in such case.