--- title: "Icons | GoodBarber's Design System" description: "Icons are one of the basic elements of an application. They can replace or support the text, inform but also animate the content to avoid too boring pages." canonical_url: "https://www.goodbarber.com/uxdesign/icons/" lang: nl --- # Icons | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.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://nl.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 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/) # Icons Foundations Icons provide a simple and effective way to communicate information and enhance the visual appeal of the interface. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/icons.cbb002152821.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/icons.cbb002152821.mp4) ## Introduction Icons are a fundamental element of any app, as they can provide a simple and effective way to communicate information and enhance the visual appeal of the interface. Icons can be used to replace or supplement text, making it easier for users to understand the meaning and purpose of different elements in the app. They can also be used to create a visual hierarchy, with more important elements represented by larger or more detailed icons. Icons can also be used to add visual interest to the interface, and to create a more engaging and aesthetically pleasing design. They can be used to create a sense of movement and animation, which can help to break up large blocks of text and prevent pages from looking too static or boring. ## Icons used in templates The icons used in the templates come from the [Material Icons](https://fonts.google.com/icons). They are available in 5 styles: Filled, Outlined, Rounded, Two-Tone, Sharp. ![Actions and system icons](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used.cfbb93f73f27.png) *Actions and system icons* ### Finding the icons ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used-Link-Material.badbc3c34f60.png) [**Material Icon**](https://fonts.google.com/icons) Browsing and downloading individual icons ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used-Link-Github.d868b779ead1.png) [**GitHub repository**](https://fonts.google.com/icons#:~:text=public%20Git%20repository.-,Git%20repository,-Open%20Source) Icons available in the public Git repo ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used-Link-Download.c9f7c159aa20.png) [**Download full archive**](https://google.github.io/material-design-icons/#getting-icons) Grab the latest zip archive of all icons or the bleeding-edge version from master. In addition, this community site offers an alternative way to find specific icons as these 3 examples: ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used-Link-Community-Example.ac8a21b19372.png) ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used-Link-Community.51daff07f345.png) [**Material design Icons**](https://materialdesignicons.com/) Icons from the community ## Icon creation Some icons that are not included in the Material Icons pack had to be created, either from existing icons or from scratch. ### Creating from existing icons Using graphic design software, existing icons from the Material Icons pack can be combined: ![Example of an icon creation from existing Material icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Creation.ea1c650ef69f.gif) *Example of an icon creation from existing Material icon* ### Creating icons from scratch As a last resort, if an icon has to be created from scratch, it is recommended to follow some rules for optimal reading. These [design principles](https://material.io/design/iconography/system-icons.html#design-principles) should be followed. *"System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics."* ![](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Used-Link-Download.c9f7c159aa20.png) [**System icons**](https://material.io/design/iconography/system-icons.html#design-principles) Design principles ## Uses ### In the buttons The vast majority of buttons use **24 * 24px** icons, however there are some exceptions. ![Example of icons in buttons](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Uses-Buttons.2ad7401ec6fe.png) *Example of icons in buttons* 1. Buttons 2. Simple action buttons (most common) 3. Action buttons 4. Floating buttons 5. Menu buttons (example: *Browsing Mode LittleSwipeText*) ### In Headlines, Headers of Detail sections, or as a list item Here, the icon is more information than a real action button. Its size varies depending on the environment (Headline or list element or devices). ![Actions icons in content cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Uses-Header.2a5da9cb4804.png) *Actions icons in content cell* ### As an image Icons can be used as simple images, within a list or page, for informational purposes or as a nudge to action. Their size is based on the width of the columns: ![Section Loyalty Rewards Classic](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Icons-Uses-Images.131e2246e913.png) *Section Loyalty Rewards Classic*