Forma 36 - Icons

Import

// Import single icons
import { PlusIcon, DoneIcon } 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.

Icon variants

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


function IconColorsExample() {
  return (
    <Flex flexDirection="column">
      <CalendarIcon variant={tokens.gray900} />

      <CalendarIcon color={tokens.blue500} />

      <div style={{ backgroundColor: '#8091a5' }}>
        <CalendarIcon color={tokens.colorWhite} />
      </div>
    </Flex>
  );
}function IconColorsExample() {
  return (
    <Flex flexDirection="column">
      <CalendarIcon variant={tokens.gray900} />

      <CalendarIcon color={tokens.blue500} />

      <div style={{ backgroundColor: '#8091a5' }}>
        <CalendarIcon color={tokens.colorWhite} />
      </div>
    </Flex>
  );
}
Open in Playground

Icon sizes


ReferenceError: CalendarBlankIcon is not defined
function IconSizesExample() {
  return (
    <Stack>
      <Flex alignItems="center">
        <CalendarBlankIcon size="tiny" /> <Text>Tiny</Text>
      </Flex>
      <Flex alignItems="center">
        <CalendarBlankIcon size="small" /> <Text>Small</Text>
      </Flex>
      <Flex alignItems="center">
        <CalendarBlankIcon size="medium" /> <Text>Medium</Text>
      </Flex>
    </Stack>
  );
}function IconSizesExample() {
  return (
    <Stack>
      <Flex alignItems="center">
        <CalendarBlankIcon size="tiny" /> <Text>Tiny</Text>
      </Flex>
      <Flex alignItems="center">
        <CalendarBlankIcon size="small" /> <Text>Small</Text>
      </Flex>
      <Flex alignItems="center">
        <CalendarBlankIcon size="medium" /> <Text>Medium</Text>
      </Flex>
    </Stack>
  );
}
Open in Playground

All icons


AppearanceIcon
ArchiveIcon
ArrowBackwardIcon
ArrowDownIcon
ArrowDownTrimmedIcon
ArrowDownwardIcon
ArrowForwardIcon
ArrowForwardTrimmedIcon
ArrowUpIcon
ArrowUpTrimmedIcon
ArrowUpwardIcon
AssetIcon
AssetTrimmedIcon
AudioIcon
CalendarIcon
ChatBubbleIcon
ChatBubbleTrimmedIcon
CheckCircleIcon
CheckCircleTrimmedIcon
ChevronDownIcon
ChevronDownTrimmedIcon
ChevronLeftIcon
ChevronLeftTrimmedIcon
ChevronRightIcon
ChevronRightTrimmedIcon
ChevronUpIcon
ChevronUpTrimmedIcon
ClockIcon
ClockTrimmedIcon
CloseIcon
CloseTrimmedIcon
CloudUploadIcon
CodeIcon
CodeIllustrationIcon
CodeTrimmedIcon
CopyIcon
CopyTrimmedIcon
CycleIcon
CycleTrimmedIcon
DeleteIcon
DeleteTrimmedIcon
DiamondIcon
DoneIcon
DoubleArrowIcon
DownloadIcon
DownloadTrimmedIcon
DragIcon
DragTrimmedIcon
EditIcon
EditTrimmedIcon
EmbeddedEntryBlockIcon
EmbeddedEntryBlockTrimmedIcon
EmbeddedEntryInlineIcon
EmbeddedEntryInlineTrimmedIcon
EntryIcon
EntryTrimmedIcon
EnvironmentAliasIcon
EnvironmentIcon
ErrorCircleIcon
ErrorCircleOutlineIcon
ErrorCircleTrimmedIcon
ExternalLinkIcon
ExternalLinkTrimmedIcon
FaceHappyIcon
FaceHappyTrimmedIcon
FilterIcon
FilterTrimmedIcon
FolderCreateIcon
FolderCreateTrimmedIcon
FolderIcon
FolderOpenIcon
FolderOpenTrimmedIcon
FolderTrimmedIcon
FormatBoldIcon
FormatBoldTrimmedIcon
FormatItalicIcon
FormatItalicTrimmedIcon
FormatUnderlinedIcon
FormatUnderlinedTrimmedIcon
GiftIcon
HeadingIcon
HeadingOneIcon
HeadingOneTrimmedIcon
HeadingTrimmedIcon
HeadingTwoIcon
HeadingTwoTrimmedIcon
HelpCircleIcon
HelpCircleInvertedIcon
HelpCircleTrimmedIcon
HorizontalRuleIcon
HorizontalRuleTrimmedIcon
ImageIcon
InfoCircleIcon
InfoCircleTrimmedIcon
LanguageIcon
LinkAlternateIcon
LinkIcon
LinkTrimmedIcon
ListBulletedIcon
ListBulletedTrimmedIcon
ListNumberedIcon
ListNumberedTrimmedIcon
LockIcon
LockTrimmedIcon
LogoutIcon
LooksOneIcon
LooksOneTrimmedIcon
LooksTwoIcon
LooksTwoTrimmedIcon
MarkupIcon
MenuIcon
MenuTrimmedIcon
MinusIcon
MoreHorizontalIcon
MoreHorizontalTrimmedIcon
MoreVerticalIcon
MoreVerticalTrimmedIcon
PageIcon
PageTrimmedIcon
PdfIcon
PersonIcon
PlaintextIcon
PlusCircleIcon
PlusCircleTrimmedIcon
PlusIcon
PlusTrimmedIcon
PresentationIcon
PreviewIcon
PreviewOffIcon
PuzzleIcon
QuoteIcon
QuoteTrimmedIcon
ReceiptIcon
ReceiptTrimmedIcon
ReferencesIcon
ReleaseIcon
ReleaseTrimmedIcon
RichtextIcon
SearchIcon
SearchTrimmedIcon
SettingsIcon
SettingsTrimmedIcon
ShoppingCartIcon
ShoppingCartTrimmedIcon
SortAscendingIcon
SortDescendingIcon
SortIcon
SpreadsheetIcon
StarIcon
StarTrimmedIcon
SubscriptIcon
SubscriptTrimmedIcon
SuperscriptIcon
SuperscriptTrimmedIcon
TabIcon
TableIcon
TagsIcon
TextIcon
TextTrimmedIcon
ThumbDownIcon
ThumbDownTrimmedIcon
ThumbUpIcon
ThumbUpTrimmedIcon
ToggleIcon
TriangleOutlineIcon
UsersIcon
UsersTrimmedIcon
VideoIcon
WarningIcon
WarningTrimmedIcon
WorkflowsIcon
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

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
color	string Determines the color of the icon
isActive	false true Determines the active state of the icon
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
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