Usage guideline
Hierarchy
Make sure that the pictogram element is not mixed with other elements in the content. It should always be present and positioned as the first element.
Padding
To ensure the safe area, it is crucial to maintain a minimum of 16 pixels of padding around the pictogram, regardless of its size. This padding helps to create a visually balanced and aesthetically pleasing design, while also ensuring that the pictogram remains easily distinguishable from other elements on the page.
One pictogram only
The display of multiple pictograms in the same module or next to each other is not supported.
Interaction
Pictograms are only visual representations, for it, they can't be used as interactive elements. Instead, they serve the purpose of supporting the message being conveyed. Furthermore, it is important to note that these objects cannot be contained within specific shapes.
Vertical or horizontal composition
When dealing with pictograms, it's important to consider whether they are presented in a horizontal or vertical structure.
- Vertical: It's the most common type of alignment, especially when there is ample space around it. It may appear in empty spaces or when there are no feedback results, for instance.
- Horizontal: These are utilized in smaller spaces where they may be necessary. Although no cases have been detected thus far, it's possible that they could arise in the future.
For all these cases, there is a minimum space between pictogram and text:
- 80px size: 16px space minimum
- 64px size: 12px min.
- 48px size. 12 px min.
Layout background
The pictogram can only be placed on a white background and should not be placed over a black or colored background.
Content
Pictograms are never used on their own, as they are used as visual support to reinforce messaging. Most often they are used in Empty States and Dialogs, when writing content that a pictogram supports, refer to those sections.