BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Icons

Descriptive icons to help our customers navigate our digital content. Consistent placement, style and usage are required so users can interpret them correctly.

Overview

We created our web icons style from our pictograms – our most commonly used form of illustration. We use web icons to help our customers navigate our digital content because lists of links (product links, dashboards or web tools) can be overwhelming. Web icons are not interchangeable with pictograms.

 

Corporate responsive layout, centered logo

Style

Our style is Simple, Relevant, Approachable and Minimal. We believe objects should be culturally relevant, simple to understand, approachable and reduced to the visual essentials.

Web icons can have multiple meanings – they can be literal, representing a specific object or conceptual, representing a broader idea. Icon categories and file names in our web icon suite give details about the icon’s original meaning and can be used to determine reuse and avoid conflicts in application.

Basics

Web icon assets come in multiple sizes, colorways and file formats for use in a variety of web applications.

Colorways

Web icons are available in two-color and one-color variants. Two-color icons: dark blue/blue (default), where dark blue represents shadow and blue represent a highlight, and blue/green (hover), where green replaces blue and blue replaces dark blue. For aesthetics, you may need to reverse the colors of these icons. One-color icons: blue (default) –> green(hover); glyph icons: dark grey(default) –> green(hover).

Use two-color icons where the icon will appear larger than 24 pixels. Blue, one-color icons are used in applications where the icon will appear 24 pixels or smaller, and one-color glyph icons are used at 16 pixels for basic UI elements.

Do not modify or change icon colors to white for use on color backgrounds. Please see “Background Colors” below for more information.

Corporate responsive layout, centered logo

2-color icons (25px or larger):

  • • Have default and hover states
  • • Use for promotional content, product pages, mega menu, etc.
Corporate responsive layout, centered logo

1-color icons (24px or smaller):

  • • Color is #0090DA
  • • Hover state is #A4CE4E
  • • Use for menu, forms etc.

Corporate responsive layout, centered logo

1-color icons (16px):

  • • Color is #333333
  • • Hover state is #007ABC
  • • Use for utility menu, on-page interactions.

Asset Scale

Web-ready assets are available in up to four different sizes, depending on the intended application. Use the version that is larger than or equal to the rendered dimensions of your application.

Large (120px): Two-color icons optimized for use at sizes between 120 pixels and 64 pixels square. Used for promotional content, product pages, mega menus, etc.

Medium (64px): One-color icons optimized for use at 64 pixels to 24 pixels square.

Small (24px): One-color icons optimized for use at 24 pixels square.

Smallest (16px): One-color icons optimized for use at 16 pixels square. Used for utility menus and in-line element interactions, ie, edit, delete, etc.

Corporate responsive layout, centered logo

Background Colors

Web icons should appear only on White or MetLife Light Gray backgrounds.

Corporate responsive layout, centered logo

File Format

Web icons are available 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, it is recommended that the @2x PNG be used so the icon does not appear pixelated.

Usage

Using web icons in a consistent manner helps us develop trust with our customers and improves their overall experience. Below you’ll find some essential usage guidelines that will help you make sure our web icons are used consistently across the company.

Basic guidelines

  • • Web icons are for navigational purposes and should always function as a link to a relevant download or web page.
  • • One- and two-color icons should be accompanied by a text label that clearly identifies the linked content.
  • • Pictograms, not web icons, are used for storytelling.
  • • Multiple web icons cannot be combined in a single application.
  • • Web icons should never be distorted, flipped, or rotated.
  • • Icons should only appear on white and light gray (#f2f2f2).

Scale

Proper icon scaling will help ensure the icons appear as crisp as possible on displays ranging from mobile to desktop. Suggested sizes are 120px, 64px, 32px, 24px, and 16px (for utility glyph icons only).

Corporate responsive layout, centered logo

Choosing the correct icon variant

Two-color icons can become difficult to identify at size 24 pixels and below. One-color icons are visually simplified so they can communicate clearly at small sizes. If you want to use 24 pixels or below, please use the one-color variant.

Corporate responsive layout, centered logo
Corporate responsive layout, centered logo

Design

This section includes some design considerations for work that requires the creation of a new web icon. Only advanced users of MetLife’s design system should create web icons. Every web icon should be approved by the MetLife Brand team before use.

Form and Scale

Web icons are drawn on a 120px (two-color), 24px (one-color), or 16px (glyph icons) square grid using simple, graphic forms. For greatest accuracy, design at 100% scale. Final proportions must be adjusted in favor of optical uniformity across the suite. Straight lines should fall on pixel boundaries so that icon edges are sharp.

Co-branded simple microsite

Common motifs

Common motifs are base elements that are reused for multiple icons.

Co-branded simple microsite

Consistent Elements

Icons across a single category should use the same visual elements when possible, applied at a consistent size across variations. Below is an example set related to Vision.

Co-branded simple microsite

Depth

Depth is created using contrast in two-color icons and negative space in single-color icons.

Co-branded simple microsite

Creating one color icon variants

Two-color icons are designed at 120px using dark blue/blue (default state), where dark blue represents shadow and blue represents highlights. The hover state is blue and green, where green replaces blue and blue replaces dark blue. Certain icons may aesthetically require a reversal of these color roles.

One-color icons are designed at 24px (16px for glyphs), blue in their default state and green for their hover state. The one-color icon can be a simple one-color variant of the two-color design, as long as the icon is still recognizable. For more complex designs there are some common strategies for conversion: add a 1-pixel gap between dark blue and blue regions of two-color version, dark blue details can be converted to white as long as the integrity of the two-color icon is maintained.

Co-branded simple microsite

A simple one-color variant of the two-color design, as long as the icon is still easy to understand

Co-branded simple microsite

Dark blue details can be converted to white as long as the integrity of the two-color icon is maintained

Co-branded simple microsite

Add a 1-pixel gap between dark blue and blue regions of two-color version

Badges, Symbols, and Strokes

Add-ons to base icons (for example, adding a check mark to a shield), should be done with consistent shapes across our full suite of icons. When you create an icon like this, copy the badge and symbol, without changing it, from an existing icon to make sure scale and shape are uniform.

For consistency, the icon stroke size is 2px for two-color icons and 1px for one-color icons. 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.

Co-branded simple microsite

Examples of common badge motifs include the following:

Co-branded simple microsite

Downloads