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.

icon of a car collision
icon of a notebook and pen
icon of a laptop

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.

car icon house icon motorcycle icon boat icon

Glyphs

Glyphs convey functionality and actions, like logging in or chatting. They can also be smaller, one-color versions of illustrations.

chat icon person icon lock icon icon of a phone ringing

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.

grid overlayed on icon

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.

grid indicating safe area

Safe area

grid indicating padding 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.

icon indicating stroke weight and rounded corners icon indicating stroke weight and rounded corners

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.

icon of medical chart and briefcase icon of medical chart and briefcase
icon of medical chart and briefcase

Base size

icon of medical chart and briefcase icon of medical chart and briefcase