Icons

Malty icons support various actions and metaphors. They are informative and simple and can work in small sizes combining nicely with the typographical context.

When using our icon set, they should be handled purposefully to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section.

As a general rule, icons should be used in combination with meaningful text t support users progressing through the product in an accessible manner. However, avoid aria labels if you're rendering the icon with visible text, preventing accessibility label duplication. 

There are few widely recognized icons, so whenever possible, use a label or supporting text to ensure its meaning is understood. In this case, an aria-label will be used for the icon.

Combining unfamiliar icons with text could confuse users depending on how they recognize the supporting icon, so make sure the icon and text label are coupled.

Icon sizes

There are four icon sizes in our design system. The icon sizes are represented below.

Extra Small

The XSmall icons are placed in a 12px by 12px canvas. This size is for a specific use case, being the icons shown inside a pill on mobile devices.

Small

The Small icons are placed in a 16px by 16px canvas. These icons are best used when the space is limited. We often use them in our components such as a feedback icon in our toasts or inline alerts.

Medium Small

The Medium Small icons are placed in a 20px by 20px canvas. These icons are needed to fill the gap between the small and the medium sizes. This size is often seen in alerts or inline alerts.

Medium

The Medium icons are placed in a 24px by 24px canvas. These icons are used in the majority of our interfaces. These icons are our standard size.

Large

The Large icons are placed in a 32px by 32px canvas. These icons are used sparingly to emphasize a concept or when space is plentiful.

Extra Large

The XLarge icons are placed in a 40px by 40px canvas. These icons are used to illustrate an action. For example, a modal shows up with a check icon and the message “You are now part of the Carlsberg family”.

Spaces and touch areas

When placing icons next to each other, the space between them and the surroundings (touch area) is critical.

---

Guidelines