This guidance is for use of icons within the WDS Icon & text banner pattern.
Icons provide users with visual signposts to help them locate, identify, and understand content. They can also add decorative delight and enhance brand personality.
To ensure that these icons are helpful to all of our website visitors, we have designed them to follow the WCAG 2.1 AA rules for digital accessibility.
Guidelines
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—Dos and don’ts
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.
Use white or light gray backgrounds only. Display two color icons on white or light gray backgrounds.
Add an icon
In the block inserter menu, select patterns > banners > icon & text white (or light gray). The banner has a default icon that you can replace with the appropriate icon from the icon library. Simply select the default icon and click “replace” to view the library. Add appropriate alt text to the icon’s Label field to describe the icon.