This component is in an alpha state. Breaking changes to the API can happen with any future updates. We don't recommend using the component in production environments
ProductIcon component is used in combination with navigation and title UI elements. The ProductIcon uses a separate set of SVG icons tailored specifically to Contentful concepts, whereas the
Icon component contains generic UI icons.
Table of contents
How to use Product Icon
- Select an icon that accurately represents the subject
- Pair icons with text
- Make sure that the size of the icon is same or similar to the line height of the text
Common practice is to use ProductIcons in the top navigation in Contentful webapp. In the case of the top navigation, white icon is shown on the dark background next to the white text.
- Make sure to use proper color for the icon and text in the context. It passes the the accesibility color contrast requirements - contrast ratio of at least 3:1.