Secondary icons

Use simple, easy-to-understand icons from Material Design to help guide users.

Guiding principle: Only include elements that have a purpose.

General icon guidance

Icons are a visual representation of a single and simple object, action or idea. If you need to communicate more complicated concepts, consider an illustration or infographic.

The Ontario Design System icon library

The Ontario Design System icon library is made up of two sets:

  • Primary – these represent the most commonly used concepts on our services (such as phone, menu, search)
  • Secondary – these represent concepts that are used often but not as frequently (such as attach, print, map pin)

If you need a different icon

If the concept you need to represent isn’t already in our icon library, you can choose one from the Google Material Design:

Please let the design system team know any time you need an icon that isn’t in our icon library. If we find the same ones are being commonly used, we’ll consider adding them to the library.


Why we chose these icons

The Ontario Design System follows the Material Design system icon design principles and uses icons from Material Design’s icon library.

We’ve chosen the icons for our library based on proven best practices that all icons we use must be:

  • a visual representation of a single object, action, or idea
  • easily recognizable and understandable
  • likely to be interpreted in the same way by users
  • used to represent “universal recognition” as opposed to “universal representation”
    • for example, a wheelchair is often used for accessibility even though it does not represent all types of disabilities
  • useful
    • icons should help guide the user to accomplish their task – don’t use icons purely for visual interest

Secondary icon set

These icons represent concepts that are used often but not as frequently as ones in the primary set (such as attach, print, map pin).

Skip to how to use secondary icons.

All icons follow the naming pattern “ontario-icon-purpose”. You can search for specific icons using your browser’s find command (ctrl+f for PC, ‘⌘+f’ for Mac)

Download all icons as PNG

Secondary icon categories

We’ve organized the secondary icons into these categories:

Accounts and web applications
Icon Icon name Purpose or aliases Download
ontario-icon-account PNG , SVG
ontario-icon-bookmark-off Favourite, save PNG , SVG
ontario-icon-bookmark-on Favourite, save PNG , SVG
ontario-icon-cloud PNG , SVG
ontario-icon-password-hide PNG , SVG
ontario-icon-more-vertical PNG , SVG
ontario-icon-notification Alert PNG , SVG
ontario-icon-settings PNG , SVG
ontario-icon-password-show PNG , SVG
ontario-icon-tag PNG , SVG

Interactions
Icon Icon name Purpose or aliases Download
ontario-icon-attach Attachment, file PNG , SVG
ontario-icon-calendar Date, date picker PNG , SVG
ontario-icon-clock Time, schedule PNG , SVG
ontario-icon-delete Delete, remove PNG , SVG
ontario-icon-document Attach, file type, file PNG , SVG
ontario-icon-download PNG , SVG
ontario-icon-edit PNG , SVG
ontario-icon-export PNG , SVG
ontario-icon-favourite-off Like, save, heart PNG , SVG
ontario-icon-favourite-on Like, save, heart PNG , SVG
ontario-icon-filter Filter PNG , SVG
ontario-icon-grid Change view PNG , SVG
ontario-icon-list Change view PNG , SVG
ontario-icon-location-off Turn off location, gps PNG , SVG
ontario-icon-location-on Find location, gps PNG , SVG
ontario-icon-pin-location-off Find location PNG , SVG
ontario-icon-pin-location-on Find location PNG , SVG
ontario-icon-lock-on Safe, password PNG , SVG
ontario-icon-lock-off Safe, password PNG , SVG
ontario-icon-next PNG , SVG
ontario-icon-previous PNG , SVG
ontario-icon-print Print PNG , SVG
ontario-icon-save Save PNG , SVG
ontario-icon-sort Sort PNG , SVG
ontario-icon-timer Stopwatch PNG , SVG
ontario-icon-upload PNG , SVG
ontario-icon-vpn-key PNG , SVG

Multimedia
Icon Icon name Purpose or aliases Download
ontario-icon-camera PNG , SVG
ontario-icon-media-fast-forward Speed up PNG , SVG
ontario-icon-media-fast-rewind Back PNG , SVG
ontario-icon-microphone-off Record PNG , SVG
ontario-icon-microphone-on Record PNG , SVG
ontario-icon-media-pause PNG , SVG
ontario-icon-photo PNG , SVG
ontario-icon-media-play PNG , SVG
ontario-icon-replay PNG , SVG
ontario-icon-media-stop PNG , SVG
ontario-icon-video PNG , SVG
ontario-icon-wifi PNG , SVG

Communication and social media
Icon Icon name Purpose or aliases Download
ontario-icon-facebook PNG , SVG
ontario-icon-facebook-alt PNG , SVG
ontario-icon-flickr PNG , SVG
ontario-icon-instagram PNG , SVG
ontario-icon-linkedin PNG , SVG
ontario-icon-linkedin-alt PNG , SVG
ontario-icon-live-chat PNG , SVG
ontario-icon-rss-feed PNG , SVG
ontario-icon-share PNG , SVG
ontario-icon-text-message sms, text message PNG , SVG
ontario-icon-twitter PNG , SVG
ontario-icon-twitter-alt PNG , SVG
ontario-icon-youtube PNG , SVG

Payment
Icon Icon name Download
ontario-icon-interac-en PNG , SVG
ontario-icon-interac-fr PNG , SVG
ontario-icon-interac-en-alt PNG , SVG
ontario-icon-interac-fr-alt PNG , SVG
ontario-icon-mastercard PNG , SVG
ontario-icon-mastercard-alt PNG , SVG
ontario-icon-visa PNG , SVG

Maps and transportation
Icon Icon name Download
ontario-icon-transport-bicycle PNG , SVG
ontario-icon-transport-bus PNG , SVG
ontario-icon-transport-car PNG , SVG
ontario-icon-map PNG , SVG
ontario-icon-transport-walk PNG , SVG
ontario-icon-wheelchair PNG , SVG

Feedback
Icon Icon name Download
ontario-icon-vote-like PNG , SVG
ontario-icon-vote-dislike PNG , SVG
ontario-icon-sentiment-1 PNG , SVG
ontario-icon-sentiment-2 PNG , SVG
ontario-icon-sentiment-3 PNG , SVG
ontario-icon-sentiment-4 PNG , SVG
ontario-icon-sentiment-5 PNG , SVG

How to use secondary icons

Copy and paste the SVG code for the main icon file. Include this in your code. Note that you will need to include the polyfill in order to make sure that icons render properly on IE11.

Load the secondary icons svg store from a self-hosted file or our CDN. Note that you will need to include the polyfill in order to make sure that icons render properly on IE11.

  1. Load the icons, there are two options:

  2. Add the polyfill that fixes SVGs on IE and other older browsers.

  3. Use the html SVG in your code

    • If self-hosting the ontario-icons-secondary.svg, use the code below and adjust the xlink:href to the correct path:

    • To use our hosted secondary icons SVG file set the xlink:href, for example to: https://designsystem.ontario.ca/icons/ontario-icons-secondary.svg#ontario-icon-account

  4. Add CSS class ontario-icon from the SCSS or Compiled CSS tab to your project’s CSS file.


Technical specifications (for both primary and secondary icons)

File type SVG
Size Minimum 16px
Maximum H1 (40px on desktop, 32px on mobile)
Hit size If the icon is clickable, the hit area should be at least 48px by 48px (see radio buttons for an example of where the hit size is larger than the element)

If the icon is a standalone component, it should have a hit area of 48px by 48px. If the icon is clickable and in line with text, it should be the same size as the font.
Colour Black: #1A1A1A
White: #FFFFFF
Grey: #666666
Blue (if a link):
  • Normal: #0066CC
  • Hover: #004E99
  • Visited: #551A8B

Exceptions: some icons come with colours hard-coded into them. Do not override hard-coded icon colours. Examples include:
  • alert icons (red, green and yellow)
  • Visa, Mastercard, and Interac icons

Help improve this page

If you have other suggestions or advice or any questions on icons, the design system team would love to hear from you.