Introduction
Why these guidelines mater ?
At Michelin, delivering a consistent, impactful, and user-centered experience is essential. These rules were developed to ensure visual harmony across all touchpoints, simplify collaboration between teams, and safeguard the strength of our brand identity. Adhering to these directives is not optional—it is a necessity. They are here to provide clarity, ensure efficiency, and establish a unified visual language that strengthens our message. These rules are a collective commitment to excellence and coherence, guiding every project and decision.
Icons vs Pictograms
How to make the difference between an icon and a pictogram ? And what are they used for ?
Icons
Symbols representing ideas, objects, or actions. They convey a brief message, facilitate interaction, and draw attention to important information. Icons enhance interfaces and interactivity.
Pictograms
Schematic graphical representations of a concept or idea, used to communicate more complex ideas than icons. They illustrate or accompany a message and are more part of the editorial content than the interface.
Styles
The different styles described in this section define the foundation of design conception. Later, we will see that there are many more styles when factors like color, effects, trends, etc., are added. These primary styles define the major categories.
Solid
"Solid," the simplest graphic style (like a silhouette), is designed using solid shapes.
Is this a style for icons or pictograms ?
Both, but icons are especially suitable for readability at small/very small scales.
Note
When icons and pictograms are relevant, they are highly recognizable even at a small scale
Fewer details, greater visibility
Low level of detail, cannot illustrate complex ideas
Semi-Solid
The "semi-solid" style includes more details. It is a combination of solid shapes and hollow/empty shapes.
Is this a style for icons or pictograms ?
Both, but be careful during the design process, as the details must remain legible at small scales.
Note
Same advantages as the "solid" style, but be mindful of the size of the details. At a 1:1 scale, details should not be smaller than 1px to remain visible.
Outline & Filled-Outline
Outline
Filled-Outline
"Outline" and "Filled Outline". The details are no longer hollow shapes within solid shapes; they become "strokes" or intermediate shapes that compose the icon or pictogram. The shapes are outlined.
Is this a style for icons or pictograms ?
Both, but be careful during the design process, as the details must remain legible at small scales.
Outline: suitable for both icons and pictograms.
Filled Outline: the added complexity of colors makes the style more suited to pictograms than icons (but both remain possible).
Note
Stroke thickness is adjustable (light icons → bold icons).
Rounded or sharp styles are possible.
Compatible with color associations: duotones, tritones, multicolor, etc.
Higher level of detail.
If used for an icon, be mindful of not adding too much levels of details.
Flat
Similar to the "solid" style, it also allows the use of multiple colors.
Is this a style for icons or pictograms ?
Only pictograms, too complexe for icons
Note
Very aesthetic for illustrating/accompanying a message (pictogram).
Less readable at small sizes without outlines and outlined details.