Introduction

The Item Icon is the pictogram of a navigation entry, such as a tab or a menu entry. It represents the section or the action, and it contributes to the visual identity of each navigation entry.

It is one of the child elements an Item may contain, with the Item Label and the Item Indicator.

Anatomy

The two layers

The Item Icon is made of two visual layers: the icon, and a background behind it. A padding defines the internal spacing between the icon and the limits of the background. It sets the overall density of the element and its clickable area, and it can be set per device.

The icon

The icon layer defines the pictogram displayed inside the Item Icon. It can be a colored icon, filled with the Color atom, or a static image uploaded by the app owner, which is not colored. This flexibility allows system icons and brand assets to coexist within the same navigation.

Properties

Size

Navigation icons follow a limited set of standardized sizes, to preserve consistency across devices: small, medium and large.

Shape

The Shape atom can be applied to the background layer to define its radius, from Sharp to Full-round.

Background

The background layer can receive the Background component, which allows the application of a color, a gradient or an opacity level.