Images and icons: Canada.ca design
Images are visual content that complement or enhance text, including photographs, graphics, drawings, or diagrams.
On this page
When to use
Follow the image guidance in the Canada.ca Content Style Guide for information on:
- the purpose of images online
- functional vs decorative images
- alternative text and long descriptions
What to avoid
- Do not use images as stand-alone clickable elements providing navigation or functionality
- Be careful when using AI-generated images or generic stock photos, as they can undermine user trust and feel less authentic
- Do not place images in ways that disrupt content flow or user tasks
- avoid breaking up paragraphs or fragmenting related text
- position images where they support the content
- Do not use images or videos copied from other websites
- Do not embed text directly into an image
- text on feature images may be difficult to read on a small screen
- images should instead focus on photography and illustration
- incidental snippets of text, such as text appearing on photographed objects, wordmarks in logos, #hashtags, etc., are acceptable
- live HTML text (selectable and accessible) may be overlaid onto portions of images and banners as long as there is appropriate contrast and visibility
Content and design
- Size and place images appropriately for the context they are in:
- images should either support tasks or, if decorative, not interfere with tasks
- Where images include people, they should reflect Canada’s diverse population
- Images must appear square or rectangular; round or oval images may not be used
- Where captions and attributions are required, place them immediately under the image they refer to
- Images must only be clickable when accompanied by a text link to the same destination
- Generally, align links, captions or attributions with the left edge of the image they refer to
- note there are some design patterns that are exceptions to this rule
Licensing
- Institutions are responsible for the proper use of images purchased through a licensing agreement
- if the image is licensed only to one institution, it can only be used by that institution on Canada.ca
- read the licensing agreement carefully for any other restrictions on the use of purchased images
- Verify that you have the appropriate rights to publish images on Canada.ca. Specifically:
- get a signed release from a person (or legal guardian) before you publish any image of them
- have documentation showing you have the appropriate rights to publish licensed (or rights-managed) images
- Images that are no longer licensed for use by an institution must be removed from Canada.ca
- Purchase the highest-resolution available for an image, to be able to use the image in any size
Icons
Icons are symbols for communicating actions or states on Canada.ca.
How to use
You can use icons when assisting people with site functionality, for example:
- form fields
- alerts
- external or email links
- links to non-HTML files like a PDF or Excel files
Icons can also help draw attention to key information and make the page easier to scan. Use them sparingly and choose icons that are widely recognized and easy to understand.
Ensure icons are always accompanied by a text label.
Place an icon in line with its associated text label.
What to avoid
Do not use icons:
- to add decoration to navigation labels or headings
- to modify existing mandatory patterns and components
- to add emphasis to text
Implementations
Latest changes
- Updated the images guidance to include information about the appropriate use of icons.
Page details
- Date modified: