Icon

Our icons are inspired by the visual language of the U-mark. Icons may be used to as a support element on content or listing pages. They are always accompanied with text to aid in navigation and to support messaging. 2-color icons are preferred but there are some cases where a 1 color icon may need to be used.

When to use

  • Smaller scale support elements

  • Elements on content pages, listing pages or news articles

  • To aid in navigation

  • To signal a call to action

When not to use

  • As the hero or dominant visual on a page

  • As decoration

  • If there is already 1 style of icons being used, do not mix 1 and 2 color icons on the same page

Icon types

For detailed information and examples of 2-color and 1-color visit the brand standards site.

2-color brand icon

1-color brand icon

Google Material utility icons

Icon sizing and placement

Icons should be 10kb or less and are delivered at 3 different sizes

  • 30 x 30px for Google Material utility icons
  • 48 x 48px and 70 x 70px for branded icons
  • By default 70 x 70px icons will resize to 48 x 48px in mobile, otherwise icons retain their dimensions across devices

Icons have flexibility around placement and alignment

  • They can be left-aligned or center-aligned
  • They can be placed to the left or right of content or stacked on top of content

Smart icons

Brand has over 160 icons that each have 4 different versions, that’s over 640 icon files! To limit that many files in our system, we create smart icons to use in the icon components. We do this by embedding color classes for each icon variation into the SVG code of a single icon. Then an author can switch the icon variation easily within the styles panel of the icon block. Which means we only need to upload 1 file to get all 4 variations.

Learn how to create smart icons (pptx)

Authoring notes

Icons may be placed using an image or icon component. It is recommended to place icons using the icon or icon block component to help with more consistent page building.

The icon component has all icon types, sizes and alignments available, and you can toggle the available variations on/off in the styles panel.

Related elements