Iconography

Icons enhance Morningstar products by visually communicating meaning, actions, status, and feedback.

UI Icons

UI icons are used to construct controls and enhance other components.

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

Default Size

alert
alert
bell
bell
bell-padless
bell-padless
bookmark
bookmark
bookmark-fill
bookmark-fill
bullhorn-padless
bullhorn-padless
caret-circle-down
caret-circle-down
caret-circle-left
caret-circle-left
caret-circle-right
caret-circle-right
caret-circle-up
caret-circle-up
caret-down
caret-down
caret-left
caret-left
caret-right
caret-right
caret-up
caret-up
chat-bubble
chat-bubble
check
check
clock
clock
clock-back
clock-back
collapse
collapse
create-padless
create-padless
crosshair
crosshair
cursor
cursor
dash-horizontal
dash-horizontal
dash-vertical
dash-vertical
document
document
download
download
download-cloud
download-cloud
ellipsis-circle
ellipsis-circle
ellipsis-horizontal
ellipsis-horizontal
ellipsis-vertical
ellipsis-vertical
envelope
envelope
exclaim
exclaim
exclaim-circle-fill
exclaim-circle-fill
expand
expand
eye
eye
file-cabinet-padless
file-cabinet-padless
folder-close
folder-close
funnel
funnel
funnel-fill
funnel-fill
gear
gear
grab-handle
grab-handle
group
group
group-column
group-column
group-row
group-row
hand
hand
heart
heart
home
home
home-padless
home-padless
import
import
info-circle
info-circle
info-circle-fill
info-circle-fill
jump-column
jump-column
list
list
lock-close
lock-close
lock-open
lock-open
marker
marker
marker-fill-padless
marker-fill-padless
marquee-select
marquee-select
marquee-zoom
marquee-zoom
menu-padless
menu-padless
minus
minus
news
news
object-plus
object-plus
open-new
open-new
paperclip
paperclip
paperclip-angle
paperclip-angle
pause-circle
pause-circle
pencil
pencil
person
person
person-group
person-group
person-padless
person-padless
person-plus
person-plus
plus
plus
print
print
question-circle
question-circle
question-circle-padless
question-circle-padless
refresh
refresh
remove
remove
scale
scale
search
search
search-list
search-list
search-padless
search-padless
share
share
stop-circle
stop-circle
text-size
text-size
trash
trash
triangle-fill-down
triangle-fill-down
triangle-fill-left
triangle-fill-left
triangle-fill-right
triangle-fill-right
triangle-fill-up
triangle-fill-up
undo
undo
upload
upload
wrench-padless
wrench-padless

Small Size

alert--s
alert--s
alert-fill--s
alert-fill--s
angle-double-down--s
angle-double-down--s
angle-double-left--s
angle-double-left--s
angle-double-right--s
angle-double-right--s
angle-double-up--s
angle-double-up--s
angle-down--s
angle-down--s
angle-left--s
angle-left--s
angle-right--s
angle-right--s
angle-up--s
angle-up--s
bell--s
bell--s
bookmark--s
bookmark--s
bookmark-fill--s
bookmark-fill--s
caret-circle-down--s
caret-circle-down--s
caret-circle-left--s
caret-circle-left--s
caret-circle-right--s
caret-circle-right--s
caret-circle-up--s
caret-circle-up--s
caret-down--s
caret-down--s
caret-left--s
caret-left--s
caret-right--s
caret-right--s
caret-up--s
caret-up--s
chat-bubble--s
chat-bubble--s
check--s
check--s
clock--s
clock--s
document--s
document--s
download--s
download--s
ellipsis-circle--s
ellipsis-circle--s
envelope--s
envelope--s
exclaim--s
exclaim--s
exclaim-circle-fill--s
exclaim-circle-fill--s
expand--s
expand--s
eye--s
eye--s
folder-close--s
folder-close--s
funnel--s
funnel--s
funnel-fill--s
funnel-fill--s
gear--s
gear--s
grab-handle--s
grab-handle--s
heart--s
heart--s
home--s
home--s
info-circle--s
info-circle--s
info-circle-fill--s
info-circle-fill--s
list--s
list--s
minus--s
minus--s
open-new--s
open-new--s
pause-circle--s
pause-circle--s
pencil--s
pencil--s
person--s
person--s
person-group--s
person-group--s
person-plus--s
person-plus--s
play-circle--s
play-circle--s
plus--s
plus--s
question-circle--s
question-circle--s
remove--s
remove--s
search--s
search--s
trash--s
trash--s
triangle-fill-down--s
triangle-fill-down--s
triangle-fill-up--s
triangle-fill-up--s
upload--s
upload--s

IP Icons

IP icons represent Morningstar’s intellectual property and should not be used to represent anything other than their established meanings. For example, the star icon represents the Morningstar Star Rating and the style-box icons are used to communicate the investment style of a group of holdings.

  • Some IP icons are only available in the Morningstar Symbols font, see the Typography page for more information

Default Size

performance-arrow-down
performance-arrow-down
performance-arrow-up
performance-arrow-up
pillar-negative
pillar-negative
pillar-neutral
pillar-neutral
pillar-positive
pillar-positive
play-circle
play-circle
quartile-empty
quartile-empty
quartile-first
quartile-first
quartile-fourth
quartile-fourth
quartile-second
quartile-second
quartile-third
quartile-third
sector-basic-materials
sector-basic-materials
sector-communication-services
sector-communication-services
sector-consumer-cyclical
sector-consumer-cyclical
sector-consumer-defensive
sector-consumer-defensive
sector-energy
sector-energy
sector-financial-services
sector-financial-services
sector-healthcare
sector-healthcare
sector-industrials
sector-industrials
sector-real-estate
sector-real-estate
sector-technology
sector-technology
sector-utilities
sector-utilities
size-aggregate-large-cap
size-aggregate-large-cap
size-aggregate-mid-cap
size-aggregate-mid-cap
size-aggregate-small-cap
size-aggregate-small-cap
star
star
star-fill
star-fill
style-aggregate-core
style-aggregate-core
style-aggregate-growth
style-aggregate-growth
style-aggregate-value
style-aggregate-value
style-box
style-box
style-box-bottom-left
style-box-bottom-left
style-box-bottom-mid
style-box-bottom-mid
style-box-bottom-right
style-box-bottom-right
style-box-middle-left
style-box-middle-left
style-box-middle-mid
style-box-middle-mid
style-box-middle-right
style-box-middle-right
style-box-top-left
style-box-top-left
style-box-top-mid
style-box-top-mid
style-box-top-right
style-box-top-right
sustainability
sustainability

Small Size

performance-arrow-down--s
performance-arrow-down--s
performance-arrow-up--s
performance-arrow-up--s
pillar-negative--s
pillar-negative--s
pillar-neutral--s
pillar-neutral--s
pillar-positive--s
pillar-positive--s
quartile-empty--s
quartile-empty--s
quartile-first--s
quartile-first--s
quartile-fourth--s
quartile-fourth--s
quartile-second--s
quartile-second--s
quartile-third--s
quartile-third--s
sector-basic-materials--s
sector-basic-materials--s
sector-communication-services--s
sector-communication-services--s
sector-consumer-cyclical--s
sector-consumer-cyclical--s
sector-consumer-defensive--s
sector-consumer-defensive--s
sector-energy--s
sector-energy--s
sector-financial-services--s
sector-financial-services--s
sector-healthcare--s
sector-healthcare--s
sector-industrials--s
sector-industrials--s
sector-real-estate--s
sector-real-estate--s
sector-technology--s
sector-technology--s
sector-utilities--s
sector-utilities--s
size-aggregate-large-cap--s
size-aggregate-large-cap--s
size-aggregate-mid-cap--s
size-aggregate-mid-cap--s
size-aggregate-small-cap--s
size-aggregate-small-cap--s
star--s
star--s
star-fill--s
star-fill--s
style-aggregate-core--s
style-aggregate-core--s
style-aggregate-growth--s
style-aggregate-growth--s
style-aggregate-value--s
style-aggregate-value--s
style-box--s
style-box--s
style-box-bottom-left--s
style-box-bottom-left--s
style-box-bottom-mid--s
style-box-bottom-mid--s
style-box-bottom-right--s
style-box-bottom-right--s
style-box-middle-left--s
style-box-middle-left--s
style-box-middle-mid--s
style-box-middle-mid--s
style-box-middle-right--s
style-box-middle-right--s
style-box-top-left--s
style-box-top-left--s
style-box-top-mid--s
style-box-top-mid--s
style-box-top-right--s
style-box-top-right--s
sustainability--s
sustainability--s

How to Use

MDS references icons via an SVG icon sprite with the following syntax:

heart
<svg class="mds-icon">
    <use xlink:href="/icons/mds.svg#heart">
        <title>heart</title>
    </use>
</svg>

Interactive

To create an interactive icon, use an Icon-Only Button.

Icon-Only Button
<button class="mds-button mds-button--icon-only" type="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--right">
        <use xlink:href="/icons/mds.svg#person-padless">
            <title>User</title>
        </use>
    </svg>
</button>

To create a toolbar of interactive icons, use an Icon-Only Button Group.

Icon-Only Button Group
<div class="mds-button-group mds-button-group--icon-only">
    <button class="mds-button mds-button--icon-only" type="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#bell-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#create-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#question-circle-padless"> </use>
        </svg>
    </button>
    <button class="mds-button mds-button--icon-only" type="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#person-padless"> </use>
        </svg>
    </button>
</div>

Accessibility

  • Include <title> if no text is provided in the same context level. For example, Icon-Only Button.
  • Add ARIA aria-hidden=”true” attribute or omit <title> if relevant text is available. For example, Button With Icon.

Sizing

When using icons outside of components like Buttons or List Groups, always use the icon sizing constants to set the width and height of default and small icons to conform to their required dimensions.

Icon Size Sizing Constant Value

Default

$mds-size-icon-m

23px

Small

$mds-size-icon-s

15px

  • Avoid scaling icons to sizes other than listed above to prevent undesirable scaling of the icon artwork.

Design Approach

Icon Grid

Simple, clear, and consistent icons require the rigor of underlying grid.

Construction & Visual Style

Icons use simple geometric shapes and 1-pixel strokes.

Figure 1. Design process for the gear icon.

The gear icon is an excellent example of a complex icon that is derived from simple geometric shapes. The grid guides the positioning of the shapes. Once on the grid, those shapes are refined and combined. Removing what isn’t necessary allows the icon’s essential form to shine through.

When designing a new icon, always consider it in the context of the entire icon family. For example, the gear icon is more complex than others, but following our construction and style guidelines allow it to harmoniously pair with others.

Do use right angles, a consistent 1-pixel stroke, and square terminals.
Do use right angles, a consistent 1-pixel stroke, and square terminals.
Don‘t use an inconsistent stroke and rounded terminals.
Don‘t use an inconsistent stroke and rounded terminals.
Do use minimal detail to reduce the icon to its essential form.
Do use minimal detail to reduce the icon to its essential form.
Don‘t add superfluous detail to the icon from.
Don‘t add superfluous detail to the icon from.
Do enable “Pixel Preview” and “Snap to Grid” when creating new icons.
Do enable “Pixel Preview” and “Snap to Grid” when creating new icons.
Don‘t place artwork off the pixel grid when creating new icons.
Don‘t place artwork off the pixel grid when creating new icons.

Saving Icon Artwork as SVG

To ensure that icon artwork is optimized to work with the MDS iconography system, always take the following steps when saving individual icons as files.

1. Create your artwork using the appropriate Adobe Illustrator icon template file. Place your icon on the Artwork layer and make sure to save a pre-production version of your file.

2. In the Layers palette, delete all but the Artwork layer.

Layers palette in Illustrator.

3. Outline all strokes, and use the Unite option in the Shape Modes section of the Pathfinder tool to convert the icon to a compound shape.

Pathfinder tool in Illustrator

4. Select the compound shape and set the fill to solid black #000000.

5. Save as an SVG.

Deselect the following in the "SVG Options" dialog:

  • Preserve Illustrator Editing Capabilities
  • Responsive (Under "More Options")
SVG Options dialog in Illustrator.

6. Optimize the SVG using SVGOMG:

  1. Upload your pre-optimized SVG
  2. Leave all settings at their default
  3. Save your optimized SVG

7. Confirm that the SVG file contains no irrelevant code by opening the .svg file in any text editor. It should not contain any references to Adobe Illustrator, hex codes, or class or id names. For example:

<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
    <path d="M20 19.3l-4.9-4.9c1.2-1.3 1.9-3.1 1.9-5 0-4-3.4-7.4-7.5-7.4S2 5.4 2 9.5 5.4 17 9.5 17c1.9 0 3.6-.7 4.9-1.8l4.9 4.9.7-.8zM3 9.5C3 5.9 5.9 3 9.5 3S16 5.9 16 9.5 13.1 16 9.5 16 3 13.1 3 9.5z" />
</svg>

The icon artwork is now ready for use in MDS.

Code Reference

CSS Class References

Class
Applies to
Outcome

.mds-icon--s

.mds-icon

Scales icon down to 15px x 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.

IE 11 Support

The MDS icons depend on the svg4everybody polyfill for IE 11 compatibility.

Custom Icons

Custom Icons Not in MDS

If your product team uses custom icons that are not included in MDS, you should implement them within your own application using the same SVG sprite method as the System. To ensure that your custom icons are optimized for the MDS, use the saving icon artwork as SVG process.

Adding Custom Icons to MDS

If you believe that custom icons in your product should be added to MDS, first identify one or more additional teams that have a need for the icon. Ensure that your custom icon follows our design approach and prepare your icon artwork using the saving icon artwork as SVG process.

Submit the icon to be added to MDS by speaking to Jonathan Duncan, the iconography segment owner, or by emailing designsystem@morningstar.com. Once the new icon has been reviewed, the System team will work with you to include the new icon in an upcoming release.

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