Icon

Icons are used to visually communicate core parts of the product and available actions.

This component should not be used on its own. Icons should always appear in a context where their meaning is clear or explained by a label.

note

If you're looking for an interactive icon refer to the IconButton.

warning

The weight prop is removed with 8.0.0 version of Atlas.

You can use the name prop for using Bold or Filled version of the Icon instead of weight prop. For the implementation example please check the Bold Icon example

Please refer to the Available Icons section to check if Bold or Filled versions of your Icon are exists.

Available icons

Filter

Size

AddValue

AppGrid

ArrowCircleLeft

ArrowCircleRight

ArrowDown

ArrowDownLeft

ArrowRefresh

ArrowDownRight

ArrowLeft

ArrowRight

ArrowSplit

ArrowUp

ArrowUpLeft

ArrowUpRight

BannerPositionBottom

BannerPositionTop

BarChartHorizontal

BarChartVertical

Bell

BellCrossed

Block

Calendar

Camera

Charts

Check

CheckBold

ChevronBluntLeft

ChevronBluntRight

ChevronDown

ChevronDownDouble

ChevronDownSmall

ChevronLeft

ChevronLeftSmall

ChevronLeftBold

ChevronLeftDouble

ChevronRight

ChevronRightSmall

ChevronRightBold

ChevronRightDouble

ChevronUp

ChevronUpDouble

ChevronUpSmall

Clipboard

Clock

Code

CogWheel

Columns

Copy

Cross

CrossFilled

Data

DeviceMobile

DeviceTablet

DeviceTabletMobile

Document

DocumentCopy

DocumentSave

DotsHorizontal

DotsHorizontalFilled

Download

DrillDown

DuoBarChart

DuoComboChart

DuoLineChart

DuoPieChart

DuoScoreCard

DuoStackedBarChart

DuoTable

Edit

Eye

EyeClosed

Feed

Filter

FilterActive

Flag

Folder

FolderOpen

Globe

Hash

Heart

Hourglass

Horizontal

Image

Import

InAppEvent

Info

InfoFilled

Key

KeyFilled

Kpi

KpiCalculated

KpiEvent

Language

LettersAscending

LettersDescending

LineChart

Link

LinkExternal

List

LockClosed

LockOpen

LoadingSpinner

LogIn

LogOut

Mail

Maximize

Megaphone

Menu

Minimize

Minus

MinusBoxed

MinusBold

Move

Money

MsTeams

Negative

NegativeFilled

Network

NetworkCheckmark

NoImage

NotFound

NumbersAscending

NumbersDescending

Office

PaintBrush

Pause

Pencil

Person

PersonGroup

PieChart

Pin

PinFilled

PlatformAndroid

PlatformAndroidFilled

PlatformAppGalleryFilled

PlatformIos

PlatformIosFilled

PlatformWeb

PlatformWebFilled

PlatformWindows

PlatformWindowsFilled

PlatformWindowsPhone

PlatformWindowsPhoneFilled

PlatformAndroidTv

PlatformAndroidTvFilled

PlatformFireTv

PlatformFireTvFilled

PlatformGooglePlay

PlatformGooglePlayFilled

PlatformHuaweiFilled

PlatformLGTVFilled

PlatformRokuTVFilled

PlatformSamsungTVFilled

PlatformVizioTVFilled

PlatformNintendo

PlatformXbox

PlatformPlaystation

StoreEpicGames

StoreSteam

StoreMynintendo

StorePlaystation

PlatformPC

CTV

DeviceConsole

StoreAppStore

CrossMobileCTV

CrossMobilePC

CrossMobileConsole

Play

Plus

PlusBoxed

Positive

PositiveFilled

Question

RemoveItems

Save

ScheduledReport

ScheduledReportFilled

Search

Secure

Share

Slack

Sliders

Sort

SpeechBubble

Star

StarFilled

Sum

Table

TimeAscending

TimeDescending

TableExternal

Trash

Unlink

Unsecure

Unpin

Unverified

Upload

Vertical

Warning

WarningFilled

WindowExternal

Zap

ZapFilled

ZoomIn

ZoomOut

info

Duotone Icons don't support small and medium size.

Example

Live Editor

<Icon name="Check" />

<Icon name="Check" />

Result

Loading...

Usage Rules

Do:

• Use if the icon's meaning is clearly understood based on the context

Don’t:

• Use icons that may have various, differing meanings
• Use an icon if text can be a more effective mode of communication
• Use if icon should be interactive

Variants

Bold

You can use the name prop to provide a Bold or Filled version of the Icon.

Please refer to the Available Icons section to check if Bold or Filled versions of your Icon are exists.

Live Editor

function MyIcon() { const isBold = true; return ( <> <Icon name="CheckBold" /> <Icon name={isBold ? 'CheckBold' : 'Check'} /> </> ); }

function MyIcon() {
  const isBold = true;

  return (
    <>
      <Icon name="CheckBold" />
      <Icon name={isBold ? 'CheckBold' : 'Check'} />
    </>
  );
}

Result

Loading...

Color

A color can be set to adjust the appearance of an icon based on the background it's displayed on. Any design-token color is available.

You can also use any color code in hex, rgb, rgba, or hsl formats.

Live Editor

<> <Icon name="Check" color={ColorPositive80} /> <Icon name="Check" color="#ff8000" /> <Icon name="Check" color="rgb(255, 128, 0)" /> <Icon name="Check" color="rgba(255, 128, 0, .6)" /> <Icon name="Check" color="hsl(30, 100%, 50%)" /> </>

<>
  <Icon name="Check" color={ColorPositive80} />
  <Icon name="Check" color="#ff8000" />
  <Icon name="Check" color="rgb(255, 128, 0)" />
  <Icon name="Check" color="rgba(255, 128, 0, .6)" />
  <Icon name="Check" color="hsl(30, 100%, 50%)" />
</>

Result

Loading...

Name

The kind of icon can be set via the name prop. You can find a list of all available icons and their names below.

Live Editor

<Icon name="Check" />

<Icon name="Check" />

Result

Loading...

Size

The Icon component is available in three sizes: small, medium and large.

Live Editor

<> Small <Icon name="Check" size="small" /> Medium <Icon name="Check" size="medium" /> Large <Icon name="Check" size="large" /> </>

<>
  Small <Icon name="Check" size="small" />
  Medium <Icon name="Check" size="medium" />
  Large <Icon name="Check" size="large" />
</>

Result

Loading...

Props

Name	Type	Default
name * Please refer to the list defined above: Link	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
size Small icons have a less detailed svg paths than medium and large icons.	"small" | "medium" | "large"	"medium"
color Any design token color (e.g. ColorNeutral80)	string	—
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Related Components

• Button