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.

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.