Icons

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

How to use icons

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

Code examples

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

import { ArrowDownIcon } from '@contentful/f36-icons';

<ArrowDownIcon />;

Component variations

The icon components can be configured in different ways using variations in color and size:

Icon variants

<Stack>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="primary" />
    </Flex>{' '}
    <Text>Primary</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="positive" />
    </Flex>{' '}
    <Text>Positive</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="negative" />
    </Flex>{' '}
    <Text>Negative</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="warning" />
    </Flex>{' '}
    <Text>Warning</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="secondary" />
    </Flex>{' '}
    <Text>Secondary</Text>
  </Flex>
  <Flex
    style={{ backgroundColor: '#8091a5' }}
    alignItems="center"
    padding="spacingS"
  >
    <Flex marginRight="spacingS">
      <CalendarIcon variant="white" />
    </Flex>{' '}
    <Text>White</Text>
  </Flex>
</Stack>
<Stack>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="primary" />
    </Flex>{' '}
    <Text>Primary</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="positive" />
    </Flex>{' '}
    <Text>Positive</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="negative" />
    </Flex>{' '}
    <Text>Negative</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="warning" />
    </Flex>{' '}
    <Text>Warning</Text>
  </Flex>
  <Flex alignItems="center">
    <Flex marginRight="spacingS">
      <CalendarIcon variant="secondary" />
    </Flex>{' '}
    <Text>Secondary</Text>
  </Flex>
  <Flex
    style={{ backgroundColor: '#8091a5' }}
    alignItems="center"
    padding="spacingS"
  >
    <Flex marginRight="spacingS">
      <CalendarIcon variant="white" />
    </Flex>{' '}
    <Text>White</Text>
  </Flex>
</Stack>
Hide source

Icon sizes

<Stack>
  <Flex alignItems="center">
    <CalendarIcon size="tiny" /> <Text>Tiny</Text>
  </Flex>
  <Flex alignItems="center">
    <CalendarIcon size="small" /> <Text>Small</Text>
  </Flex>
  <Flex alignItems="center">
    <CalendarIcon size="medium" /> <Text>Medium</Text>
  </Flex>
  <Flex alignItems="center">
    <CalendarIcon size="large" /> <Text>Large</Text>
  </Flex>
</Stack>
<Stack>
  <Flex alignItems="center">
    <CalendarIcon size="tiny" /> <Text>Tiny</Text>
  </Flex>
  <Flex alignItems="center">
    <CalendarIcon size="small" /> <Text>Small</Text>
  </Flex>
  <Flex alignItems="center">
    <CalendarIcon size="medium" /> <Text>Medium</Text>
  </Flex>
  <Flex alignItems="center">
    <CalendarIcon size="large" /> <Text>Large</Text>
  </Flex>
</Stack>
Hide source

Icons

// 

<Grid columns="repeat(3, 1fr)">
  {Object.entries(f36icons).map(([name, icon]) => {
    const Component = icon;

    return (
      <Flex
        key={name}
        padding="spacingS"
        marginRight="spacingM"
        alignItems="center"
        justifyContent="flex-start"
        flexGrow={0}
      >
        <Flex marginRight="spacingS">
          <Component key={name} size="medium" />
        </Flex>
        <Text>{name}</Text>
      </Flex>
    );
  })}
</Grid>
// 

<Grid columns="repeat(3, 1fr)">
  {Object.entries(f36icons).map(([name, icon]) => {
    const Component = icon;

    return (
      <Flex
        key={name}
        padding="spacingS"
        marginRight="spacingM"
        alignItems="center"
        justifyContent="flex-start"
        flexGrow={0}
      >
        <Flex marginRight="spacingS">
          <Component key={name} size="medium" />
        </Flex>
        <Text>{name}</Text>
      </Flex>
    );
  })}
</Grid>
Hide source

Accessibility

Missing

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 variant="primary" or size="large" on your own icons and they will match the built-in icons from Forma 36.

Custom icons can be used in two ways:

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:

import { Icon } from '@contentful/f36-icons';
import { MdAccessAlarm } from 'react-icons/md';

const AccessAlarm = (props) => {
  return <Icon {...props} as={MdAccessAlarm} variant="secondary" />;
};

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:

import { Icon } from '@contentful/f36-icon';

const CustomIcon = (props) => {
  return (
    <Icon {...props} variant="secondary">
      <path d="M7 10l5 5 5-5z" />,
      <path d="M0 0h24v24H0z" fill="none" />
    </Icon>
  );
};

Props

Built-in icons

Custom icons

• Name

  as

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  size

  Description

  Determines the size of the icon

  "small"

  "large"

  "medium"

  "tiny"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  trimmed

  Description

  Whether or not to trim the icon width, i.e. set `width` to `auto`

  false

  true
• Name

  variant

  Description

  Determines the fill color used

  "muted"

  "negative"

  "positive"

  "primary"

  "secondary"

  "warning"

  "white"
• Name

  viewBox

  Description

  Custom SVG viewBox attribute to use

  string