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.
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.
Web icon assets come in multiple sizes, colorways and file formats for use in a variety of web applications.
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.
2-color icons (25px or larger):
- • Have default and hover states
- • Use for promotional content, product pages, mega menu, etc.
1-color icons (24px or smaller):
- • Color is #0090DA
- • Hover state is #A4CE4E
- • Use for menu, forms etc.
1-color icons (16px):
- • Color is #333333
- • Hover state is #007ABC
- • Use for utility menu, on-page interactions.
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.
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.
- • 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).
Choosing the correct icon variant
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.
Common motifs are base elements that are reused for multiple icons.
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.
Depth is created using contrast in two-color icons and negative space in single-color icons.
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.
A simple one-color variant of the two-color design, as long as the icon is still easy to understand
Dark blue details can be converted to white as long as the integrity of the two-color icon is maintained
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.
Examples of common badge motifs include the following: