Government of British ColumbiaGovernment of British Columbia

DevHub

beta

Topic

Design System

British Columbia Government Design System for Digital Services

Status

Last Updated: February 1, 2019

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:

IconLabelClass Name
magnifying glassSearch<i class="fas fa-search"></i>
barsMenu Bars<i class="fas fa-bars"></i>
envelopeEnvelope<i class="fas fa-envelope"></i>
phonePhone<i class="fas fa-phone"></i>
external linkExternal Link<i class="fas fa-external-link-alt"></i>
UploadUpload<i class="fas fa-upload"></i>
up arrowUp Arrow<i class="fas fa-chevron-up"></i>
right arrowRight Arrow<i class="fas fa-chevron-right"></i>
down arrowDown Arrow<i class="fas fa-chevron-down"></i>
left arrowLeft 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)

Three icons that visually show a target area of 44px surrounding the icon

Colour Contrast

Two versions of the same icon with different contrast ratios

Prototyping with Font Awesome Icons

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

  • Create an Issue

Design System
Content