Primary icons

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

  • Content: 
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

.ontario-icon {
	display: inline-block;
	width: globalFunctions.px-to-rem(24);
	height: globalFunctions.px-to-rem(24);
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */
	vertical-align: middle;
	/* Paths and strokes that overflow the viewBox can show in IE11. */
	overflow: hidden;
	margin-bottom: globalFunctions.px-to-rem(2);
}
  • URL: /components/raw/icons-primary/icons-primary.scss
  • Filesystem Path: fractal/components/components/images-and-icons/icons-primary/icons-primary.scss
  • Size: 727 Bytes
  • Content: 
    .ontario-icon{display:inline-block;width:1.5rem;height:1.5rem;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden;margin-bottom:.125rem}
  • URL: /components/raw/icons-primary/icons-primary.css
  • Filesystem Path: fractal/components/components/images-and-icons/icons-primary/icons-primary.css
  • Size: 175 Bytes

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 Ontario 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

Primary icon set

These icons represent the most commonly used concepts on our services (such as phone, menu, search).

Skip to how to use primary 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.

Icon Name Purpose or aliases Download
ontario-icon-accessibility Accessibility PNG , SVG
ontario-icon-add Add row, add field PNG , SVG
ontario-icon-add-alt Add row, add field PNG , SVG
ontario-icon-alert-error Error, alert, ! Note: Colour must be alert red (#CD0000) PNG , SVG
ontario-icon-alert-information Information, i PNG , SVG
ontario-icon-alert-success Success, confirmation. Note: Colour must be success green (#118847) PNG , SVG
ontario-icon-alert-warning Warning. Note: Colour must be warning yellow (#FCAF17) PNG , SVG
ontario-icon-arrow-up Back to top page PNG , SVG
ontario-icon-chevron-down Down PNG , SVG
ontario-icon-chevron-left Left, back PNG , SVG
ontario-icon-chevron-right Right, forward PNG , SVG
ontario-icon-chevron-up Up PNG , SVG
ontario-icon-close Close, escape PNG , SVG
ontario-icon-collapse Close accordion, collapse field PNG , SVG
ontario-icon-credit-card Payment PNG , SVG
ontario-icon-dropdown-arrow Dropdown, select box, dropdown menu, pull-down list, picklist PNG , SVG
ontario-icon-email Email PNG , SVG
ontario-icon-expand Open accordion, expand field PNG , SVG
ontario-icon-help Help, ?, questions PNG , SVG
ontario-icon-menu Menu, hamburger menu PNG , SVG
ontario-icon-more-accounts List of accounts PNG , SVG
ontario-icon-new-window Opens in a new window PNG , SVG
ontario-icon-phone Phone, call PNG , SVG
ontario-icon-remove Remove row, remove field PNG , SVG
ontario-icon-remove-alt Remove row, remove field PNG , SVG
ontario-icon-search Find, search PNG , SVG
ontario-icon-tty TTY PNG , SVG

How to use primary icons

Copy and paste the SVG code for the primary icon file into the <head> element of your HTML page. Note that you will need to include the polyfill in order to make sure that icons render properly on IE11.

  1. Include this html code (which includes the SVG glyphs) on your page:
  1. Add this html code where you want the icon to appear on the page:

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

    See the HTML tab for examples.

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

If you have any questions or feedback, please get in touch.