@# Icon
See the Icons package for a searchable list of all available UI icons.
Blueprint 2.0 introduced SVG icon support and moved icon resources to a separate @blueprintjs/icons package.
The Icon component renders SVG paths and the icon classes are no longer used by any Blueprint React component.
Icon font support has been preserved but should be considered a legacy feature that will be removed in a
future major version.
This section describes two ways of using the UI icon font: via React Icon
component to render SVG images or via CSS classes to use the icon font.
Many Blueprint components provide an icon prop which accepts an icon name
(such as "history") or a JSX element to use as the icon.
@reactExample IconExample
@## Props
Use the <Icon> component to easily render SVG icons in React. The icon
prop is typed such that editors can offer autocomplete for known icon names. The
optional iconSize prop determines the exact width and height of the icon
image; the icon element itself can be sized separately using CSS.
The HTML element rendered by <Icon> can be customized with the tagName prop
(defaults to span), and additional props are passed to this element.
Data files in the @blueprintjs/icons package provide SVG path information
for Blueprint's 300+ icons for 16px and 20px grids. The icon prop dictates
which SVG is rendered and iconSize determines which pixel grid is used:
iconSize >= 20 will use the 20px grid and smaller icons will use the 16px
grid.
import { Icon, Intent } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
// string literals are supported through IconName union type
<Icon icon="cross" />
<Icon icon="globe" iconSize={20} />
// constants are provided for name and size
<Icon icon={IconNames.GRAPH} iconSize={Icon.SIZE_LARGE} intent={Intent.PRIMARY} />
// can pass all valid HTML props
<Icon icon="add" onClick={this.handleAdd} onKeyDown={this.handleAddKeys} /><Icon icon="globe" iconSize={30} />
<!-- renders the following HTML markup: -->
<svg class="@ns-icon" data-icon="globe" width="30" height="30" viewBox="0 0 20 20">
<title>globe</title>
<path ... />
</svg>@interface IIconProps
@## CSS
Blueprint's icon fonts should be considered a legacy feature and will be removed in a future major version. The SVGs rendered by the React component do not suffer from the blurriness of icon fonts, and browser support is equivalent.
The CSS-only icons API uses the icon fonts from the @blueprintjs/icons package.
To use Blueprint UI icons via CSS, you must apply two classes to a <span> element:
- a sizing class, either
@ns-icon-standard(16px) or@ns-icon-large(20px) - an icon name class, such as
@ns-icon-projects
Icon classes also support the four .@ns-intent-* modifiers to color the image.
<span class="@ns-icon-{{size}} @ns-icon-{{name}}"></span>
<span class="@ns-icon-standard @ns-icon-projects"></span>
<span class="@ns-icon-large @ns-icon-geosearch @ns-intent-success"></span>Generally, font icons should only be used at either 16px or 20px. However, if a non-standard size is
necessary, set a font-size that is whole multiple of 16 or 20 with the relevant size class.
You can instead use the class @ns-icon to make the icon inherit its size from surrounding text.
account-circle
account-female
account-female-add
account-female-delete
account-female-down
account-female-ok
account-female-pending
account-female-remove
account-female-time
account-female-up
account-male
account-male-add
account-male-delete
account-male-down
account-male-ok
account-male-pending
account-male-remove
account-male-time
account-male-up
account-square
accounts
accounts-add
accounts-delete
accounts-down
accounts-ok
accounts-pending
accounts-remove
accounts-time
accounts-up
add
add-circle
add-square
agenda
aid-kit
algolia
alpine
anchor
android
ansible
app
apple
area
area-rectangle
array
array-alt
arrow-alt-se
arrow-alt-sw
arrow-e
arrow-e-nw
arrow-e-sw
arrow-n
arrow-n-se
arrow-n-sw
arrow-ne
arrow-nw
arrow-s
arrow-s-ne
arrow-s-nw
arrow-se
arrow-sw
arrow-w
arrow-w-ne
arrow-w-se
arrows-away
arrows-in
at
attachment
autover
award
award-alt
aws
ayk
badge-delete
badge-ok
bag
balance
bank
barrier-down
barrier-up
bathroom
battery-charging
battery-empty
battery-full
battery-low
bed
bed-double
bed-single
beer
bell
bell-alt
bicycle
bill
bills
bin
bin-full
bitbucket
bitpoke
book
book-open
book-open-text
bookmark
bricks
bucket
bug
bus
bus-mini
bus-small
cache
calculator
calendar-day
calendar-from
calendar-key
calendar-month
calendar-period
calendar-to
calendar-week
camera
car
car-alt
car-arrow-e
car-charging
car-error
car-ok
car-pending
car-warning
card
card-up
care-n
caret-e
caret-ns
caret-s
caret-w
carrot
carry
cart
cart-add
cart-delete
cart-down
cart-ok
cart-pending
cart-remove
cart-time
cart-up
celery
center
certificate
charging
charging-fast
charging-off
charging-on
chart-area
chart-area-stack
chart-bars
chart-bars-axis
chart-bars-stack
chart-line
chart-line-dots
chart-lines
chart-pie
chart-pie-alt
chip
circle
clipboard
clipboard-add
clipboard-paste
clock
clone-e-w
clone-nw-se
clone-se-nw
clone-w-e
cloud
cloud-download
cloud-ok
cloud-upload
code
code-add
code-delete
code-down
code-ok
code-pending
code-remove
code-time
code-up
coffee
coffee-togo
coins
coins-alt
coins-stash
comment
comment-pending
comment-text
comments
compass
compass-alt
controller
cube
currency-bitcoin
currency-euro
currency-litecoin
currency-pound
currency-usd
currency-xrp
currency-yen
cursor
cycle-ccw
cycle-cw
cycle-square-cw
database
database-add
database-delete
database-down
database-ok
database-pending
database-remove
database-time
database-up
delete
delete-circle
delete-square
deny
desktop
device-landscape
device-portrait
diamond
digitalocean
direction
direction-both
disability
discount-badge
discount-ticket
divide
docker
down-square
drinks
drive
drive-down
drive-up
drone
drop
duplicate
duplicate-add
duplicate-remove
eat
economy
edit
edit-square
electric-car
electric-car-alt
electric-car-charging
ellipsis
ellipsis-square
ellipsis-vertical
emission-off
emissions
eu-flag-dark
eu-flag-light
export
export-alt
eye
eye-off
facebook
fence
file
file-add
file-archive
file-code
file-delete
file-diff
file-down
file-empty
file-hash
file-image
file-markup
file-ok
file-pdf
file-pending
file-remove
file-signed
file-sql
file-text
file-time
file-up
files
files-add
files-delete
files-down
files-ok
files-pending
files-remove
files-time
files-up
filter
flag
flame
floppy
focus
folder
folder-add
folder-share
folder-symlink
frame
frontapp
gauge
gears
genders
git
git-branch
git-compare
git-fetch
git-fork
git-merge
git-merged
git-merged-alt
git-pull
git-push
git-rebase
git-tree
gitea
gitfs
github
gitium
gitolite
give-euro
give-usd
glasses
globe
globe-alt
golang
google-cloud-platform
google-plus
grafana
graphite
green
growth
growth-alt
gunicorn
handshake
headphones
headphones-alt
heart
helm
help
help-alt
hetzner
highway
highway-alt
history-back
history-forward
home
hourglass
hourglass-alt
hugo
human
hyperdb
image
image-mapping
images
import
import-alt
inbox
inbox-full
industrial
info
instagram
internet
issue
issue-cycle-ccw
issue-delete
issue-ok
issue-recycle-ccw
javascript
key
key-alt
key-capslock
key-command
key-option
key-shift
key-windows
keyboard
keyboard-alt
keynote
kibana
kubernetes
lab
laptop
large-van
launch
layout
layout-alt
layout-simple
leaf
leaseweb
leaves
letsencrypt
letter
lightbulb
lightbulb-off
lightbulb-on
lighthouse
limit
limit-alt
link
link-alt
linkedin
linux
list
location
location-area
location-spot
lock
login
logout
loop
magnet
mail
mail-read
mail-read-alt
mail-send
mailgun
map
map-off
markup
memcache
memory
memory-card
menu
menu-alt
mesh
mesh-alt
mesh-globe
microphone
mobile-theme
moon
moped
motobike
mouse
music
mysql-operator
newspaper
nginx
nginx-ingress
nginx-ingress_1
non-stop
north
notebook
office
ok
ok-circle
ok-square
opsgenie
orchestrator
paint-roller
palette
paper-plane
papertrail
paragraph
parcel
parcel-down
parcel-up
parking
parking-off
particles
particles-alt
patch-double
patch-simple
pay-phone
pay-phone-small
paypal
payu
pen
pen-line
pencil
percent
percona
phone
phone-mobile
phone-pay-alt
phone-ring
phone-wave
php
piggy
pill
ping-download
plane
plug
plug-type-two
plugin
plugin-tag
point-e
point-w
police
power
power-plug
present
presslabs
printer
process-between
process-loop
projector
prometheus
pulse
puzzle
puzzle-alt
pyolite
python
react
read
read-alt
receipt
receipt-end
recycle-ccw
recycle-cw
redis
redux
remove
remove-circle
remove-square
repo
repo-add
repo-down
role-admin
role-super-admin
role-user
room
route-fiftythree
router
routing
routing-away
routing-in
ruler
safe
safe-alt
safe-simple
search
section
section-alt
security
security-add
security-delete
security-ok
security-remove
semaphore
sendgrid
sentry
server
server-link
settings
settings-add
settings-delete
settings-down
settings-ok
settings-pending
settings-remove
settings-time
settings-up
sex-female
sex-male
share
share-alt
shop
sign
sign-document
signal
silver
site-protection
slack
snowflake
softlayer
sort-asc-horizontal
sort-asc-horizontal-alt
sort-asc-vertical
sort-asc-vertical-alt
sort-desc-horizontal
sort-desc-horizontal-alt
sort-desc-vertical
sort-desc-vertical-alt
speaker
square
ssd
stack
stack-1
stack-add
stack-delete
stack-down
stack-ok
stack-pending
stack-remove
stack-time
stack-up
star
star-half
star-off
statuscake
statuspage
stopwatch
storage
street
suitcase
sun
switch
sync
sync-square
tag
target
target-alt
temperature
temperature-hi
temperature-low
terminal
theme-per-user
thumb-down
thumb-up
thunder-alt
tir-alt
toll-stop
tolls
tooth
toplytics
tor
touch
trailer
transport
transport-away
tree
triangle
trophy
truck-cab
truck-small
tshirt
tune
twitter
umbrella
unlock
up-square
utf
van
vector
vehicle
view-cards
view-full
view-list
view-single
view-stack
view-table
view-thumbs
volume
volume-high
volume-low
volume-mute
wallet
warm-food
warning
watch
wave
way
window
windows
wireless
wordpress
wordpress-operator
wrench
xing
zinc
zipa
zoom-in
zoom-out
zsync
zthree