Rows of MetLife icons.


Our icons help users digest our digital content and navigate experiences, while adding some personality and visual emphasis to functional moments. We have created two icon libraries for specific use cases.


Design Assets

Download our full icons set.
View All


Our utility icons are used for functionality. Think wayfinding, navigation and social links. They’re used in small formats and should never be the main focus of a screen.


  • Aid the user in navigating content.
  • Not paired with supporting copy.
Four example icons in a row.
Phone screen showing article page with social media icons.


Our expressive icons are used to enhance storytelling. These icons add clarity and branding to more functional screen moments. They should never be used as a hero illustration or key graphic.

  • Marketing device used for storytelling.
  • Paired with supporting copy.
Four illustration icons in a row.
Phone screen showing expressive icons paired with text.



Make sure to save and upload all icons as SVGs for optimal resolution across digital.

  • Avoid saving in image formats like JPEG or PNG.

Utility Icons

Functional icons can be used in two colors, black or blue.

Long row of icons in blue and black.

Use when utility is key.

  • Utility icons should be understood without any supporting copy.

Use sparingly.

  • Using too many utility icons in one layout will overwhelm a user with too many choices.

Use on simple backgrounds, and keep icons monochromatic.

  • Utility icons should only be in MetLife Dark Grey or MetLife Blue.
Three phone screens showing example use of icons in digital work.
  • Enlarge above 16 px.
Phone screen showing example email with an icon that is too large.
  • Use multiple colors in one icon.
Phone screen showing UI with a multicolored check-box icon.

Expressive Icons

Expressive icons are available in two-color (dark blue/blue, blue/green) and one-color (blue) variants.

Two small icons depicting a cityscape.
  • Single color.
  • Not to exceed 24px.  

Two large icons depicting a cityscape.
  • Two Colors.
  • No smaller than 24px and not to exceed 120px.


Use to make information more scannable.

  • Applying icons as a replacement to a number or bullet is a great use of the set.

Be sure to pair icons with the correct concept. 

  • Our expressive icons have specific meanings, make sure they’re matched to the meaning you’re trying to convey.
The phones showing use of expressive icons in digital work.
  • Modify or change icon colors.
Phone screen showing icons in a variety of colors.
  • Use expressive for storytelling moments. Icons should not take the place of photographs or illustrations.
Phone screen showing an icon as the hero visual in an article.