Icons
Start by checking out the general pattern and guidance on when to use icons from the Canada.ca design system and refer to the Extended GC Design Library - DECD for more information on icons.
When formatting an icon:
- place the icon in line with its associated text label and center align icons.
- match the icon colour to the text it is next to.
- use solid colours only.
When sizing an icon:
- General Use Icons - Scale icon frames to be 20px X 20px to use for buttons, form fields, external or email links, and links to non-HTML files.
- Alert Icons - Scales icon frames to 26px X 26px for alert icons.
- Social Media - Scale Social Media icon frames to 32px X 32px for "share this page" buttons and scale Social Media icon frames to 44px X 44px for social media feeds.
For inclusivity purposes:
- ensure icons are always accompanied by a visible text label.
- avoid using icons with conflicting meanings.
- If additional icons are required, designers can use icons from the regular and solid libraries from Font Awesome.
- Please do not use the Figma plugin for icons.
We augmented the Canada.ca Design System with best practices for icons and imported icons from the Core GC Design Library. We also augmented these icons by including a set of general use icons that are ready to be used in buttons, forms, etc.