Forma 36

Icons

Give feedback

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

function AllIconsExample() {

  const icons = Object.entries(f36icons).sort((a, b) =>

    a[0].localeCompare(b[0]),

  );



  return (

    <Box>

      <Grid columns="repeat(3, 1fr)">

        {icons.map(([name, IconComponent]) => {

          const Component = IconComponent;

          return (

            <Flex

              key={name}

              padding="spacingS"

              marginRight="spacingM"

              flexDirection="column"

              alignItems="flex-start"

            >

              <Flex marginRight="spacingS" gap="spacingXs">

                <Component key={name} size="medium" />

                <Text>{name}</Text>

              </Flex>

            </Flex>

          );

        })}

      </Grid>

    </Box>

  );

}
Open in Playground

Icon sizes

function IconSizesExample() {

  return (

    <Stack>

      <Flex alignItems="center" gap="spacingS">

        <CalendarBlankIcon size="tiny" /> <Text>Tiny</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <CalendarBlankIcon size="small" /> <Text>Small</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <CalendarBlankIcon size="medium" /> <Text>Medium</Text>

      </Flex>

    </Stack>

  );

}
Open in Playground

Icon states

function IconSizesExample() {

  return (

    <Stack>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon isActive />

        <GearSixIcon isActive color={tokens.colorPrimary} />

        <GearSixIcon isActive color={tokens.colorPositive} />

      </Flex>

    </Stack>

  );

}
Open in Playground

Icon colors

The icon color should follow the colors guidelines.

function IconColorsExample() {

  return (

    <Stack>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon color={tokens.colorPrimary} /> <Text>Primary</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon color={tokens.colorPositive} /> <Text>Positive</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon color={tokens.colorNegative} /> <Text>Negative</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon color={tokens.colorWarning} /> <Text>Warning</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon color={tokens.purple600} /> <Text>Accent</Text>

      </Flex>

      <Flex

        alignItems="center"

        gap="spacingS"

        className={css({

          backgroundColor: tokens.gray600,

          padding: tokens.spacingXs,

          borderRadius: tokens.borderRadiusSmall,

        })}

      >

        <GearSixIcon color={tokens.colorWhite} />{' '}

        <Text fontColor="colorWhite">White</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon color={tokens.gray600} /> <Text>Muted</Text>

      </Flex>

      <Flex alignItems="center" gap="spacingS">

        <GearSixIcon /> <Text>Default</Text>

      </Flex>

    </Stack>

  );

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

function IconAsPropExample() {

  return <Icon as={MdAccessAlarm} size="small" color={tokens.colorPrimary} />;

}
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 size="small" color={tokens.colorPrimary}>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">

        <rect width="256" height="256" fill="none" />

        <circle

          cx="128"

          cy="128"

          r="40"

          fill="none"

          stroke="currentColor"

          strokeLinecap="round"

          strokeLinejoin="round"

          strokeWidth="16"

        />

        <path

          d="M130.05,206.11c-1.34,0-2.69,0-4,0L94,224a104.61,104.61,0,0,1-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9,147.24a99.15,99.15,0,0,1,0-38.46l31.84-18.1c.65-1.15,1.32-2.29,2-3.41l.16-36A104.58,104.58,0,0,1,94,32l32,17.89c1.34,0,2.69,0,4,0L162,32a104.61,104.61,0,0,1,34.11,19.2l.12,36c.71,1.12,1.38,2.25,2,3.41l31.85,18.14a99.15,99.15,0,0,1,0,38.46l-31.84,18.1c-.65,1.15-1.32,2.29-2,3.41l-.16,36A104.58,104.58,0,0,1,162,224Z"

          fill="none"

          stroke="currentColor"

          strokeLinecap="round"

          strokeLinejoin="round"

          strokeWidth="16"

        />

      </svg>

    </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<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[]

className
string

CSS class to be appended to the root element

color
string

Determines the color of the icon

isActive
false
true

Determines the active state of the icon

margin
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin to one of the corresponding spacing tokens

marginBottom
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-bottom to one of the corresponding spacing tokens

marginLeft
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-left to one of the corresponding spacing tokens

marginRight
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-right to one of the corresponding spacing tokens

marginTop
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets margin-top to one of the corresponding spacing tokens

padding
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets padding to one of the corresponding spacing tokens

paddingBottom
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets padding-bottom to one of the corresponding spacing tokens

paddingLeft
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets padding-left to one of the corresponding spacing tokens

paddingRight
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets padding-right to one of the corresponding spacing tokens

paddingTop
"spacing2Xs"
"spacingXs"
"spacingS"
"spacingM"
"spacingL"
"spacingXl"
"spacing2Xl"
"spacing3Xl"
"spacing4Xl"
"none"

sets padding-top to one of the corresponding spacing tokens

size
"medium"
"small"
"tiny"

Determines the size of the icon

testId
string

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

viewBox
string

Custom SVG viewBox attribute to use

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

Help improve this page

Edit on GithubRead the contribution guide