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

Resizing the icon

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.

Convenience component

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

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.

Add
AddColumnLeft
AddColumnRight
AddRowBottom
AddRowTop
AddToArtifact
AddToFolder
Airplane
AlignCenter
AlignJustify
AlignLeft
AlignRight
AlignmentBottom
AlignmentHorizontalCenter
AlignmentLeft
AlignmentRight
AlignmentTop
AlignmentVerticalCenter
Annotation
Application
Applications
Archive
ArrowBottomLeft
ArrowBottomRight
ArrowDown
ArrowLeft
ArrowRight
ArrowTopLeft
ArrowTopRight
ArrowUp
ArrowsHorizontal
ArrowsVertical
Asterisk
AutomaticUpdates
Badge
BanCircle
BankAccount
Barcode
Blank
BlockedPerson
Bold
Book
Bookmark
Box
Briefcase
BringData
Build
Calculator
Calendar
Camera
CaretDown
CaretLeft
CaretRight
CaretUp
CellTower
Changes
Chart
Chat
ChevronBackward
ChevronDown
ChevronForward
ChevronLeft
ChevronRight
ChevronUp
Circle
CircleArrowDown
CircleArrowLeft
CircleArrowRight
CircleArrowUp
Citation
Clean
Clipboard
Cloud
CloudDownload
CloudUpload
Code
CodeBlock
Cog
CollapseAll
ColumnLayout
Comment
Comparison
Compass
Compressed
Confirm
Console
Contrast
Control
CreditCard
Cross
Crown
Cube
CubeAdd
CubeRemove
CurvedRangeChart
Cut
Dashboard
DataLineage
Database
Delete
Delta
DeriveColumn
Desktop
Diagnosis
DiagramTree
DirectionLeft
DirectionRight
Disable
Document
DocumentOpen
DocumentShare
Dollar
Dot
DoubleCaretHorizontal
DoubleCaretVertical
DoubleChevronDown
DoubleChevronLeft
DoubleChevronRight
DoubleChevronUp
DoughnutChart
Download
DragHandleHorizontal
DragHandleVertical
Draw
DriveTime
Duplicate
Edit
Eject
Endorsed
Envelope
Equals
Eraser
Error
Euro
Exchange
ExcludeRow
ExpandAll
Export
EyeOff
EyeOn
EyeOpen
FastBackward
FastForward
Feed
FeedSubscribed
Film
Filter
FilterKeep
FilterList
FilterOpen
FilterRemove
Flag
Flame
Flash
FloppyDisk
FlowBranch
FlowEnd
FlowLinear
FlowReview
FlowReviewBranch
Flows
FolderClose
FolderNew
FolderOpen
FolderShared
FolderSharedOpen
Follower
Following
Font
Fork
Form
FullCircle
FullStackedChart
Fullscreen
Function
GanttChart
Geolocation
Geosearch
GitBranch
GitCommit
GitMerge
GitNewBranch
GitPull
GitPush
GitRepo
Glass
Globe
GlobeNetwork
Graph
GraphRemove
GreaterThan
GreaterThanOrEqualTo
Grid
GridView
GroupObjects
GroupedBarChart
Hand
HandDown
HandLeft
HandRight
HandUp
Hat
Header
HeaderOne
HeaderTwo
Headset
Heart
HeartBroken
HeatGrid
Heatmap
Help
HelperManagement
Highlight
History
Home
HorizontalBarChart
HorizontalBarChartAsc
HorizontalBarChartDesc
HorizontalDistribution
IdNumber
ImageRotateLeft
ImageRotateRight
Import
Inbox
InboxFiltered
InboxGeo
InboxSearch
InboxUpdate
InfoSign
Inheritance
InheritedGroup
InnerJoin
Insert
Intersection
IpAddress
Issue
IssueClosed
IssueNew
Italic
JoinTable
Key
KeyBackspace
KeyCommand
KeyControl
KeyDelete
KeyEnter
KeyEscape
KeyOption
KeyShift
KeyTab
KnownVehicle
LabTest
Label
Layer
Layers
Layout
LayoutAuto
LayoutBalloon
LayoutCircle
LayoutGrid
LayoutGroupBy
LayoutHierarchy
LayoutLinear
LayoutSkewGrid
LayoutSortedClusters
Learning
LeftJoin
LessThan
LessThanOrEqualTo
Lifesaver
Lightbulb
Link
List
ListColumns
ListDetailView
Locate
Lock
LogIn
LogOut
Manual
ManuallyEnteredData
Map
MapCreate
MapMarker
Maximize
Media
Menu
MenuClosed
MenuOpen
MergeColumns
MergeLinks
Minimize
Minus
MobilePhone
MobileVideo
Moon
More
Mountain
Move
Mugshot
MultiSelect
Music
NewDrawing
NewGridItem
NewLayer
NewLayers
NewLink
NewObject
NewPerson
NewPrescription
NewTextBox
Ninja
NotEqualTo
Notifications
NotificationsUpdated
NumberedList
Numerical
Office
Offline
OilField
OneColumn
Outdated
PageLayout
PanelStats
PanelTable
Paperclip
Paragraph
Path
PathSearch
Pause
People
Percentage
Person
Phone
PieChart
Pin
Pivot
PivotTable
Play
Plus
PolygonFilter
Power
PredictiveAnalysis
Prescription
Presentation
Print
Projects
Properties
Property
PublishFunction
Pulse
Random
Record
Redo
Refresh
RegressionChart
Remove
RemoveColumn
RemoveColumnLeft
RemoveColumnRight
RemoveRowBottom
RemoveRowTop
Repeat
Reset
Resolve
Rig
RightJoin
Ring
RotateDocument
RotatePage
Satellite
Saved
ScatterPlot
Search
SearchAround
SearchTemplate
SearchText
SegmentedControl
Select
Selection
SendTo
SendToGraph
SendToMap
SeriesAdd
SeriesConfiguration
SeriesDerived
SeriesFiltered
SeriesSearch
Settings
Share
Shield
Shop
ShoppingCart
SignalSearch
SimCard
Slash
SmallCross
SmallMinus
SmallPlus
SmallTick
Snowflake
SocialMedia
Sort
SortAlphabetical
SortAlphabeticalDesc
SortAsc
SortDesc
SortNumerical
SortNumericalDesc
SplitColumns
Square
StackedChart
Star
StarEmpty
StepBackward
StepChart
StepForward
Stop
Stopwatch
Strikethrough
Style
SwapHorizontal
SwapVertical
SymbolCircle
SymbolCross
SymbolDiamond
SymbolSquare
SymbolTriangleDown
SymbolTriangleUp
Tag
TakeAction
Taxi
TextHighlight
Th
ThDerived
ThDisconnect
ThFiltered
ThList
ThumbsDown
ThumbsUp
Tick
TickCircle
Time
TimelineAreaChart
TimelineBarChart
TimelineEvents
TimelineLineChart
Tint
Torch
Tractor
Train
Translate
Trash
Tree
TrendingDown
TrendingUp
Truck
TwoColumns
Unarchive
Underline
Undo
UngroupObjects
UnknownVehicle
Unlock
Unpin
Unresolve
Updated
Upload
User
Variable
VerticalBarChartAsc
VerticalBarChartDesc
VerticalDistribution
Video
Virus
VolumeDown
VolumeOff
VolumeUp
Walk
WarningSign
WaterfallChart
Widget
WidgetButton
WidgetFooter
WidgetHeader
Wrench
ZoomIn
ZoomOut
ZoomToFit