Pictograms

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.

Hierarchy dont
Hierarchy do

 

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.

padding do
padding don't

 

One pictogram only

The display of multiple pictograms in the same module or next to each other is not supported.

one image don't
one image do

 

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.

interaction dont
interaction do


Vertical or horizontal composition

When dealing with pictograms, it's important to consider whether they are presented in a horizontal or vertical structure.

  1. 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.
  2. 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.
composition dont
composition do

 

Layout background

The pictogram can only be placed on a white background and should not be placed over a black or colored background.

background do
background dont