Icon
Our icon library is built on the principles of balance, clarity, and inclusivity. The icons are used in everything from navigation, components, and on their own.
- Icons can be used to help clarify the UI for users, but we should be thoughtful in their application. Ask yourself if users would still understand and be able to use your UI if the icons were removed.
- Icons are sized to match the current font size by default. For body text this is typically 16×16.
- Check out our gallery of available icons »
These examples use the People
icon.
Note that there is no such thing as an Icon
component; each component is exported as its own React component.
See more about icon colors »
See more about icon sizing »
Depending on preference, icons can be aligned with text via Flexbox or CSS Grids.
Name | Type | Default | Description |
---|---|---|---|
color | string | - | Color for the icon—expressed in our token values (e.g. guava.500 ). Defaults to the current font color. |
width | string number | - | Sets the width attribute on the svg node. Defaults to the current font size and preserves aspect ratio if height is not set. |
- Icons are presentational only and should not be considered essential for understanding the product. For that reason are hidden from screen readers via
aria-hidden
. For an accessible experience, use text content,aria-label
, or another written descriptor. - Icons should not be treated as interactive or clickable elements. Instead make sure to wrap them in a button or another clickable container. See IconButton for more information on how to make icons clickable.