Icons

Overview

Alberta.ca uses line style icons based on universal symbols. These icons follow the Government of Alberta’s corporate identity guidelines, which incorporates light text weights and plenty of negative space for a clean and modern look.

• Find examples in Section 1.7 of the Visual Identity Manual.
• Download the Icon set.

Usage guidelines

Accessibility

Icons on links and buttons must have a strong contrast with the background colour.

Size and positioning

• Set user interface icons at a 2-pixel stroke and bounded within a 24-pixel square container.
• To maintain consistent optical weight throughout the set, and relative to the fonts used, icons convert to outlines (fills) to scale properly. They may require repositioning and resizing before conversion to line up with text properly.
• Theme related icons however, scale within a 48-pixel square container and may work with
• <h1> tags on top level pages.

Dimensions

Types of icons

• User interface icons – allows you to manipulate navigation or wayfinding.
• Alert icons – for messages and alert boxes.
• File type icons – describes in-browser media and downloadable files.
• Social media icons – original brand format and positioned within the same container size as the icon set.
• Theme related icons – corresponds to ministry, service, program, or theme, and set at a larger container size.

Image card with icon

Use the following specifications when adding an icon to a card with an image component:

• minimum pixels: 750 x 422
• centre icon in the card with approximately 54 pixels of padding above and below the icon
• background colour: #9AD7F9 at 40% opacity
• foreground (icon) colour: #002B49 at 100% opacity at 10 points
• colour combination has a contrast ratio of 11.69:1 – above the WCAG2.2 accessibility score of 4.2:1.

Examples

• Funding for non-profits
• Modernizing primary health care – Progress on 2-year plan

Icon and text

Use the following specifications when building an icon and text component:

• Minimum pixels: 750
• centre icon in the circle with approximately 175 pixels of padding around the icon
• background colour: #9AD7F9 at 40% opacity
• foreground (icon) colour: #002B49 at 100% opacity at 10 points
• Colour combination has a contrast ratio of 11.69:1 –above the WCAG2.2 accessibility score of 4.2:1.

Examples

• Major capital projects
• Commercial water conservation