Last Updated: July 28, 2020

Icons

Iconography uses images and symbols to represent an idea visually. They communicate a message and should be distinct and informative.

Implementation

The design system supports using the Font Awesome icon library. Use these icons in your application by:

• Hosting the font library locally in your project source files
• Using npm if you are using Vue, Angular, or React components

Icon	Label	Class Name
	Search	<i class="fas fa-search"></i>
	Menu Bars	<i class="fas fa-bars"></i>
	Envelope	<i class="fas fa-envelope"></i>
	Phone	<i class="fas fa-phone"></i>
	External Link	<i class="fas fa-external-link-alt"></i>
	Upload	<i class="fas fa-upload"></i>
	Up Arrow	<i class="fas fa-chevron-up"></i>
	Right Arrow	<i class="fas fa-chevron-right"></i>
	Down Arrow	<i class="fas fa-chevron-down"></i>
	Left Arrow	<i class="fas fa-chevron-left"></i>

Design Guidance

• Icons should be used sparingly throughout the application to provide clarity and reduce cognitive load on users.
• Icons do not have globally recognized meaning, and will vary based on people’s past experiences. Always test the icons you use to make sure they are understandable
• Provide a text label with icons to clarify meaning
• Do not provide a text label when the icon is decorative
• Use solid icons rather than outline icons

Read more about Icon Usability - Nielsen Norman Group

Accessibility

Screenreaders

• If your icon has a text label you should hide the icon from screen readers by using the aria-hidden="true" attribute

• If your icon doesn’t have a text label, you’ll need to manually add a few things so that your icon is appropriately accessible

  • Hide the text label from screen readers by using the aria-hidden="true" attribute
  • Provide a text alternative inside a (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.
  • Include a title attribute on the icon to provide a tooltip for sighted mouse users.

Read more about Font Awesome Accessibility

Icon Size

The click or tap area around an icon should be a minimum of 44px by 44px (WCAG 2.1 AAA)

Colour Contrast

• Icons must have a 3:1 color contrast ratio (WCAG 2.1 AA) with the background colour.

Prototyping with Font Awesome Icons

Download the Font Awesome Icons for your desktop to use in your mockups and prototypes.