--- title: "Item Icon | GoodBarber's Design System" description: "The Item Icon is the pictogram of a navigation entry in GoodBarber apps: a colored icon or an uploaded image, on its own background layer." canonical_url: "https://www.goodbarber.com/uxdesign/item-icon/" lang: es --- # Item Icon | GoodBarber's Design System [Design System](https://es.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://es.goodbarber.com/uxdesign/](https://es.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://es.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Label](/uxdesign/item-label/) * [Item Indicator](/uxdesign/item-indicator/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Item Icon UI Elements The Item Icon is the pictogram of a navigation entry: it represents the section or the action, and contributes to the visual identity of each entry. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item-icon.64600ea548da.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/item-icon.64600ea548da.mp4) ## 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](/uxdesign/item/) may contain, with the [Item Label](/uxdesign/item-label/) and the [Item Indicator](/uxdesign/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 two layers of the Item Icon, and the padding between them](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIcon-Anatomy-Layers.f18020b5a840.png) *The two layers of the Item Icon, and the padding between them* ### The icon The icon layer defines the pictogram displayed inside the Item Icon. It can be a colored icon, filled with the [Color](/uxdesign/atom-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. ![A colored icon and an uploaded image](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIcon-Anatomy-Icon.d31fb7788709.png) *A colored icon and an uploaded image* ## Properties ### Size Navigation icons follow a limited set of standardized sizes, to preserve consistency across devices: **small, medium and large**. ![The three sizes of the Item Icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIcon-Properties-Size.f1a8b369df78.png) *The three sizes of the Item Icon* ### Shape The [Shape](/uxdesign/atom-shape/) atom can be applied to the background layer to define its radius, from **Sharp** to **Full-round**. ![The corner styles applied to the background layer](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIcon-Properties-Shape.50cc4ea51990.png) *The corner styles applied to the background layer* ### Background The background layer can receive the [Background](/uxdesign/background/) component, which allows the application of a [color](/uxdesign/atom-color/), a [gradient](/uxdesign/atom-gradient/) or an opacity level. ![Color, gradient and opacity on the background layer](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ItemIcon-Properties-Background.d905cf3d4f2b.png) *Color, gradient and opacity on the background layer*