Iconography

Icons enhance Morningstar products by visually communicating actions, status, and feedback. The Morningstar Design System provides SVG icons to create user interfaces and controls.

Default Size

  • Display default icons at 23px × 23px.
  • Set width and height in CSS using the $mds-size-icon-m Constant.
alert
asterisk
bell-padless
bell
bookmark-fill
bookmark
bullhorn-padless
caret-circle-down
caret-circle-left
caret-circle-right
caret-down
caret-left
caret-right
caret-up
chat-bubble
check
clock-revert
clock
collapse
create-padless
crosshair
cursor
dash-horizontal
dash-vertical
document
download-cloud
download
ellipsis-circle
ellipsis-horizontal
ellipsis-vertical
envelope
esg-globe
exclaim-circle-fill
exclaim
expand
eye
file-cabinet-padless
filter-fill
filter
gear
grab-handle
group-column
group-row
group
hand
heart
home-padless
home
import
info-circle-fill
info-circle
jump-column
list
lock-close
lock-open
marker-fill-padless
marker
marquee-select
marquee-zoom
menu-padless
minus
morningstar-logo
news
object-add
open-new
paperclip-angle
paperclip
pause-circle
pencil
person-add
person-padless
play-circle
plus
print
question-circle-padless
question-circle
refresh
remove
scale
search-list
search-padless
search
share
star-fill
star
stop-circle
style-box-bottom-left
style-box-bottom-mid
style-box-bottom-right
style-box-middle-left
style-box-middle-mid
style-box-middle-right
style-box-top-left
style-box-top-mid
style-box-top-right
style-box
text-size
trash
triangle-fill-down
triangle-fill-left
triangle-fill-right
triangle-fill-up
undo
upload
wrench-padless

Small Size

  • Display small icons at 15px × 15px.
  • Set the width and height of small icons using the $mds-size-icon-s Constant.
  • Use small icons within components such as Buttons and Form text boxes to provide additional affordance to the action.
alert--s
alert-fill--s
angle-double-down--s
angle-double-left--s
angle-double-right--s
angle-double-up--s
angle-down--s
angle-left--s
angle-right--s
angle-up--s
bell--s
caret-circle-down--s
caret-down--s
caret-left--s
caret-right--s
caret-up--s
check--s
download--s
ellipsis-circle--s
exclaim--s
exclaim-circle-fill--s
expand--s
filter--s
heart--s
info-circle--s
list--s
minus--s
open-new--s
pencil--s
person-add--s
play-circle--s
plus--s
question-circle--s
remove--s
search--s
triangle-fill-down--s
triangle-fill-up--s
upload--s

How to Use

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

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

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.

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.

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

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

dont place artwork off the pixel grid when creating new icons.

Don‘t place artwork off the pixel grid when creating new icons.

Request a New Icon

The MDS team has a JIRA process to track new icon requests. Please follow the instructions listed for Requesting a New Part.

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