Our iconography
Illustrations
Illustrations can support content. Or they can communicate a coverage type, a policyholder tool, or a customer benefit. They should always follow the design guidelines below.
Product icons
Product icons are used as logos for our insurance products (auto, home, motorcycle, etc.). Their color palette is limited to indigo with filled-in shapes.
Glyphs
Glyphs convey functionality and actions, like logging in or chatting. They can also be smaller, one-color versions of illustrations.
Colors
To create more dynamic icons, we use 4 colors: indigo, bright mint, light mint, and white. Use bright mint to emphasize important elements. Try to balance the amount of bright mint and white in each icon.
#372357
#A8F6D8
#E5FDF4
#FFFFFF
Grid
The grid is the most important component of building the icons. It provides structure and ensures consistency in every icon, regardless of the creator.
They're created in a 144x144px area, divided into a 16x16 grid.
Layout
Since these icons can live inside a circle, the safe area is restricted to a 10x10 space in the middle of the grid. The strokes are aligned to the outside, so they may be slightly outside of the safe area.
Safe area
Padding
Strokes & corner radius
Strokes are 3px, aligned to the outside, and terminate with a round cap and round corners. The corner radius is 6px.
When creating vehicle icons, use a stroke weight of 5 to help give the tires more definition and weight.
Scaling
The base icon size is meant to be easily scaled up and down. Be sure to scale strokes and corners. And check that the result remains on the pixel grid. Icons that aren't pixel fitted lose their punch and clarity.
Base size