Icons

The design system uses a standardised set of open-source icons.

On this page:

• How to use icons
• Technical considerations
• Icon library
• Creating your own icons
• Accessibility

How to use icons

Effective use of iconography can help users navigate your site or service, by providing an additional visual cue to illustrate functionality. 

They are particularly useful for navigation elements and calls to action.

Icons should be used sparingly and properly spaced, to avoid overcrowding your interface and creating cognitive overload for the user.

Technical considerations

When using icons or images, you should be mindful of:

• File size, which can affect page load speed and performance
• How icons and images will display at different screen sizes and zoom levels

We recommend using the Scalable Vector Graphics (SVG) file format for icons. SVG file sizes are smaller, and vector graphics will rescale smoothly regardless of screen size or zoom level.

Icons should generally accompany, not replace, a visible text label to provide context. If an icon does not have a visible text label (for example, at smaller screen sizes), you should use aria-label to provide an invisible label that can be read by a screen-reader.

Icon library

The B.C. Design System uses Font Awesome as its basic icon library. Font Awesome is open source, and provides an extensive library of icons suitable for use in digital interfaces.

Font Awesome offers an expanded library of icons as a paid upgrade. Due to licensing constraints, the design system will not include Font Awesome Pro icons. To use the expanded library, you will need to procure a Font Awesome Pro license.

• Learn how to integrate Font Awesome into your project

Creating your own icons

If you are creating your own icons, ensure that they are visually consistent with the broader B.C. government visual identity. We recommend consulting with GCPE Graphic Communications and your ministry communications shop. 

We invite you to contribute icons created for government projects to the design system for other teams to use.

Accessibility

Icons can help users who face language or cognitive barriers to navigate an interface more easily. You should review WCAG's supplemental guidance on effective use of icons.

Refer to the simplified WCAG guidance to help you ensure your product is accessible:

• Enhance visual contrast for user interface and graphics (WCAG Success Criterion 1.4.11, Level AA)
• Make sure comoponents can be read and used by assistive technology (WCAG Success Criterion 4.1.2, Level A)