Introduction

Evergreen uses the amazing @blueprintjs/icons package for all of its icons.

Implementation Details

All of Evergreen's icons are exported as individual components, and can be imported directly like so:

import { CrossIcon } from 'evergreen-ui'

import { InfoSignIcon, EditIcon } from 'evergreen-ui'

Icons are not buttons

A icon is only a svg element and should not have onClick handlers. If you need a clickable icon, use IconButton instead.

Basic icon usage

Hide code

Resizing the icon

Hide code

Changing the color

Use the color prop on a Icon component to change the color. There are a couple of presets available: default, muted, disabled, selected, success, info, danger, warning.

Hide code

Convenience component

There is an exported Icon component which acts as a convenient wrapper around icons so you can dynamically pass icons to it:

Hide code

All icons

Each icon has two different svg variations, a 16px and 20px variation. Evergreen will choose the most appropriate size based on the size passed to the icon.

AddIcon

AddColumnLeftIcon

AddColumnRightIcon

AddRowBottomIcon

AddRowTopIcon

AddToArtifactIcon

AddToFolderIcon

AirplaneIcon

AlignCenterIcon

AlignJustifyIcon

AlignLeftIcon

AlignRightIcon

AlignmentBottomIcon

AlignmentHorizontalCenterIcon

AlignmentLeftIcon

AlignmentRightIcon

AlignmentTopIcon

AlignmentVerticalCenterIcon

AnnotationIcon

ApplicationIcon

ApplicationsIcon

ArchiveIcon

ArrowBottomLeftIcon

ArrowBottomRightIcon

ArrowDownIcon

ArrowLeftIcon

ArrowRightIcon

ArrowTopLeftIcon

ArrowTopRightIcon

ArrowUpIcon

ArrowsHorizontalIcon

ArrowsVerticalIcon

AsteriskIcon

AutomaticUpdatesIcon

BadgeIcon

BanCircleIcon

BankAccountIcon

BarcodeIcon

BlankIcon

BlockedPersonIcon

BoldIcon

BookIcon

BookmarkIcon

BoxIcon

BriefcaseIcon

BringDataIcon

BuildIcon

CalculatorIcon

CalendarIcon

CameraIcon

CaretDownIcon

CaretLeftIcon

CaretRightIcon

CaretUpIcon

CellTowerIcon

ChangesIcon

ChartIcon

ChatIcon

ChevronBackwardIcon

ChevronDownIcon

ChevronForwardIcon

ChevronLeftIcon

ChevronRightIcon

ChevronUpIcon

CircleIcon

CircleArrowDownIcon

CircleArrowLeftIcon

CircleArrowRightIcon

CircleArrowUpIcon

CitationIcon

CleanIcon

ClipboardIcon

CloudIcon

CloudDownloadIcon

CloudUploadIcon

CodeIcon

CodeBlockIcon

CogIcon

CollapseAllIcon

ColumnLayoutIcon

CommentIcon

ComparisonIcon

CompassIcon

CompressedIcon

ConfirmIcon

ConsoleIcon

ContrastIcon

ControlIcon

CreditCardIcon

CrossIcon

CrownIcon

CubeIcon

CubeAddIcon

CubeRemoveIcon

CurvedRangeChartIcon

CutIcon

DashboardIcon

DataLineageIcon

DatabaseIcon

DeleteIcon

DeltaIcon

DeriveColumnIcon

DesktopIcon

DiagnosisIcon

DiagramTreeIcon

DirectionLeftIcon

DirectionRightIcon

DisableIcon

DocumentIcon

DocumentOpenIcon

DocumentShareIcon

DollarIcon

DotIcon

DoubleCaretHorizontalIcon

DoubleCaretVerticalIcon

DoubleChevronDownIcon

DoubleChevronLeftIcon

DoubleChevronRightIcon

DoubleChevronUpIcon

DoughnutChartIcon

DownloadIcon

DragHandleHorizontalIcon

DragHandleVerticalIcon

DrawIcon

DriveTimeIcon

DuplicateIcon

EditIcon

EjectIcon

EndorsedIcon

EnvelopeIcon

EqualsIcon

EraserIcon

ErrorIcon

EuroIcon

ExchangeIcon

ExcludeRowIcon

ExpandAllIcon

ExportIcon

EyeOffIcon

EyeOnIcon

EyeOpenIcon

FastBackwardIcon

FastForwardIcon

FeedIcon

FeedSubscribedIcon

FilmIcon

FilterIcon

FilterKeepIcon

FilterListIcon

FilterOpenIcon

FilterRemoveIcon

FlagIcon

FlameIcon

FlashIcon

FloppyDiskIcon

FlowBranchIcon

FlowEndIcon

FlowLinearIcon

FlowReviewIcon

FlowReviewBranchIcon

FlowsIcon

FolderCloseIcon

FolderNewIcon

FolderOpenIcon

FolderSharedIcon

FolderSharedOpenIcon

FollowerIcon

FollowingIcon

FontIcon

ForkIcon

FormIcon

FullCircleIcon

FullStackedChartIcon

FullscreenIcon

FunctionIcon

GanttChartIcon

GeolocationIcon

GeosearchIcon

GitBranchIcon

GitCommitIcon

GitMergeIcon

GitNewBranchIcon

GitPullIcon

GitPushIcon

GitRepoIcon

GlassIcon

GlobeIcon

GlobeNetworkIcon

GraphIcon

GraphRemoveIcon

GreaterThanIcon

GreaterThanOrEqualToIcon

GridIcon

GridViewIcon

GroupObjectsIcon

GroupedBarChartIcon

HandIcon

HandDownIcon

HandLeftIcon

HandRightIcon

HandUpIcon

HatIcon

HeaderIcon

HeaderOneIcon

HeaderTwoIcon

HeadsetIcon

HeartIcon

HeartBrokenIcon

HeatGridIcon

HeatmapIcon

HelpIcon

HelperManagementIcon

HighlightIcon

HistoryIcon

HomeIcon

HorizontalBarChartIcon

HorizontalBarChartAscIcon

HorizontalBarChartDescIcon

HorizontalDistributionIcon

IdNumberIcon

ImageRotateLeftIcon

ImageRotateRightIcon

ImportIcon

InboxIcon

InboxFilteredIcon

InboxGeoIcon

InboxSearchIcon

InboxUpdateIcon

InfoSignIcon

InheritanceIcon

InheritedGroupIcon

InnerJoinIcon

InsertIcon

IntersectionIcon

IpAddressIcon

IssueIcon

IssueClosedIcon

IssueNewIcon

ItalicIcon

JoinTableIcon

KeyIcon

KeyBackspaceIcon

KeyCommandIcon

KeyControlIcon

KeyDeleteIcon

KeyEnterIcon

KeyEscapeIcon

KeyOptionIcon

KeyShiftIcon

KeyTabIcon

KnownVehicleIcon

LabTestIcon

LabelIcon

LayerIcon

LayersIcon

LayoutIcon

LayoutAutoIcon

LayoutBalloonIcon

LayoutCircleIcon

LayoutGridIcon

LayoutGroupByIcon

LayoutHierarchyIcon

LayoutLinearIcon

LayoutSkewGridIcon

LayoutSortedClustersIcon

LearningIcon

LeftJoinIcon

LessThanIcon

LessThanOrEqualToIcon

LifesaverIcon

LightbulbIcon

LinkIcon

ListIcon

ListColumnsIcon

ListDetailViewIcon

LocateIcon

LockIcon

LogInIcon

LogOutIcon

ManualIcon

ManuallyEnteredDataIcon

MapIcon

MapCreateIcon

MapMarkerIcon

MaximizeIcon

MediaIcon

MenuIcon

MenuClosedIcon

MenuOpenIcon

MergeColumnsIcon

MergeLinksIcon

MinimizeIcon

MinusIcon

MobilePhoneIcon

MobileVideoIcon

MoonIcon

MoreIcon

MountainIcon

MoveIcon

MugshotIcon

MultiSelectIcon

MusicIcon

NewDrawingIcon

NewGridItemIcon

NewLayerIcon

NewLayersIcon

NewLinkIcon

NewObjectIcon

NewPersonIcon

NewPrescriptionIcon

NewTextBoxIcon

NinjaIcon

NotEqualToIcon

NotificationsIcon

NotificationsUpdatedIcon

NumberedListIcon

NumericalIcon

OfficeIcon

OfflineIcon

OilFieldIcon

OneColumnIcon

OutdatedIcon

PageLayoutIcon

PanelStatsIcon

PanelTableIcon

PaperclipIcon

ParagraphIcon

PathIcon

PathSearchIcon

PauseIcon

PeopleIcon

PercentageIcon

PersonIcon

PhoneIcon

PieChartIcon

PinIcon

PivotIcon

PivotTableIcon

PlayIcon

PlusIcon

PolygonFilterIcon

PowerIcon

PredictiveAnalysisIcon

PrescriptionIcon

PresentationIcon

PrintIcon

ProjectsIcon

PropertiesIcon

PropertyIcon

PublishFunctionIcon

PulseIcon

RandomIcon

RecordIcon

RedoIcon

RefreshIcon

RegressionChartIcon

RemoveIcon

RemoveColumnIcon

RemoveColumnLeftIcon

RemoveColumnRightIcon

RemoveRowBottomIcon

RemoveRowTopIcon

RepeatIcon

ResetIcon

ResolveIcon

RigIcon

RightJoinIcon

RingIcon

RotateDocumentIcon

RotatePageIcon

SatelliteIcon

SavedIcon

ScatterPlotIcon

SearchIcon

SearchAroundIcon

SearchTemplateIcon

SearchTextIcon

SegmentedControlIcon

SelectIcon

SelectionIcon

SendToIcon

SendToGraphIcon

SendToMapIcon

SeriesAddIcon

SeriesConfigurationIcon

SeriesDerivedIcon

SeriesFilteredIcon

SeriesSearchIcon

SettingsIcon

ShareIcon

ShieldIcon

ShopIcon

ShoppingCartIcon

SignalSearchIcon

SimCardIcon

SlashIcon

SmallCrossIcon

SmallMinusIcon

SmallPlusIcon

SmallTickIcon

SnowflakeIcon

SocialMediaIcon

SortIcon

SortAlphabeticalIcon

SortAlphabeticalDescIcon

SortAscIcon

SortDescIcon

SortNumericalIcon

SortNumericalDescIcon

SplitColumnsIcon

SquareIcon

StackedChartIcon

StarIcon

StarEmptyIcon

StepBackwardIcon

StepChartIcon

StepForwardIcon

StopIcon

StopwatchIcon

StrikethroughIcon

StyleIcon

SwapHorizontalIcon

SwapVerticalIcon

SymbolCircleIcon

SymbolCrossIcon

SymbolDiamondIcon

SymbolSquareIcon

SymbolTriangleDownIcon

SymbolTriangleUpIcon

TagIcon

TakeActionIcon

TaxiIcon

TextHighlightIcon

ThIcon

ThDerivedIcon

ThDisconnectIcon

ThFilteredIcon

ThListIcon

ThumbsDownIcon

ThumbsUpIcon

TickIcon

TickCircleIcon

TimeIcon

TimelineAreaChartIcon

TimelineBarChartIcon

TimelineEventsIcon

TimelineLineChartIcon

TintIcon

TorchIcon

TractorIcon

TrainIcon

TranslateIcon

TrashIcon

TreeIcon

TrendingDownIcon

TrendingUpIcon

TruckIcon

TwoColumnsIcon

UnarchiveIcon

UnderlineIcon

UndoIcon

UngroupObjectsIcon

UnknownVehicleIcon

UnlockIcon

UnpinIcon

UnresolveIcon

UpdatedIcon

UploadIcon

UserIcon

VariableIcon

VerticalBarChartAscIcon

VerticalBarChartDescIcon

VerticalDistributionIcon

VideoIcon

VirusIcon

VolumeDownIcon

VolumeOffIcon

VolumeUpIcon

WalkIcon

WarningSignIcon

WaterfallChartIcon

WidgetIcon

WidgetButtonIcon

WidgetFooterIcon

WidgetHeaderIcon

WrenchIcon

ZoomInIcon

ZoomOutIcon

ZoomToFitIcon

AddIcon Props