Forma 36 - Icons

Import

import * as icons from '@contentful/f36-icons';
// or, for custom icons
import { Icon } from '@contentful/f36-components';

Examples

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

Icon variants

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


function IconVariantsExample() {
  return (
    <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 alignItems="center">
        <Flex marginRight="spacingS">
          <CalendarIcon variant="muted" />
        </Flex>{' '}
        <Text>Muted</Text>
      </Flex>
      <Flex
        style={{ backgroundColor: '#8091a5' }}
        alignItems="center"
        padding="spacingS"
      >
        <Flex marginRight="spacingS">
          <CalendarIcon variant="white" />
        </Flex>{' '}
        <Text>White</Text>
      </Flex>
    </Stack>
  );
}function IconVariantsExample() {
  return (
    <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 alignItems="center">
        <Flex marginRight="spacingS">
          <CalendarIcon variant="muted" />
        </Flex>{' '}
        <Text>Muted</Text>
      </Flex>
      <Flex
        style={{ backgroundColor: '#8091a5' }}
        alignItems="center"
        padding="spacingS"
      >
        <Flex marginRight="spacingS">
          <CalendarIcon variant="white" />
        </Flex>{' '}
        <Text>White</Text>
      </Flex>
    </Stack>
  );
}
Open in Playground

Icon sizes


function IconSizesExample() {
  return (
    <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>
      <Flex alignItems="center">
        <CalendarIcon size="xlarge" /> <Text>Extra large</Text>
      </Flex>
    </Stack>
  );
}function IconSizesExample() {
  return (
    <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>
      <Flex alignItems="center">
        <CalendarIcon size="xlarge" /> <Text>Extra large</Text>
      </Flex>
    </Stack>
  );
}
Open in Playground

All icons


function AllIconsExample() {
  return (
    <Grid columns="repeat(2, 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>
  );
}function AllIconsExample() {
  return (
    <Grid columns="repeat(2, 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>
  );
}
Open in Playground

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: with as prop and with an 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:


function IconAsPropExample() {
  return <Icon as={MdAccessAlarm} variant="secondary" />;
}function IconAsPropExample() {
  return <Icon as={MdAccessAlarm} variant="secondary" />;
}
Open in Playground

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:


function IconAsPropExample() {
  return (
    <Icon variant="secondary">
      <path d="M7 10l5 5 5-5z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </Icon>
  );
}function IconAsPropExample() {
  return (
    <Icon variant="secondary">
      <path d="M7 10l5 5 5-5z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </Icon>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Built-in icons

Name	Type	Default
as	HTML Tag or React Component (e.g. div, span, etc)
children	ReactElement<any, string \| JSXElementConstructor<any>> \| ReactElement<any, string \| JSXElementConstructor<any>>[]
className	string CSS class to be appended to the root element
size	"xlarge" "large" "medium" "small" "tiny" Determines the size of the icon
testId	string A [data-test-id] attribute used for testing purposes
trimmed	false true Whether or not to trim the icon width, i.e. set `width` to `auto`
variant	"negative" "positive" "primary" "secondary" "warning" "muted" "white" Determines the fill color used
viewBox	string Custom SVG viewBox attribute to use

Custom icons

Name	Type	Default
as	HTML Tag or React Component (e.g. div, span, etc)
children	ReactElement<any, string \| JSXElementConstructor<any>> \| ReactElement<any, string \| JSXElementConstructor<any>>[]
className	string CSS class to be appended to the root element
size	"small" "xlarge" "large" "medium" "tiny" Determines the size of the icon
testId	string A [data-test-id] attribute used for testing purposes
trimmed	false true Whether or not to trim the icon width, i.e. set `width` to `auto`
variant	"muted" "negative" "positive" "primary" "secondary" "warning" "white" Determines the fill color used
viewBox	string Custom SVG viewBox attribute to use

Content guidelines

Select an icon that accurately represents the subject
Pair icons with text
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