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.

Jump to section:

• Icon/SVG best practices
• Accessibility requirements for icons
• Icon/SVG sizes
• Icon colours
• Request new icons/SVGs
• Icon font package for non-calgary.ca sites

• 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.

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

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.

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

• 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.

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.

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".

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

1. Import the following files and directories from the icon package into your project.

2. 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.
   

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