Iconography

Icons are visual symbols used to represent ideas, objects or actions.

Usage

Icons should be used to maximize comprehension and reduce cognitive load for a user, they are not for UI decoration.

Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.

Icons can have different sizes and colors depending on the context of use.

Best practices

  • Use icons with meaningful text labels as much as possible.

  • Don't use icons to "decorate" the interface as too many icons in UI create visual noise.

  • Multiple icon variations should not be used for the same concept.

  • Don't make the icons too complicated.

Google Material Icons

Developers

Google Material Icons are included in Angular & Blazor design system packages, you don't have to add it yourself.

Check the icon component documentation to use it.

Designers

In order to be able to display the Google Material Icons with Figma, refers to the page UI Kit for Figma.

Michelin Specific Icons

If you need to create or use specific Icons linked to Michelin business please contact us.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.