Import
// Import single iconsimport { PlusIcon, DoneIcon } from '@contentful/f36-icons';// or import all icons as an objectimport * as icons from '@contentful/f36-icons';// or for third party custom icons, use the Forma 36 Icon component to wrap themimport { 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:
PrimaryPositiveNegativeWarningSecondaryMutedWhite
Icon sizes
TinySmallMediumLargeExtra large
All icons
AppearanceIconArchiveIconArrowBackwardIconArrowDownIconArrowDownwardIconArrowForwardIconArrowUpIconArrowUpwardIconAssetIconAudioIconCalendarIconChatBubbleIconCheckCircleIconChevronDownIconChevronLeftIconChevronRightIconChevronUpIconClockIconCloseIconCloudUploadIconCodeIconCodeIllustrationIconCopyIconCycleIconDeleteIconDiamondIconDoneIconDoubleArrowIconDownloadIconDragIconEditIconEmbeddedEntryBlockIconEmbeddedEntryInlineIconEntryIconEnvironmentAliasIconEnvironmentIconErrorCircleIconErrorCircleOutlineIconExternalLinkIconFaceHappyIconFilterIconFolderCreateIconFolderIconFolderOpenIconFormatBoldIconFormatItalicIconFormatUnderlinedIconGiftIconHeadingIconHeadingOneIconHeadingTwoIconHelpCircleIconHelpCircleInvertedIconHorizontalRuleIconImageIconInfoCircleIconLanguageIconLinkAlternateIconLinkIconListBulletedIconListNumberedIconLockIconLogoutIconLooksOneIconLooksTwoIconMarkupIconMenuIconMinusIconMoreHorizontalIconMoreVerticalIconPageIconPaintBrushIconPdfIconPersonIconPlaintextIconPlusCircleIconPlusIconPresentationIconPreviewIconPreviewOffIconPuzzleIconQuoteIconReceiptIconReferencesIconReleaseIconRichtextIconSearchIconSettingsIconShoppingCartIconSortAscendingIconSortDescendingIconSortIconSpreadsheetIconStarIconSubscriptIconSuperscriptIconTabIconTableIconTagsIconTextIconThumbDownIconThumbUpIconToggleIconTriangleOutlineIconUsersIconVideoIconWarningIconWorkflowsIconTrimmed Variants
deprecatedTrimmed Icons will no longer be available in the next Iteration
ArrowDownTrimmedIconArrowForwardTrimmedIconArrowUpTrimmedIconAssetTrimmedIconChatBubbleTrimmedIconCheckCircleTrimmedIconChevronDownTrimmedIconChevronLeftTrimmedIconChevronRightTrimmedIconChevronUpTrimmedIconClockTrimmedIconCloseTrimmedIconCodeTrimmedIconCopyTrimmedIconCycleTrimmedIconDeleteTrimmedIconDownloadTrimmedIconDragTrimmedIconEditTrimmedIconEmbeddedEntryBlockTrimmedIconEmbeddedEntryInlineTrimmedIconEntryTrimmedIconErrorCircleTrimmedIconExternalLinkTrimmedIconFaceHappyTrimmedIconFilterTrimmedIconFolderCreateTrimmedIconFolderOpenTrimmedIconFolderTrimmedIconFormatBoldTrimmedIconFormatItalicTrimmedIconFormatUnderlinedTrimmedIconHeadingOneTrimmedIconHeadingTrimmedIconHeadingTwoTrimmedIconHelpCircleTrimmedIconHorizontalRuleTrimmedIconInfoCircleTrimmedIconLinkTrimmedIconListBulletedTrimmedIconListNumberedTrimmedIconLockTrimmedIconLooksOneTrimmedIconLooksTwoTrimmedIconMenuTrimmedIconMoreHorizontalTrimmedIconMoreVerticalTrimmedIconPageTrimmedIconPlusCircleTrimmedIconPlusTrimmedIconQuoteTrimmedIconReceiptTrimmedIconReleaseTrimmedIconSearchTrimmedIconSettingsTrimmedIconShoppingCartTrimmedIconStarTrimmedIconSubscriptTrimmedIconSuperscriptTrimmedIconTextTrimmedIconThumbDownTrimmedIconThumbUpTrimmedIconUsersTrimmedIconWarningTrimmedIcon
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 StorybookBuilt-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