Pictograms help tell our story by visualizing key concepts and information in an approachable and human way.
Used in a supportive role, our pictograms help emphasize and navigate important information and make concepts simple and easy to understand. Pictograms should be used for storytelling and not for navigation.
Pictograms can have a wide range of meanings. They can be more literal, representing a specific object, or more conceptual, representing a broader idea.
Individual pictograms may also haveseveral meanings and be used to represent more than one type of information.
Pictograms should appear only on White or MetLife Light Gray backgrounds. When using on gray backgrounds, the colors should never blend into the background color.
Pictograms will be available as SVG and PNG file formats.
Pictograms should be used in PNG and SVG file formats. SVGs are crisp and clear at any resolution while offering the smallest file, while PNGs cannot be scaled without introducing a relative amount of pixelation. PNGs are available at standard and @2x sizes. If using PNGs on websites that may be viewed on high-definition mobile or desktop displays, we recommend that the @2x PNG be used so the pictogram does not appear pixelated.
Pictograms help tell a story by visualizing key concepts and information in an approachable and human way. Use them as a supportive visual element connecting or in place of content in order to help tell a story.
General Pictogram Misuse
Avoid using in a hero.
Avoid using on a gray background unless the pictogram does not use gray in the outline.
Form and Scale
Pictograms are drawn on a 20x20 grid using simple, graphic forms. When drawing pictograms, avoid using strokes or small shapes that can get lost at small sizes.
Highlights and Shadows
Use highlights and shadows at 0-45- and 90-degree angles to suggest a top-left light source. Sometimes, shadows may have a curved element to suggest depth and help illustrate a form.
Pictograms should be drawn at eye-level, using a front-facing perspective. You should never use an angled perspective or dimension by illustrating the top, bottom, or side of an object.
Avoid dimension and angled perspectives.
Always use an eye-level, front-facing perspective.
While some pictograms may have more or less of a particular color, our pictogram library has an even balance of MetLife Blue, MetLife Green and neutral colors. MetLife Dark Blue and MetLife Medium Gray may be used for shadows, while MetLife Yellow may be used as an accent.
Advanced Color Customization & Balance
When using multiple pictograms together, too much of a particular color or too much MetLife Blue and MetLife Green can feel too heavy and saturated. If necessary, advanced users may adjust the pictogram colors, adding more neutrals to create a better overall balance.
Note: Pictograms are available only in full color. If design limits the amount of colors that can be used (such as a gray background), pictograms should be modified in post- production.
Common motifs are elements that are used again and again with small changes like the addition of a badge or additional iconography.
Badges and Symbols
Add-ons to base pictograms, for example adding a check mark to a shield, should be done with consistent shapes across the whole suite of pictograms. When making a pictogram like this, copy the badge and symbol, without alteration, from an existing icon to ensure uniformity of shape and scale.Common motifs are elements that are used again and again with small changes like the addition of a badge or additional iconography.