Icons enhance Morningstar products by visually communicating actions, status, and feedback. The Morningstar Design System provides SVG icons to create user interfaces and controls.
Always horizontally and vertically center icons within the pixel 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.
Don't use an inconsistent stroke and rounded terminals.
Do use minimal detail to reduce the icon to its essential form.
Don't add superfluous detail to the icon from.
Do enable “Pixel Preview” and “Snap to 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.
Figure 1. Design process for the 
