Icons

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

Primary
Positive
Negative
Warning
Secondary
Muted
White

Icon sizes

Tiny
Small
Medium
Large
Extra large

All icons

AppearanceIcon
ArchiveIcon
ArrowBackwardIcon
ArrowDownIcon
ArrowDownwardIcon
ArrowForwardIcon
ArrowUpIcon
ArrowUpwardIcon
AssetIcon
AudioIcon
CalendarIcon
ChatBubbleIcon
CheckCircleIcon
ChevronDownIcon
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
ClockIcon
CloseIcon
CloudUploadIcon
CodeIcon
CodeIllustrationIcon
CopyIcon
CycleIcon
DeleteIcon
DiamondIcon
DoneIcon
DoubleArrowIcon
DownloadIcon
DragIcon
EditIcon
EmbeddedEntryBlockIcon
EmbeddedEntryInlineIcon
EntryIcon
EnvironmentAliasIcon
EnvironmentIcon
ErrorCircleIcon
ErrorCircleOutlineIcon
ExternalLinkIcon
FaceHappyIcon
FilterIcon
FolderCreateIcon
FolderIcon
FolderOpenIcon
FormatBoldIcon
FormatItalicIcon
FormatUnderlinedIcon
GiftIcon
HeadingIcon
HeadingOneIcon
HeadingTwoIcon
HelpCircleIcon
HelpCircleInvertedIcon
HorizontalRuleIcon
ImageIcon
InfoCircleIcon
LanguageIcon
LinkAlternateIcon
LinkIcon
ListBulletedIcon
ListNumberedIcon
LockIcon
LogoutIcon
LooksOneIcon
LooksTwoIcon
MarkupIcon
MenuIcon
MinusIcon
MoreHorizontalIcon
MoreVerticalIcon
PageIcon
PaintBrushIcon
PdfIcon
PersonIcon
PlaintextIcon
PlusCircleIcon
PlusIcon
PresentationIcon
PreviewIcon
PreviewOffIcon
PuzzleIcon
QuoteIcon
ReceiptIcon
ReferencesIcon
ReleaseIcon
RichtextIcon
SearchIcon
SettingsIcon
ShoppingCartIcon
SortAscendingIcon
SortDescendingIcon
SortIcon
SpreadsheetIcon
StarIcon
SubscriptIcon
SuperscriptIcon
TabIcon
TableIcon
TagsIcon
TextIcon
ThumbDownIcon
ThumbUpIcon
ToggleIcon
TriangleOutlineIcon
UsersIcon
VideoIcon
WarningIcon
WorkflowsIcon

Trimmed Variants
deprecated

Trimmed Icons will no longer be available in the next Iteration

ArrowDownTrimmedIcon
ArrowForwardTrimmedIcon
ArrowUpTrimmedIcon
AssetTrimmedIcon
ChatBubbleTrimmedIcon
CheckCircleTrimmedIcon
ChevronDownTrimmedIcon
ChevronLeftTrimmedIcon
ChevronRightTrimmedIcon
ChevronUpTrimmedIcon
ClockTrimmedIcon
CloseTrimmedIcon
CodeTrimmedIcon
CopyTrimmedIcon
CycleTrimmedIcon
DeleteTrimmedIcon
DownloadTrimmedIcon
DragTrimmedIcon
EditTrimmedIcon
EmbeddedEntryBlockTrimmedIcon
EmbeddedEntryInlineTrimmedIcon
EntryTrimmedIcon
ErrorCircleTrimmedIcon
ExternalLinkTrimmedIcon
FaceHappyTrimmedIcon
FilterTrimmedIcon
FolderCreateTrimmedIcon
FolderOpenTrimmedIcon
FolderTrimmedIcon
FormatBoldTrimmedIcon
FormatItalicTrimmedIcon
FormatUnderlinedTrimmedIcon
HeadingOneTrimmedIcon
HeadingTrimmedIcon
HeadingTwoTrimmedIcon
HelpCircleTrimmedIcon
HorizontalRuleTrimmedIcon
InfoCircleTrimmedIcon
LinkTrimmedIcon
ListBulletedTrimmedIcon
ListNumberedTrimmedIcon
LockTrimmedIcon
LooksOneTrimmedIcon
LooksTwoTrimmedIcon
MenuTrimmedIcon
MoreHorizontalTrimmedIcon
MoreVerticalTrimmedIcon
PageTrimmedIcon
PlusCircleTrimmedIcon
PlusTrimmedIcon
QuoteTrimmedIcon
ReceiptTrimmedIcon
ReleaseTrimmedIcon
SearchTrimmedIcon
SettingsTrimmedIcon
ShoppingCartTrimmedIcon
StarTrimmedIcon
SubscriptTrimmedIcon
SuperscriptTrimmedIcon
TextTrimmedIcon
ThumbDownTrimmedIcon
ThumbUpTrimmedIcon
UsersTrimmedIcon
WarningTrimmedIcon

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:

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:

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