@contentful/f36-icon

title: 'Icons' type: 'component' status: 'stable' slug: /components/icon/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/icon' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-icon--default' typescript: ./src/Icon.tsx

Icons are used to indicate actions, statuses and navigation. The icon components can be used in Button, TextLink, Note and other components.

Import

// Import single icons
import { PlusIcon, CheckIcon } from '@contentful/f36-icons';
// or import all icons as an object
import * as icons from '@contentful/f36-icons';
// or for third party custom icons, use the Forma 36 Icon component to wrap them
import { Icon } from '@contentful/f36-icons';

Examples

Forma 36 provides a list of built-in icons that can be used as regular React components.

All icons

Icon sizes

Icon states

Icon colors

The icon color should follow the colors guidelines.

Custom icons and third-party libraries

Custom icons can be rendered with Forma 36 to take advantage of the same props and styling as the built-in icons. This means you can use a prop like color={tokens.colorPrimary} or size="medium" on your own icons and they will match the built-in icons from Forma 36.

Custom icons can be used in two ways: with as prop and with a SVG path.

as prop

Passing a React component with an SVG icon to the as prop on Icon makes it render that SVG. This works both with your own icons and with icons from third-party icon libraries such as react-icons:

Using a loader like SVGR makes it easier to use your own SVG files with the as prop as it helps import them as React components.

SVG paths

Another way to render custom icons is to wrapping SVG paths in the Icon component directly:

Props (API reference)

Built-in icons

Content guidelines

• Select an icon that accurately represents the subject
• Pair icons with text
• The icon color should follow the colors guidelines
• Position buttons consistently in the interface
• Ensure the meaning of the icon is consistent in all use cases
• Consider how the icon fits into the context of the screen and reduce complexity where possible