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

```js static=true
// 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

```jsx file=./examples/AllIconsExample.tsx

```

### Icon sizes

```jsx file=./examples/IconSizesExample.tsx

```

### Icon states

```jsx file=./examples/IconStatesExample.tsx

```

### Icon colors

The icon color should follow the [colors guidelines](/guidelines/icons#colors).

```jsx file=./examples/IconColorsExample.tsx

```

### 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`](https://react-icons.github.io/react-icons):

```jsx file=./examples/IconAsPropExample.tsx

```

Using a loader like [SVGR](https://react-svgr.com/) 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:

```jsx file=./examples/IconWithSVGExample.tsx

```

## Props (API reference)

### Built-in icons

<PropsTable of="Icon" />

## Content guidelines

- Select an icon that accurately represents the subject
- Pair icons with text
- The icon color should follow the [colors guidelines](/guidelines/icons#colors)
- 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