<aside> <img src="/icons/home_blue.svg" alt="/icons/home_blue.svg" width="40px" /> Home | Foundations | Components | Addons | Patterns
</aside>
System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.
Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.
Do
Don't
Create your own system and product icons with these Adobe Illustrator files including the 24dp icon grid.
DOWNLOAD ICON DESIGN TEMPLATES
Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).
If additional visual weight is needed, content may extend into the padding between the live area and the trim area (the complete size of a graphic). No parts of the icon should extend outside of the trim area.
Live area
Icon content is limited to the 20dp x 20dp live area, with 2dp of padding around the perimeter.
Padding
2dp of padding surrounds the live area.
There are four icon sizes in our design system:
12px (extra small)
16px (small)
Small icons are best used when space is limited. We use small icons in our components such as a chevron-down in the select component or a cross-circle-filled in populated text fields.
20px (medium)