🚧 This website is work in progress 👷
icons
Icons

Icons are used to visually communicate core parts of the product and available actions.

Overview

There are different icons used in the Design system:

  • Core Icons
  • Humanitarian icons
  • Pictograms
  • Fontawesome icons

Font Awesome icon library

Bridge also incorporates FontAwesome 6 free for icons.

It’s possible to use all FontAwesome icons as well all free humanitarian icons by OCHA.

Figma file

Anatomy (Figma)

When adding an instance of the Icon AW6 it’s possible to select multiple variations.

Figma file

It’s possible to swap icons simply changing the name of the variation in the property panel. The name has to be the one AWESOME font adopt.

Figma file

When to use

  • Use icons to enhance user experience by providing visual cues or representing actions, concepts, or content.
  • Use icons consistently throughout the interface to maintain coherence and aid in recognition.

When not to use

  • Avoid using icons without clear meaning or association with the intended action or content.
  • Avoid overusing icons, especially when text would be more appropriate for clarity or accessibility.

Alternative components

If an icon doesn't adequately convey meaning or if text is preferred for clarity, consider using text labels or tooltips instead.

Accessibility

  • Ensure that icons are accompanied by descriptive text or tooltips to provide context for users who may rely on screen readers.
  • Use accessible colors and contrast ratios for icons to ensure visibility and legibility for all users.
  • Test icons with screen readers and other assistive technologies to verify their accessibility.

Reference

Edit this page