Icon

Icons are used to indicate actions, statuses and navigation. The Icon component can be used in Button, TextLink, Note and other components.

Table of contents

• How to use Icon
• Component variations
• Accessibility

How to use Icon

• Select an icon that accurately represents the subject
• Pair icons with text
• Position buttons consistently in the interface
• Ensure the behavior of the button is consistent in all use cases
• Consider how the button fits into the context of the screen and reduce complexity where possible

Component variations

The Icon component can be configured in different ways using variations in color, size and icon type:

Icon colors

 Primary
 Positive
 Negative
 Warning
 Secondary
 Muted
 White
<React.Fragment>
  <div>
    <Icon color="primary" icon="Edit" /> Primary
  </div>
  <div>
    <Icon color="positive" icon="Edit" /> Positive
  </div>
  <div>
    <Icon color="negative" icon="Edit" /> Negative
  </div>
  <div>
    <Icon color="warning" icon="Edit" /> Warning
  </div>
  <div>
    <Icon color="secondary" icon="Edit" /> Secondary
  </div>
  <div>
    <Icon color="muted" icon="Edit" /> Muted
  </div>
  <div style={{ backgroundColor: '#8091a5' }}>
    <Icon color="white" icon="Edit" /> White
  </div>
</React.Fragment>
<React.Fragment>
  <div>
    <Icon color="primary" icon="Edit" /> Primary
  </div>
  <div>
    <Icon color="positive" icon="Edit" /> Positive
  </div>
  <div>
    <Icon color="negative" icon="Edit" /> Negative
  </div>
  <div>
    <Icon color="warning" icon="Edit" /> Warning
  </div>
  <div>
    <Icon color="secondary" icon="Edit" /> Secondary
  </div>
  <div>
    <Icon color="muted" icon="Edit" /> Muted
  </div>
  <div style={{ backgroundColor: '#8091a5' }}>
    <Icon color="white" icon="Edit" /> White
  </div>
</React.Fragment>
Hide source

Icon sizes

 Tiny size
 Small size
 Large size
<React.Fragment>
  <div>
    <Icon color="primary" size="tiny" icon="Edit" /> Tiny size
  </div>
  <div>
    <Icon color="primary" size="small" icon="Edit" /> Small size
  </div>
  <div>
    <Icon color="primary" size="large" icon="Edit" /> Large size
  </div>
</React.Fragment>
<React.Fragment>
  <div>
    <Icon color="primary" size="tiny" icon="Edit" /> Tiny size
  </div>
  <div>
    <Icon color="primary" size="small" icon="Edit" /> Small size
  </div>
  <div>
    <Icon color="primary" size="large" icon="Edit" /> Large size
  </div>
</React.Fragment>
Hide source

Icon type

<React.Fragment>
  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
    <Icon icon="ArrowDown" />
    <Icon icon="ArrowDownTrimmed" />
    <Icon icon="ArrowUp" />
    <Icon icon="ArrowUpTrimmed" />
    <Icon icon="Asset" />
    <Icon icon="AssetTrimmed" />
    <Icon icon="ChatBubble" />
    <Icon icon="ChatBubbleTrimmed" />
    <Icon icon="CheckCircle" />
    <Icon icon="CheckCircleTrimmed" />
    <Icon icon="ChevronDown" />
    <Icon icon="ChevronDownTrimmed" />
    <Icon icon="ChevronLeft" />
    <Icon icon="ChevronLeftTrimmed" />
    <Icon icon="ChevronRight" />
    <Icon icon="ChevronRightTrimmed" />
    <Icon icon="ChevronUp" />
    <Icon icon="ChevronUpTrimmed" />
    <Icon icon="Clock" />
    <Icon icon="ClockTrimmed" />
    <Icon icon="Close" />
    <Icon icon="CloseTrimmed" />
    <Icon icon="Code" />
    <Icon icon="CodeTrimmed" />
    <Icon icon="Copy" />
    <Icon icon="CopyTrimmed" />
    <Icon icon="Download" />
    <Icon icon="DownloadTrimmed" />
    <Icon icon="Drag" />
    <Icon icon="DragTrimmed" />
    <Icon icon="Edit" />
    <Icon icon="EditTrimmed" />
    <Icon icon="EmbeddedEntryBlock" />
    <Icon icon="EmbeddedEntryBlockTrimmed" />
    <Icon icon="EmbeddedEntryInline" />
    <Icon icon="EmbeddedEntryInlineTrimmed" />
    <Icon icon="Entry" />
    <Icon icon="EntryTrimmed" />
    <Icon icon="ErrorCircle" />
    <Icon icon="ErrorCircleTrimmed" />
    <Icon icon="ExternalLink" />
    <Icon icon="ExternalLinkTrimmed" />
    <Icon icon="FaceHappy" />
    <Icon icon="FaceHappyTrimmed" />
    <Icon icon="Filter" />
    <Icon icon="FilterTrimmed" />
    <Icon icon="Folder" />
    <Icon icon="FolderCreate" />
    <Icon icon="FolderCreateTrimmed" />
    <Icon icon="FolderOpen" />
    <Icon icon="FolderOpenTrimmed" />
    <Icon icon="FolderTrimmed" />
    <Icon icon="FormatBold" />
    <Icon icon="FormatBoldTrimmed" />
    <Icon icon="FormatItalic" />
    <Icon icon="FormatItalicTrimmed" />
    <Icon icon="FormatUnderlined" />
    <Icon icon="FormatUnderlinedTrimmed" />
    <Icon icon="Heading" />
    <Icon icon="HeadingOne" />
    <Icon icon="HeadingOneTrimmed" />
    <Icon icon="HeadingTrimmed" />
    <Icon icon="HeadingTwo" />
    <Icon icon="HeadingTwoTrimmed" />
    <Icon icon="HelpCircle" />
    <Icon icon="HelpCircleTrimmed" />
    <Icon icon="HorizontalRule" />
    <Icon icon="HorizontalRuleTrimmed" />
    <Icon icon="InfoCircle" />
    <Icon icon="InfoCircleTrimmed" />
    <Icon icon="Link" />
    <Icon icon="LinkTrimmed" />
    <Icon icon="ListBulleted" />
    <Icon icon="ListBulletedTrimmed" />
    <Icon icon="ListNumbered" />
    <Icon icon="ListNumberedTrimmed" />
    <Icon icon="Lock" />
    <Icon icon="LockTrimmed" />
    <Icon icon="LooksOne" />
    <Icon icon="LooksOneTrimmed" />
    <Icon icon="LooksTwo" />
    <Icon icon="LooksTwoTrimmed" />
    <Icon icon="Menu" />
    <Icon icon="MenuTrimmed" />
    <Icon icon="MoreHorizontal" />
    <Icon icon="MoreHorizontalTrimmed" />
    <Icon icon="MoreVertical" />
    <Icon icon="MoreVerticalTrimmed" />
    <Icon icon="Plus" />
    <Icon icon="PlusCircle" />
    <Icon icon="PlusCircleTrimmed" />
    <Icon icon="PlusTrimmed" />
    <Icon icon="Quote" />
    <Icon icon="QuoteTrimmed" />
    <Icon icon="Receipt" />
    <Icon icon="ReceiptTrimmed" />
    <Icon icon="Search" />
    <Icon icon="SearchTrimmed" />
    <Icon icon="Settings" />
    <Icon icon="SettingsTrimmed" />
    <Icon icon="ShoppingCart" />
    <Icon icon="ShoppingCartTrimmed" />
    <Icon icon="Star" />
    <Icon icon="StarTrimmed" />
    <Icon icon="Text" />
    <Icon icon="TextTrimmed" />
    <Icon icon="ThumbDown" />
    <Icon icon="ThumbDownTrimmed" />
    <Icon icon="ThumbUp" />
    <Icon icon="ThumbUpTrimmed" />
    <Icon icon="Users" />
    <Icon icon="UsersTrimmed" />
    <Icon icon="Warning" />
    <Icon icon="WarningTrimmed" />
  </div>
</React.Fragment>
<React.Fragment>
  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
    <Icon icon="ArrowDown" />
    <Icon icon="ArrowDownTrimmed" />
    <Icon icon="ArrowUp" />
    <Icon icon="ArrowUpTrimmed" />
    <Icon icon="Asset" />
    <Icon icon="AssetTrimmed" />
    <Icon icon="ChatBubble" />
    <Icon icon="ChatBubbleTrimmed" />
    <Icon icon="CheckCircle" />
    <Icon icon="CheckCircleTrimmed" />
    <Icon icon="ChevronDown" />
    <Icon icon="ChevronDownTrimmed" />
    <Icon icon="ChevronLeft" />
    <Icon icon="ChevronLeftTrimmed" />
    <Icon icon="ChevronRight" />
    <Icon icon="ChevronRightTrimmed" />
    <Icon icon="ChevronUp" />
    <Icon icon="ChevronUpTrimmed" />
    <Icon icon="Clock" />
    <Icon icon="ClockTrimmed" />
    <Icon icon="Close" />
    <Icon icon="CloseTrimmed" />
    <Icon icon="Code" />
    <Icon icon="CodeTrimmed" />
    <Icon icon="Copy" />
    <Icon icon="CopyTrimmed" />
    <Icon icon="Download" />
    <Icon icon="DownloadTrimmed" />
    <Icon icon="Drag" />
    <Icon icon="DragTrimmed" />
    <Icon icon="Edit" />
    <Icon icon="EditTrimmed" />
    <Icon icon="EmbeddedEntryBlock" />
    <Icon icon="EmbeddedEntryBlockTrimmed" />
    <Icon icon="EmbeddedEntryInline" />
    <Icon icon="EmbeddedEntryInlineTrimmed" />
    <Icon icon="Entry" />
    <Icon icon="EntryTrimmed" />
    <Icon icon="ErrorCircle" />
    <Icon icon="ErrorCircleTrimmed" />
    <Icon icon="ExternalLink" />
    <Icon icon="ExternalLinkTrimmed" />
    <Icon icon="FaceHappy" />
    <Icon icon="FaceHappyTrimmed" />
    <Icon icon="Filter" />
    <Icon icon="FilterTrimmed" />
    <Icon icon="Folder" />
    <Icon icon="FolderCreate" />
    <Icon icon="FolderCreateTrimmed" />
    <Icon icon="FolderOpen" />
    <Icon icon="FolderOpenTrimmed" />
    <Icon icon="FolderTrimmed" />
    <Icon icon="FormatBold" />
    <Icon icon="FormatBoldTrimmed" />
    <Icon icon="FormatItalic" />
    <Icon icon="FormatItalicTrimmed" />
    <Icon icon="FormatUnderlined" />
    <Icon icon="FormatUnderlinedTrimmed" />
    <Icon icon="Heading" />
    <Icon icon="HeadingOne" />
    <Icon icon="HeadingOneTrimmed" />
    <Icon icon="HeadingTrimmed" />
    <Icon icon="HeadingTwo" />
    <Icon icon="HeadingTwoTrimmed" />
    <Icon icon="HelpCircle" />
    <Icon icon="HelpCircleTrimmed" />
    <Icon icon="HorizontalRule" />
    <Icon icon="HorizontalRuleTrimmed" />
    <Icon icon="InfoCircle" />
    <Icon icon="InfoCircleTrimmed" />
    <Icon icon="Link" />
    <Icon icon="LinkTrimmed" />
    <Icon icon="ListBulleted" />
    <Icon icon="ListBulletedTrimmed" />
    <Icon icon="ListNumbered" />
    <Icon icon="ListNumberedTrimmed" />
    <Icon icon="Lock" />
    <Icon icon="LockTrimmed" />
    <Icon icon="LooksOne" />
    <Icon icon="LooksOneTrimmed" />
    <Icon icon="LooksTwo" />
    <Icon icon="LooksTwoTrimmed" />
    <Icon icon="Menu" />
    <Icon icon="MenuTrimmed" />
    <Icon icon="MoreHorizontal" />
    <Icon icon="MoreHorizontalTrimmed" />
    <Icon icon="MoreVertical" />
    <Icon icon="MoreVerticalTrimmed" />
    <Icon icon="Plus" />
    <Icon icon="PlusCircle" />
    <Icon icon="PlusCircleTrimmed" />
    <Icon icon="PlusTrimmed" />
    <Icon icon="Quote" />
    <Icon icon="QuoteTrimmed" />
    <Icon icon="Receipt" />
    <Icon icon="ReceiptTrimmed" />
    <Icon icon="Search" />
    <Icon icon="SearchTrimmed" />
    <Icon icon="Settings" />
    <Icon icon="SettingsTrimmed" />
    <Icon icon="ShoppingCart" />
    <Icon icon="ShoppingCartTrimmed" />
    <Icon icon="Star" />
    <Icon icon="StarTrimmed" />
    <Icon icon="Text" />
    <Icon icon="TextTrimmed" />
    <Icon icon="ThumbDown" />
    <Icon icon="ThumbDownTrimmed" />
    <Icon icon="ThumbUp" />
    <Icon icon="ThumbUpTrimmed" />
    <Icon icon="Users" />
    <Icon icon="UsersTrimmed" />
    <Icon icon="Warning" />
    <Icon icon="WarningTrimmed" />
  </div>
</React.Fragment>
Hide source

Accessibility

Missing