Morningstar Design System

Icons

Variations Design Guidelines Code Reference Accessibility

Icons
updated

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

    2.21.0

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

Variations Design Guidelines Code Reference Accessibility

Variations

Default

Use to create a static, non-interactive icon.

favorite
HTML Web Component 
<svg class="mds-icon">
    <use xlink:href="/icons/mds.svg#heart">
        <title>favorite</title>
    </use>
</svg>
<mds-icon name="heart" title="favorite"></mds-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 modifier classes or props to make them smaller or larger.

Small
favorite
Medium (Default)
favorite
Small
Medium (Default)
HTML Web Component 
<svg class="mds-icon mds-icon--s">
    <use xlink:href="/icons/mds.svg#heart--s">
        <title>favorite</title>
    </use>
</svg>
<mds-icon name="heart--s" title="favorite"></mds-icon>
  • 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.

CSS

Class References

Class
Applies to
Outcome

.mds-icon--s

.mds-icon

Scales icon down to 15px by 15px.

Mixin Reference

@include mds-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.

Web Component

Props

When setting props as attributes on a custom HTML element, use kebab-case instead of camelCase.

Prop
Type
Validation
Default
Description

additionalClass

String

—

—

A space-separated list of class names that will be appended to the default mds-icon class.

name

String

Required
One of: [MDS Icon Name]

—

A string containing a valid MDS icon name.

See the iconography page for available icons.

title

String

—

—

Describes the icon for assistive technologies. Used only when there is no accompanying text with the icon, e.g., a Button with icon.

Using the Icon Sprite

The MDS icon sprite (mds.svg) must be injected into any page where the <mds-icon> web component is used. Previous implementations of icons in MDS allowed loading of the icon sprite via an external reference, but that method has proved unreliable when used alongside custom elements.

Usage Examples

Setting name via props:

<mds-icon name="heart"></mds-icon>

Setting name and title via props:

<mds-icon name="question-circle--s" title="FAQ"></mds-icon>

Browser Support

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

Implementation

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