Interim Icon Guidance for WDS Pilot Program

This document can be used by pilot partners until a final icon pattern is deployed in the WDS. There is supporting text/information in the following layouts that explain how to build these interim patterns in the existing platform.

Icons may be used in the following contexts:

  • To convey or enhance meaning 
  • To communicate university-specific information—for example, a mortarboard icon for graduation
  • To aid users in navigating or scanning pages by identifying section heads and other markers
  • To highlight callout information such as accolades and statistics
  • To highlight items in a list or steps in a process
  • To support brand identity 

Tips for using icons

Connect icons to content. Icons should be directly relevant to the information you’re communicating and be used to complement content, not distract from it.

Scale icons proportionally. Icons should always remain at the same scale in relation to each other to create a consistent look. Do not modify icons. 

Use icons consistently. Don’t use two different icons to represent the same topic, and don’t use the same icon to convey multiple meanings. To ensure that communications are consistent across the university, use only approved icons from the icon library. 

Do not use icons as a central or large graphic element. Icons should only be used to supplement a fact, header, or text block. They should not be used as the visual focal point of a page or a branding element.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra

Link goes here

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra

Link goes here

Create an icon pattern

Select patterns > banners > image & text white. Upload your icon as a .png and size to the 80 pixel minimum or 100 pixel maximum using the block settings to the right. Make sure your icon is aligned center within its container. Icons on white or light gray should be two-color. Icons on smokey should be one-color.

Link goes here

Don’t

Do not use icons as a central or large graphic element. Icons should only be used to supplement a fact, header, or text block. They should not be used as the visual focal point of a page or a branding element.