Topics Map > MyUW Homepage and Apps

MyUW - Using icons to customize content

This document explains what icons are supported within the MyUW app, where they display, and how to use them.

Overview

MyUW utilizes icons in a variety of design components to help users quickly identify important content or find information that's most relevant to them. The application supports both the Material Symbols icon library and custom icons as long as they meet certain specifications outlined in this document.

This document includes...

Where icons display in MyUW

If you're working with the team to add content to MyUW, icons can be added to in-app banner messages or within different tile layouts. The team will work with you to choose the most appropriate icon that also aligns with UW brand standards.

Example of icons within different tile layouts

one icon in a tile or icons side by side as a list

Example of an icon within a banner message

icon to the left of a banner message at the top of the page

Guidelines for Material Symbols

Material Symbols is a large open source icon library created and maintained by Google. MyUW does not currently support customizations to these icons like color, fill, weight, grade, optical size, etc.

We can do this 

Default Material Symbols icons

default icons are more thin and consistent

We can't do this

Customized Material Symbols

icons have different strokes and boldness applied

Guidelines for custom icons

We recommend Material Symbol icons for most scenarios, but also understand that groups may have specific requirements like a custom logo. Custom icons must meet the following criteria:

  • Icons must be an.SVG file type to ensure no loss of quality across different screen sizes. 
  • Not custom brand colors can be applied; MyUW will convert logos to gray scale and icons to UW branding.

We can do this 

ShowUW+ logo in grayscale

We can't do this

ShopUW+ logo using custom colors for their brand

For more examples of custom icons, search the MyUW app for the ShopUW+, Canvas, or Lumen tiles.



Keywords:
icons svg material icons customize symbols display 
Doc ID:
124646
Owned by:
Amanda M. in MyUW Madison
Created:
2023-03-07
Updated:
2023-09-25
Sites:
My UW-Madison Portal