Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconPrinciplesAccessibilityUsageDemos & APIKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Icon

StableAccessible

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

See the icon library documentation for more information and 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.

Accessibility

  • For icons that do not have a visual text label but are important must be given a text alternative using the WAI-ARIA definition aria-label or aria-labelledby. See WCAG 2.1 Text Alternatives guideline for more information.
  • If the icon has a visual text label associated with it, the icon can be hidden from assistive technologies with aria-hidden="true". It prevents screenreaders repeating the same information twice (visual text followed by the icon description).
  • If the icon is only decorative, it should always be hidden from assistive technologies with aria-hidden="true".
  • The colour contrast between the icon and its background must comply with AA Level contrast ratios.

Usage

Default

Core code example:

<i class="hds-icon hds-icon--face-smile" aria-hidden="true"></i>

React code example:

<IconFaceSmile aria-hidden="true" />

Icon sizes

Core code example:

<i class="hds-icon hds-icon--face-smile hds-icon--size-xs" aria-hidden="true"></i>
<i class="hds-icon hds-icon--face-smile hds-icon--size-s" aria-hidden="true"></i>
<i class="hds-icon hds-icon--face-smile hds-icon--size-m" aria-hidden="true"></i>
<i class="hds-icon hds-icon--face-smile hds-icon--size-l" aria-hidden="true"></i>
<i class="hds-icon hds-icon--face-smile hds-icon--size-xl" aria-hidden="true"></i>

React code example:

<IconFaceSmile size="xs" aria-hidden="true" />
<IconFaceSmile size="s" aria-hidden="true" />
<IconFaceSmile size="m" aria-hidden="true" />
<IconFaceSmile size="l" aria-hidden="true" />
<IconFaceSmile size="xl" aria-hidden="true" />

Demos & API

Core

Icons in hds-core

React

Icons in hds-react