Introduction

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

Implementation Details

The Icon component is almost identical to the Icon component found in BlueprintsJS. The exception is that BlueprintJS is using TypeScript.

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

<Icon icon="cross" />
Hide code

Resizing the icon

<Icon icon="ban-circle" size={40} />
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.

<Pane>
  <Icon icon="ban-circle" color="danger" marginRight={16} />
  <Icon icon="tick-circle" color="success" marginRight={16} />
  <Icon icon="warning-sign" color="warning" marginRight={16} />
  <Icon icon="info-sign" color="info" marginRight={16} />
  <Icon icon="edit" color="muted" marginRight={16} />
  <Icon icon="edit" color="selected" marginRight={16} />
  <Icon icon="edit" color="disabled" marginRight={16} />
</Pane>
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.

add

add-column-left

add-column-right

add-row-bottom

add-row-top

add-to-artifact

add-to-folder

airplane

align-center

align-justify

align-left

align-right

alignment-bottom

alignment-horizontal-center

alignment-left

alignment-right

alignment-top

alignment-vertical-center

annotation

application

applications

arrow-bottom-left

arrow-bottom-right

arrow-down

arrow-left

arrow-right

arrow-top-left

arrow-top-right

arrow-up

arrows-horizontal

arrows-vertical

asterisk

automatic-updates

badge

ban-circle

bank-account

barcode

blank

blocked-person

bold

book

bookmark

box

briefcase

build

calculator

calendar

camera

caret-down

caret-left

caret-right

caret-up

cell-tower

changes

chart

chat

chevron-backward

chevron-down

chevron-forward

chevron-left

chevron-right

chevron-up

circle

circle-arrow-down

circle-arrow-left

circle-arrow-right

circle-arrow-up

citation

clipboard

cloud

cloud-download

cloud-upload

code

code-block

cog

collapse-all

column-layout

comment

comparison

compass

compressed

confirm

console

contrast

control

credit-card

cross

crown

curved-range-chart

cut

dashboard

database

delete

delta

derive-column

desktop

diagram-tree

direction-left

direction-right

disable

document

document-open

document-share

dollar

dot

double-caret-horizontal

double-caret-vertical

double-chevron-down

double-chevron-left

double-chevron-right

double-chevron-up

doughnut-chart

download

drag-handle-horizontal

drag-handle-vertical

draw

drive-time

duplicate

edit

eject

endorsed

envelope

eraser

error

euro

exchange

exclude-row

expand-all

export

eye-off

eye-on

eye-open

fast-backward

fast-forward

feed

feed-subscribed

film

filter

filter-keep

filter-list

filter-remove

flag

flame

flash

floppy-disk

flow-branch

flow-end

flow-linear

flow-review

flow-review-branch

flows

folder-close

folder-new

folder-open

folder-shared

folder-shared-open

follower

following

font

fork

form

full-circle

full-stacked-chart

fullscreen

function

gantt-chart

geolocation

geosearch

git-branch

git-commit

git-merge

git-new-branch

git-pull

git-push

git-repo

glass

globe

globe-network

graph

graph-remove

grid

grid-view

group-objects

grouped-bar-chart

hand

hand-down

hand-left

hand-right

hand-up

header

header-one

header-two

headset

heart

heart-broken

heat-grid

heatmap

help

helper-management

highlight

history

home

horizontal-bar-chart

horizontal-bar-chart-asc

horizontal-bar-chart-desc

horizontal-distribution

id-number

image-rotate-left

image-rotate-right

import

inbox

info-sign

inner-join

insert

intersection

ip-address

issue

issue-closed

issue-new

italic

join-table

key

key-backspace

key-command

key-control

key-delete

key-enter

key-escape

key-option

key-shift

key-tab

known-vehicle

label

layer

layers

layout

layout-auto

layout-balloon

layout-circle

layout-grid

layout-group-by

layout-hierarchy

layout-linear

layout-skew-grid

layout-sorted-clusters

left-join

lightbulb

link

list

list-columns

list-detail-view

locate

lock

log-in

log-out

manual

manually-entered-data

map

map-create

map-marker

maximize

media

menu

menu-closed

menu-open

merge-columns

merge-links

minimize

minus

mobile-phone

mobile-video

moon

more

mountain

move

mugshot

multi-select

music

new-grid-item

new-link

new-object

new-person

new-prescription

new-text-box

ninja

notifications

notifications-updated

numbered-list

numerical

office

offline

oil-field

one-column

outdated

page-layout

panel-stats

panel-table

paperclip

paragraph

path

path-search

pause

people

percentage

person

phone

pie-chart

pin

pivot

pivot-table

play

plus

polygon-filter

power

predictive-analysis

prescription

presentation

print

projects

properties

property

publish-function

pulse

random

record

redo

refresh

regression-chart

remove

remove-column

remove-column-left

remove-column-right

remove-row-bottom

remove-row-top

repeat

resolve

rig

right-join

ring

rotate-document

rotate-page

satellite

saved

scatter-plot

search

search-around

search-template

search-text

segmented-control

select

selection

send-to

send-to-graph

send-to-map

series-add

series-configuration

series-derived

series-filtered

series-search

settings

share

shield

shop

shopping-cart

sim-card

slash

small-cross

small-minus

small-plus

small-tick

snowflake

social-media

sort

sort-alphabetical

sort-alphabetical-desc

sort-asc

sort-desc

sort-numerical

sort-numerical-desc

split-columns

square

stacked-chart

star

star-empty

step-backward

step-chart

step-forward

stop

strikethrough

style

swap-horizontal

swap-vertical

symbol-circle

symbol-cross

symbol-diamond

symbol-square

symbol-triangle-down

symbol-triangle-up

tag

take-action

taxi

text-highlight

th

th-derived

th-list

thumbs-down

thumbs-up

tick

tick-circle

time

timeline-area-chart

timeline-bar-chart

timeline-events

timeline-line-chart

tint

torch

train

translate

trash

tree

trending-down

trending-up

two-columns

underline

undo

ungroup-objects

unknown-vehicle

unlock

unpin

unresolve

updated

upload

user

variable

vertical-bar-chart-asc

vertical-bar-chart-desc

vertical-distribution

video

volume-down

volume-off

volume-up

walk

warning-sign

waterfall-chart

widget

widget-button

widget-footer

widget-header

wrench

zoom-in

zoom-out

zoom-to-fit

Icon Props

colorstring = 'currentColor'
Color of icon. Equivalent to setting CSS `fill` property.
iconstringrequired
Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing. - If `null` or `undefined` or `false`, this component will render nothing. - If given an `IconName` (a string literal union of all icon names), that icon will be rendered as an `<svg>` with `<path>` tags. - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._ This type is supported to simplify usage of this component in other Blueprint components. As a consumer, you should never use `<Icon icon={<element />}` directly; simply render `<element />` instead.
sizenumber = 16
Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop.
titlestring
Description string. Browsers usually render this as a tooltip on hover, whereas screen readers will use it for aural feedback. By default, this is set to the icon's name for accessibility.
styleobject
CSS style properties.
themeobjectrequired
Theme provided by ThemeProvider.