Part of Components

Icons

A list of guidelines and references for icons used in specific user interface elements.

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.

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

Images of line icons of different sizes

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.