Icons

Use icons for decorative purposes or to present important visual information for the viewer. Choose icons that are familiar and easy to recognize.

The U-M Library Design System uses outlined and rounded icons from Material Icons in Google Fonts.

If you aren’t sure which icon to use, can’t find an appropriate one, or have any questions about using them, please contact our team.

Using icons

We typically set the icon size equal to our base font size (16px). However, icons may be 16 to 24px in size depending on the product.

Icons that present meaningful information must have a descriptive name available to users of assistive technology. Reach out if you need help.

For designers

Material icons are available in the U-M Library Design System Figma file as a component. They default to 16px but can be resized up to 24px to meet the needs of your individual project.

For developers

Use the icons as an inline SVG or icon fonts with markup and CSS. Which one you choose needs to be informed by whether the icon is decorative or meaningful.

Inline SVG

Download the desired SVG from Google Fonts and add it to your markup. Can be used for both decorative and meaningful icons. 

For accessibility:

  • If the icon is decorative, add the following inside the SVG tag: role=img focusable=false aria-hidden=true
  • If the icon is meaningful, add the role=img to the SVG and then nest a title tag.

For more information on using a descriptive title tag, see Deque’s guidance for creating accessible SVGs.

Using Icon Fonts via Google Fonts

Can only be used for decorative icons. 

  1. Add Icon Fonts to the head of the HMTL file.
  2. Add the icon in your markup. Be sure to use aria-hidden="true" to the span as it tells screen readers to ignore the icon. Otherwise, it will announce the content and often it’s not meaningful.

See the code example below for the markup to use to add the icons using Google fonts.

Styling the icons

The .material-design class assigns the styling to the icons. The base size is 24px and you can override it with font-size: 1rem.

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.