Skip to main content

Icons

Material Symbols

The Material Symbols (Sharp style) icon set can be used for web and digital applications.

How to use Material Symbols icons

  • In a CMS dropdown menu or text field
    1. Search for an appropriate icon from the Material Symbols web page.
      • If you use the Filters menu, ensure that Material Symbols and Sharp are selected in the Style section.
        Style filter settings
    2. Click on the icon; a sidebar menu will open on the right hand side.
    3. Select the Android tab (ignore the Android Studio instructions link). Copy the icon code name.
      Copy the icon code name
    4. Enter this code name in the CMS text field or dropdown menu (note that dropdown menus may contain legacy icon names; these can be ignored/replaced).
  • Embedding in inline body content (HTML knowledge required)
    1. Search for an appropriate icon from the Material Symbols web page.
      • If you use the Filters menu, ensure that Material Symbols and Sharp are selected in the Style section.
        Style filter settings
    2. Click on the icon; a sidebar menu will open on the right hand side.
    3. In the Web tab, scroll down to the code block labelled Inserting the icon. Copy the HTML code.
      Copy the HTML code
    4. In the CMS WYSIWYG editor, select the Source Code icon and paste the code into the appropriate spot. If you need assistance with this, please contact webteam@ontariotechu.ca.

Custom icons

OT Icon set

Custom icons will no longer be created except in the case of brand-related graphics. The majority of custom icons with a prefix of "icon_" have been retired or mapped to an equivalent icon in the Material Symbols icon set. The following Ontario Tech brand elements, external logos and legacy icons are the only custom icons that should be used.

Ontario Tech brand and identities


icon_book_ot

icon_chevron_right

icon_iecs-bear

icon_feather

icon_paw

Social media and external logos


icon_canvas

icon_cc_mastercard

icon_cc_visa

icon_social_facebook

icon_social_instagram

icon_social_linkedin

icon_social_snapchat

icon_social_tiktok

icon_social_twitter

icon_social_youtube

icon_social_x

Legacy custom icons


icon_atom

icon_curling

icon_diploma

icon_easel

icon_pi