Icon

Angular

See content

Blazor

See content

Icon is a graphical representation of an object or a functionality.

Usage

Icons help users to understand the functionality easily and quickly or identify an object through its visual representation. If the visual representation is inaccurate, the icon will be a noise on the interface with no purpose.

Do’s and Don’ts

DO

  • All Icons design used application should have visual consistency. For example, either use all filled icon or all outlined icons for any application.

  • Meaning of the icons should be explicit for the users. Test your icons with users to ensure the user understands the meaning of the icon.

  • Provide tooltip for unlabeled icons.

DON'T

  • Do not overcrowd the application interface by using many icons. For example, in actions columns of the table if there are more than 3 actions then instead of using icons use ellipses with actions as text on it.

  • Do not use icon alone if icons are not generic or easy to understand. Use them with label or tooltip.

Sign in

I have a Michelin ID and/or email

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

  • A Michelin ID (e.g. F012345)
  • A double authentification (with ForgeRock application or SMS)
  • A password associated to a 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 never logged into the Design System, you can submit an access request using this link: Request an access