Skip to content

Icons

Jump to bottom
ShannonTucker edited this page Jan 26, 2022 · 7 revisions

Icons - Current

4A - Augment

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.

Research Doc - Icons

Usage

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.

General Icons

  • Alert Icons - Scales icon frames to 26px X 26px for alert icons.

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.

Social Media Icons

Details

For inclusivity purposes:

  • ensure icons are always accompanied by a visible text label.
  • avoid using icons with conflicting meanings.
Clone this wiki locally