Icons and SVG images

Icons are graphic images or symbols that represent an object, an action, or an idea. The primary goal of using icons should be to:

  • Help the reader absorb and process information more efficiently. This is done by incorporating white space and using icons that won’t distract from the content, but rather augment it.
  • Enrich even minimal content by giving it more substance, enabling effective communication without being verbose.
  • Draw attention to your content, not to diminish or replace it.

You can use icons as an image file, or you can insert the html code using the library of icons that are available for calgary.ca. Alternatively, you can use Scalable Vector Graphics (SVG), which are larger, somewhat more detailed and stylized for calgary.ca.

See also Icon subject layout component.

Icon/SVG best practices

  • Use icons where there is a clear function or where words won’t work.
  • Icons should never be used decoratively.
  • Don’t create a new icon if one already exists.
  • Icons should support your content, not replace your content.
  • Icons should be universally understood.
  • Icons (when used in multiples) should have a uniform or consistent design style.
  • Don’t use an icon to represent a complex message or idea.
  • Don’t use an icon if the message can be communicated in another way.
  • Don’t overuse icons. Use icons sparingly in print and marketing communication.
  • Do not place icons over a photo or busy textured background.
  • Do not change the size or colour of accessibility icons. These are based on universal symbols and the minimum size is 32px. The colour should always be #005589 blue or rgb(0,85,137). No other background colour should be used.
  • SVG files may be used exactly like a regular image, using <img> tags. They can also be set as background images. Download the individual SVG file and use it as you would for a regular image.

Accessibility requirements for icons

Like images, icons and SVGs should use "alt tags" to help describe the purpose of the non-text element to screen reader aides.

Alignment with corporate branding

All icons, SVGs and images must be approved by Brand before use in any corporately branded materials (documents, presentations, webpages, etc.). The icons and SVGs available in the cicon library and SVG library have already been approved by Brand.

Icon/SVG sizes

Icons should not be set larger than 32px × 32px, as the icon fonts have been designed and developed to accommodate up to this size.

Icon sizes
Default size Large size

16px x 16px

Class: N/A

32px x 32px

Class: cicon-lg

SVG sizes
Default size Large size

64px x 64px

Class: cimg

128px x 128px

Class: cimg cimg-lg

Icon colours

  • Icons can appear in ONLY the corporate red, corporate grey, black or white.
  • It's preferred for icons to be the same colour as the text on the page with a white background (some icons are coloured by default e.g. company logos, accessibility icons, map icons).
  • In the case where there is a solid coloured background (corporate primary colours), the icon colour should be inverted to create the greatest contrast (e.g. white icons should be used on black or other dark-coloured backgrounds).
  • In some special cases, icons can appear in a colour from the safety metallic palette.

SVG images can be downloaded in two different colours: dark grey (#333) or white (#FFF).

If you require images in a different colour or you do not see an image suitable for your needs, please contact us.

Icon/SVG styling

The points below should be followed in order for icons to have a consistent look.

  • Icon fonts have been designed with a solid fill; while larger illustrations have been designed with an outlined style.
  • Your thick line weight is always three points, and the thin line weight should be one point five points
  • You don’t have to use two line weights — using a single line weight is okay.
  • Don’t “fill in” icons. The City of Calgary iconographic style incorporates an “open” look and feel.
SVG line weight example with six point line (thickest line of icon) and three point line (50% of thickest line weight)

Request new icons/SVGs

If you don't see an icon or SVG that suits your needs, you can search for examples on sites like Font Awesome. Once you know what icons you need:

  1. Submit a ticket under Brand review, include links to desired new icons.
  2. Wait for Brand approval.
  3. Submit ticket under Web and Digital, make sure to attach the icon files and note "Development to add the icons to library".

Icon font package for non-calgary.ca sites

In order to add our specific icons code, you must have our icon package. The icon package is available for download upon request and requires approval from the Customer Service & Communications Advertising division manager.

The City of Calgary icon package includes the Font Awesome library. Due to distribution terms in the Font Awesome license, the City of Calgary icon package is separated into two folders.

  • cicon - The City’s icon font created by City staff
  • font-awesome - The Font Awesome icon-font customized for placement, class names, and font-names to differentiate from the original Font Awesome files

How to import the icon font CSS to your page

  1. Import the following files and directories from the icon package into your project.
cicon font-awesome
  • style.css
  • all font files in the /fonts directory
  • optional IE7 CSS and JavaScript support files in the /ie7 directory
  • style.css
  • all font files in the /fonts directory
  • optional IE7 CSS and JavaScript support files in the /ie7 directory
  1. Add the icon font stylesheets to the <head> section in your HTML. You may optionally choose to package the files together using a CSS compiler.

<link href="css/cicon/style.css" rel="stylesheet">
<link href="css/font-awesome/style.css" rel="stylesheet">