• HTML/CSS Available
  • Web Component In Progress
  • Last Updated


Icons enhance experiences by visually communicating meaning, actions, status, and feedback. Browse available icons on the Iconography page.



Use to create a static, non-interactive icon.

<svg class="mds-icon">
    <use xlink:href="/icons/mds.svg#heart">
  • 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.


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).

Medium (Default)
<svg class="mds-icon mds-icon--s">
    <use xlink:href="/icons/mds.svg#heart--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.


Use When

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

Don’t Use When

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.


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

Code Reference

CSS Class References

Applies to



Scales icon down to 15px by 15px.

Mixin Reference

@include icon-height-removal()

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.

©2018 Morningstar, Inc. All rights reserved. Terms of Use