Morningstar Brand System

The icon template key lines.
The icon asset grid, including keylines and guides for maintaining consistent shapes and proportions.
Example of a tall person icon appropriately using the top and bottom keylines.
An example of a tall icon utilizing the top and bottom outermost keylines.
Example of a wide envelope icon appropriately using left and right keylines.
An example of a wide icon utilizing the left and right outermost keylines.
Example of a very wide icon of cash expanding appropriately beyond the left and right keylines.
An example of an icon extending beyond keylines to fix proportions.
Screenshot showing selection of square butt-cap and miter joints in Illustrator
Correct configuration of strokes in Adobe Illustrator.
Examples of common shapes replicated across different icons, like curves, horizontal lines and waves.
Replicating curves, shapes and patterns unifies the visual language of our icons.
Example showing replication of the shape of a door across many structures, and one example where not replicating makes sense.
While using visual anchors can help strengthen a group of related icons, remember to remain true to what the icon is depicting. For example, the courthouse does not have a door because adding one took away from its optimal visual clarity.
Example showing a piece of paper and credit card icon using border radii that match their true nature.
Sharp corners work best to represent the true nature of a piece of paper, while rounded corners maintain the true nature of a credit card.
An icon of an arrow in a target, using line breaks to show depth
Do
use the illusion of depth on a two-dimensional plane.
An icon of a flag, using line breaks to show the separation of flagpole and fabric.
Do
use to show dissimilarity, like the fabric of a flag against the solid material of the flagpole.
An icon of a stack of papers, using line breaks to show depth.
Do
use to show overlapping and layering to create a nice moment of texture.
Example of stroke weight scaling with an icon in Illustrator.
Consider using “Scale Strokes & Effects” in Illustrator to automatically retain stroke proportions while scaling.
Example of lightbulb icon strokes scaled to match the typography they are paired with.
Examples of adjusting an icon’s stroke weight to match paired text.