Icons

Variations

Default

Use to create a static, non-interactive icon.

• Many components—like Buttons, List Groups and Headers—account for the use of icons to enhance their display. See component documentation pages for details on using and sizing icons.

Sizing

Icons are available in small and medium sizes. The default size is medium, and you can use a modifier class to make icons smaller (mds-icon--s).

• Components, like Buttons, have specific rules for which size icons to use. Always follow component guidelines on icon use.
• Always use small icon artwork for small icons and default icon artwork for medium icons. Using the wrong size icon results in undesirable scaling of the artwork.

Guidelines

Use When

• Creating static, non-interactive icons to supplement content.

Don’t Use When

• Creating an interactive icon. Instead, use the Icon-Only Button.
• Creating a toolbar of interactive icons. Instead, use the Icon-Only Button Group.

Visual Language

• Available icons are listed on the Iconography page.
• Never use IP icons to represent anything other than their established meanings.
• Medium icons are 23px by 23px.
• Small icons are 15px by 15px.
• Icons are black #000000 by default, style icons by adding a fill property in your product’s CSS.

Accessibility

• Update the <title> tag within the SVG with a text describing the icons.

Code Reference

CSS Class References

Mixin Reference

Use to vertically center an icon without influencing overall vertical spacing, particularly when cropping text to cap height and baseline using the mds-text-crop mixin.

IE11 Support

The MDS icons depend on the svg4everybody polyfill for IE11 compatibility.