ProductIcon

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

The 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
• Code examples
• Accessibility

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

Code examples

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.

// import { ProductIcon } from '@contentful/forma-36-react-components/dist/alpha';

<ProductIcon icon="Spaces" size="large" color="positive" />
// import { ProductIcon } from '@contentful/forma-36-react-components/dist/alpha';

<ProductIcon icon="Spaces" size="large" color="positive" />
Hide source

Accessibility

• 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.