New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
Forma 36

Product Icon

StorybookGithub
alpha

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

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

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.