Icons

View on GitHub

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

cross
<Icon icon="cross" />
code Hide code

Resizing the icon

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

ban-circletick-circlewarning-signinfo-signediteditedit
<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>
code 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.

search
add

add

add-column-left

add-column-left

add-column-right

add-column-right

add-row-bottom

add-row-bottom

add-row-top

add-row-top

add-to-artifact

add-to-artifact

add-to-folder

add-to-folder

airplane

airplane

align-center

align-center

align-justify

align-justify

align-left

align-left

align-right

align-right

alignment-bottom

alignment-bottom

alignment-horizontal-center

alignment-horizontal-center

alignment-left

alignment-left

alignment-right

alignment-right

alignment-top

alignment-top

alignment-vertical-center

alignment-vertical-center

annotation

annotation

application

application

applications

applications

arrow-bottom-left

arrow-bottom-left

arrow-bottom-right

arrow-bottom-right

arrow-down

arrow-down

arrow-left

arrow-left

arrow-right

arrow-right

arrow-top-left

arrow-top-left

arrow-top-right

arrow-top-right

arrow-up

arrow-up

arrows-horizontal

arrows-horizontal

arrows-vertical

arrows-vertical

asterisk

asterisk

automatic-updates

automatic-updates

badge

badge

ban-circle

ban-circle

bank-account

bank-account

barcode

barcode

blank

blank

blocked-person

blocked-person

bold

bold

book

book

bookmark

bookmark

box

box

briefcase

briefcase

build

build

calculator

calculator

calendar

calendar

camera

camera

caret-down

caret-down

caret-left

caret-left

caret-right

caret-right

caret-up

caret-up

cell-tower

cell-tower

changes

changes

chart

chart

chat

chat

chevron-backward

chevron-backward

chevron-down

chevron-down

chevron-forward

chevron-forward

chevron-left

chevron-left

chevron-right

chevron-right

chevron-up

chevron-up

circle

circle

circle-arrow-down

circle-arrow-down

circle-arrow-left

circle-arrow-left

circle-arrow-right

circle-arrow-right

circle-arrow-up

circle-arrow-up

citation

citation

clipboard

clipboard

cloud

cloud

cloud-download

cloud-download

cloud-upload

cloud-upload

code

code

code-block

code-block

cog

cog

collapse-all

collapse-all

column-layout

column-layout

comment

comment

comparison

comparison

compass

compass

compressed

compressed

confirm

confirm

console

console

contrast

contrast

control

control

credit-card

credit-card

cross

cross

crown

crown

curved-range-chart

curved-range-chart

cut

cut

dashboard

dashboard

database

database

delete

delete

delta

delta

derive-column

derive-column

desktop

desktop

diagram-tree

diagram-tree

direction-left

direction-left

direction-right

direction-right

disable

disable

document

document

document-open

document-open

document-share

document-share

dollar

dollar

dot

dot

double-caret-horizontal

double-caret-horizontal

double-caret-vertical

double-caret-vertical

double-chevron-down

double-chevron-down

double-chevron-left

double-chevron-left

double-chevron-right

double-chevron-right

double-chevron-up

double-chevron-up

doughnut-chart

doughnut-chart

download

download

drag-handle-horizontal

drag-handle-horizontal

drag-handle-vertical

drag-handle-vertical

draw

draw

drive-time

drive-time

duplicate

duplicate

edit

edit

eject

eject

endorsed

endorsed

envelope

envelope

eraser

eraser

error

error

euro

euro

exchange

exchange

exclude-row

exclude-row

expand-all

expand-all

export

export

eye-off

eye-off

eye-on

eye-on

eye-open

eye-open

fast-backward

fast-backward

fast-forward

fast-forward

feed

feed

feed-subscribed

feed-subscribed

film

film

filter

filter

filter-keep

filter-keep

filter-list

filter-list

filter-remove

filter-remove

flag

flag

flame

flame

flash

flash

floppy-disk

floppy-disk

flow-branch

flow-branch

flow-end

flow-end

flow-linear

flow-linear

flow-review

flow-review

flow-review-branch

flow-review-branch

flows

flows

folder-close

folder-close

folder-new

folder-new

folder-open

folder-open

folder-shared

folder-shared

folder-shared-open

folder-shared-open

follower

follower

following

following

font

font

fork

fork

form

form

full-circle

full-circle

full-stacked-chart

full-stacked-chart

fullscreen

fullscreen

function

function

gantt-chart

gantt-chart

geolocation

geolocation

geosearch

geosearch

git-branch

git-branch

git-commit

git-commit

git-merge

git-merge

git-new-branch

git-new-branch

git-pull

git-pull

git-push

git-push

git-repo

git-repo

glass

glass

globe

globe

globe-network

globe-network

graph

graph

graph-remove

graph-remove

grid

grid

grid-view

grid-view

group-objects

group-objects

grouped-bar-chart

grouped-bar-chart

hand

hand

hand-down

hand-down

hand-left

hand-left

hand-right

hand-right

hand-up

hand-up

header

header

header-one

header-one

header-two

header-two

headset

headset

heart

heart

heart-broken

heart-broken

heat-grid

heat-grid

heatmap

heatmap

help

help

helper-management

helper-management

highlight

highlight

history

history

home

home

horizontal-bar-chart

horizontal-bar-chart

horizontal-bar-chart-asc

horizontal-bar-chart-asc

horizontal-bar-chart-desc

horizontal-bar-chart-desc

horizontal-distribution

horizontal-distribution

id-number

id-number

image-rotate-left

image-rotate-left

image-rotate-right

image-rotate-right

import

import

inbox

inbox

info-sign

info-sign

inner-join

inner-join

insert

insert

intersection

intersection

ip-address

ip-address

issue

issue

issue-closed

issue-closed

issue-new

issue-new

italic

italic

join-table

join-table

key

key

key-backspace

key-backspace

key-command

key-command

key-control

key-control

key-delete

key-delete

key-enter

key-enter

key-escape

key-escape

key-option

key-option

key-shift

key-shift

key-tab

key-tab

known-vehicle

known-vehicle

label

label

layer

layer

layers

layers

layout

layout

layout-auto

layout-auto

layout-balloon

layout-balloon

layout-circle

layout-circle

layout-grid

layout-grid

layout-group-by

layout-group-by

layout-hierarchy

layout-hierarchy

layout-linear

layout-linear

layout-skew-grid

layout-skew-grid

layout-sorted-clusters

layout-sorted-clusters

left-join

left-join

lightbulb

lightbulb

link

link

list

list

list-columns

list-columns

list-detail-view

list-detail-view

locate

locate

lock

lock

log-in

log-in

log-out

log-out

manual

manual

manually-entered-data

manually-entered-data

map

map

map-create

map-create

map-marker

map-marker

maximize

maximize

media

media

menu

menu

menu-closed

menu-closed

menu-open

menu-open

merge-columns

merge-columns

merge-links

merge-links

minimize

minimize

minus

minus

mobile-phone

mobile-phone

mobile-video

mobile-video

moon

moon

more

more

mountain

mountain

move

move

mugshot

mugshot

multi-select

multi-select

music

music

new-grid-item

new-grid-item

new-link

new-link

new-object

new-object

new-person

new-person

new-prescription

new-prescription

new-text-box

new-text-box

ninja

ninja

notifications

notifications

notifications-updated

notifications-updated

numbered-list

numbered-list

numerical

numerical

office

office

offline

offline

oil-field

oil-field

one-column

one-column

outdated

outdated

page-layout

page-layout

panel-stats

panel-stats

panel-table

panel-table

paperclip

paperclip

paragraph

paragraph

path

path

path-search

path-search

pause

pause

people

people

percentage

percentage

person

person

phone

phone

pie-chart

pie-chart

pin

pin

pivot

pivot

pivot-table

pivot-table

play

play

plus

plus

polygon-filter

polygon-filter

power

power

predictive-analysis

predictive-analysis

prescription

prescription

presentation

presentation

print

print

projects

projects

properties

properties

property

property

publish-function

publish-function

pulse

pulse

random

random

record

record

redo

redo

refresh

refresh

regression-chart

regression-chart

remove

remove

remove-column

remove-column

remove-column-left

remove-column-left

remove-column-right

remove-column-right

remove-row-bottom

remove-row-bottom

remove-row-top

remove-row-top

repeat

repeat

resolve

resolve

rig

rig

right-join

right-join

ring

ring

rotate-document

rotate-document

rotate-page

rotate-page

satellite

satellite

saved

saved

scatter-plot

scatter-plot

search

search

search-around

search-around

search-template

search-template

search-text

search-text

segmented-control

segmented-control

select

select

selection

selection

send-to

send-to

send-to-graph

send-to-graph

send-to-map

send-to-map

series-add

series-add

series-configuration

series-configuration

series-derived

series-derived

series-filtered

series-filtered

series-search

series-search

settings

settings

share

share

shield

shield

shop

shop

shopping-cart

shopping-cart

sim-card

sim-card

slash

slash

small-cross

small-cross

small-minus

small-minus

small-plus

small-plus

small-tick

small-tick

snowflake

snowflake

social-media

social-media

sort

sort

sort-alphabetical

sort-alphabetical

sort-alphabetical-desc

sort-alphabetical-desc

sort-asc

sort-asc

sort-desc

sort-desc

sort-numerical

sort-numerical

sort-numerical-desc

sort-numerical-desc

split-columns

split-columns

square

square

stacked-chart

stacked-chart

star

star

star-empty

star-empty

step-backward

step-backward

step-chart

step-chart

step-forward

step-forward

stop

stop

strikethrough

strikethrough

style

style

swap-horizontal

swap-horizontal

swap-vertical

swap-vertical

symbol-circle

symbol-circle

symbol-cross

symbol-cross

symbol-diamond

symbol-diamond

symbol-square

symbol-square

symbol-triangle-down

symbol-triangle-down

symbol-triangle-up

symbol-triangle-up

tag

tag

take-action

take-action

taxi

taxi

text-highlight

text-highlight

th

th

th-derived

th-derived

th-list

th-list

thumbs-down

thumbs-down

thumbs-up

thumbs-up

tick

tick

tick-circle

tick-circle

time

time

timeline-area-chart

timeline-area-chart

timeline-bar-chart

timeline-bar-chart

timeline-events

timeline-events

timeline-line-chart

timeline-line-chart

tint

tint

torch

torch

train

train

translate

translate

trash

trash

tree

tree

trending-down

trending-down

trending-up

trending-up

two-columns

two-columns

underline

underline

undo

undo

ungroup-objects

ungroup-objects

unknown-vehicle

unknown-vehicle

unlock

unlock

unpin

unpin

unresolve

unresolve

updated

updated

upload

upload

user

user

variable

variable

vertical-bar-chart-asc

vertical-bar-chart-asc

vertical-bar-chart-desc

vertical-bar-chart-desc

vertical-distribution

vertical-distribution

video

video

volume-down

volume-down

volume-off

volume-off

volume-up

volume-up

walk

walk

warning-sign

warning-sign

waterfall-chart

waterfall-chart

widget

widget

widget-button

widget-button

widget-footer

widget-footer

widget-header

widget-header

wrench

wrench

zoom-in

zoom-in

zoom-out

zoom-out

zoom-to-fit

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.