Icons
-
alarm
-
alarm-fill
-
align-bottom
-
align-center
-
align-end
-
align-middle
-
align-start
-
align-top
-
alt
-
app
-
app-indicator
-
archive
-
archive-fill
-
arrow-90deg-down
-
arrow-90deg-left
-
arrow-90deg-right
-
arrow-90deg-up
-
arrow-bar-down
-
arrow-bar-left
-
arrow-bar-right
-
arrow-bar-up
-
arrow-clockwise
-
arrow-counterclockwise
-
arrow-down
-
arrow-down-circle
-
arrow-down-circle-fill
-
arrow-down-left-circle
-
arrow-down-left-circle-fill
-
arrow-down-left-square
-
arrow-down-left-square-fill
-
arrow-down-right-circle
-
arrow-down-right-circle-fill
-
arrow-down-right-square
-
arrow-down-right-square-fill
-
arrow-down-square
-
arrow-down-square-fill
-
arrow-down-left
-
arrow-down-right
-
arrow-down-short
-
arrow-down-up
-
arrow-left
-
arrow-left-circle
-
arrow-left-circle-fill
-
arrow-left-square
-
arrow-left-square-fill
-
arrow-left-right
-
arrow-left-short
-
arrow-repeat
-
arrow-return-left
-
arrow-return-right
-
arrow-right
-
arrow-right-circle
-
arrow-right-circle-fill
-
arrow-right-square
-
arrow-right-square-fill
-
arrow-right-short
-
arrow-up
-
arrow-up-circle
-
arrow-up-circle-fill
-
arrow-up-left-circle
-
arrow-up-left-circle-fill
-
arrow-up-left-square
-
arrow-up-left-square-fill
-
arrow-up-right-circle
-
arrow-up-right-circle-fill
-
arrow-up-right-square
-
arrow-up-right-square-fill
-
arrow-up-square
-
arrow-up-square-fill
-
arrow-up-left
-
arrow-up-right
-
arrow-up-short
-
arrows-angle-contract
-
arrows-angle-expand
-
arrows-collapse
-
arrows-expand
-
arrows-fullscreen
-
arrows-move
-
aspect-ratio
-
aspect-ratio-fill
-
asterisk
-
at
-
award
-
award-fill
-
back
-
backspace
-
backspace-fill
-
backspace-reverse
-
backspace-reverse-fill
-
badge-3d
-
badge-3d-fill
-
badge-4k
-
badge-4k-fill
-
badge-8k
-
badge-8k-fill
-
badge-ad
-
badge-ad-fill
-
badge-ar
-
badge-ar-fill
-
badge-cc
-
badge-cc-fill
-
badge-hd
-
badge-hd-fill
-
badge-tm
-
badge-tm-fill
-
badge-vo
-
badge-vo-fill
-
badge-vr
-
badge-vr-fill
-
badge-wc
-
badge-wc-fill
-
bag
-
bag-check
-
bag-check-fill
-
bag-dash
-
bag-dash-fill
-
bag-fill
-
bag-plus
-
bag-plus-fill
-
bag-x
-
bag-x-fill
-
bar-chart
-
bar-chart-fill
-
bar-chart-line
-
bar-chart-line-fill
-
bar-chart-steps
-
basket
-
basket-fill
-
basket2
-
basket2-fill
-
basket3
-
basket3-fill
-
battery
-
battery-charging
-
battery-full
-
battery-half
-
bell
-
bell-fill
-
bezier
-
bezier2
-
bicycle
-
binoculars
-
binoculars-fill
-
blockquote-left
-
blockquote-right
-
book
-
book-fill
-
book-half
-
bookmark
-
bookmark-check
-
bookmark-check-fill
-
bookmark-dash
-
bookmark-dash-fill
-
bookmark-fill
-
bookmark-heart
-
bookmark-heart-fill
-
bookmark-plus
-
bookmark-plus-fill
-
bookmark-star
-
bookmark-star-fill
-
bookmark-x
-
bookmark-x-fill
-
bookmarks
-
bookmarks-fill
-
bookshelf
-
bootstrap
-
bootstrap-fill
-
bootstrap-reboot
-
border
-
border-all
-
border-bottom
-
border-center
-
border-inner
-
border-left
-
border-middle
-
border-outer
-
border-right
-
border-style
-
border-top
-
border-width
-
bounding-box
-
bounding-box-circles
-
box
-
box-arrow-down-left
-
box-arrow-down-right
-
box-arrow-down
-
box-arrow-in-down
-
box-arrow-in-down-left
-
box-arrow-in-down-right
-
box-arrow-in-left
-
box-arrow-in-right
-
box-arrow-in-up
-
box-arrow-in-up-left
-
box-arrow-in-up-right
-
box-arrow-left
-
box-arrow-right
-
box-arrow-up
-
box-arrow-up-left
-
box-arrow-up-right
-
box-seam
-
braces
-
bricks
-
briefcase
-
briefcase-fill
-
brightness-alt-high
-
brightness-alt-high-fill
-
brightness-alt-low
-
brightness-alt-low-fill
-
brightness-high
-
brightness-high-fill
-
brightness-low
-
brightness-low-fill
-
broadcast
-
broadcast-pin
-
brush
-
brush-fill
-
bucket
-
bucket-fill
-
bug
-
bug-fill
-
building
-
bullseye
-
calculator
-
calculator-fill
-
calendar
-
calendar-check
-
calendar-check-fill
-
calendar-date
-
calendar-date-fill
-
calendar-day
-
calendar-day-fill
-
calendar-event
-
calendar-event-fill
-
calendar-fill
-
calendar-minus
-
calendar-minus-fill
-
calendar-month
-
calendar-month-fill
-
calendar-plus
-
calendar-plus-fill
-
calendar-range
-
calendar-range-fill
-
calendar-week
-
calendar-week-fill
-
calendar-x
-
calendar-x-fill
-
calendar2
-
calendar2-check
-
calendar2-check-fill
-
calendar2-date
-
calendar2-date-fill
-
calendar2-day
-
calendar2-day-fill
-
calendar2-event
-
calendar2-event-fill
-
calendar2-fill
-
calendar2-minus
-
calendar2-minus-fill
-
calendar2-month
-
calendar2-month-fill
-
calendar2-plus
-
calendar2-plus-fill
-
calendar2-range
-
calendar2-range-fill
-
calendar2-week
-
calendar2-week-fill
-
calendar2-x
-
calendar2-x-fill
-
calendar3
-
calendar3-event
-
calendar3-event-fill
-
calendar3-fill
-
calendar3-range
-
calendar3-range-fill
-
calendar3-week
-
calendar3-week-fill
-
calendar4
-
calendar4-event
-
calendar4-range
-
calendar4-week
-
camera
-
camera2
-
camera-fill
-
camera-reels
-
camera-reels-fill
-
camera-video
-
camera-video-fill
-
camera-video-off
-
camera-video-off-fill
-
capslock
-
capslock-fill
-
card-checklist
-
card-heading
-
card-image
-
card-list
-
card-text
-
caret-down
-
caret-down-fill
-
caret-down-square
-
caret-down-square-fill
-
caret-left
-
caret-left-fill
-
caret-left-square
-
caret-left-square-fill
-
caret-right
-
caret-right-fill
-
caret-right-square
-
caret-right-square-fill
-
caret-up
-
caret-up-fill
-
caret-up-square
-
caret-up-square-fill
-
cart
-
cart-check
-
cart-check-fill
-
cart-dash
-
cart-dash-fill
-
cart-fill
-
cart-plus
-
cart-plus-fill
-
cart-x
-
cart-x-fill
-
cart2
-
cart3
-
cart4
-
cash
-
cash-stack
-
cast
-
chat
-
chat-dots
-
chat-dots-fill
-
chat-fill
-
chat-left
-
chat-left-dots
-
chat-left-dots-fill
-
chat-left-fill
-
chat-left-quote
-
chat-left-quote-fill
-
chat-left-text
-
chat-left-text-fill
-
chat-quote
-
chat-quote-fill
-
chat-right
-
chat-right-dots
-
chat-right-dots-fill
-
chat-right-fill
-
chat-right-quote
-
chat-right-quote-fill
-
chat-right-text
-
chat-right-text-fill
-
chat-square
-
chat-square-dots
-
chat-square-dots-fill
-
chat-square-fill
-
chat-square-quote
-
chat-square-quote-fill
-
chat-square-text
-
chat-square-text-fill
-
chat-text
-
chat-text-fill
-
check
-
check-all
-
check-circle
-
check-circle-fill
-
check-square
-
check-square-fill
-
check2
-
check2-all
-
check2-circle
-
check2-square
-
chevron-bar-contract
-
chevron-bar-down
-
chevron-bar-expand
-
chevron-bar-left
-
chevron-bar-right
-
chevron-bar-up
-
chevron-compact-down
-
chevron-compact-left
-
chevron-compact-right
-
chevron-compact-up
-
chevron-contract
-
chevron-double-down
-
chevron-double-left
-
chevron-double-right
-
chevron-double-up
-
chevron-down
-
chevron-expand
-
chevron-left
-
chevron-right
-
chevron-up
-
circle
-
circle-fill
-
circle-half
-
slash-circle
-
circle-square
-
clipboard
-
clipboard-check
-
clipboard-data
-
clipboard-minus
-
clipboard-plus
-
clipboard-x
-
clock
-
clock-fill
-
clock-history
-
cloud
-
cloud-arrow-down
-
cloud-arrow-down-fill
-
cloud-arrow-up
-
cloud-arrow-up-fill
-
cloud-check
-
cloud-check-fill
-
cloud-download
-
cloud-download-fill
-
cloud-drizzle
-
cloud-drizzle-fill
-
cloud-fill
-
cloud-fog
-
cloud-fog-fill
-
cloud-fog2
-
cloud-fog2-fill
-
cloud-hail
-
cloud-hail-fill
-
cloud-haze
-
cloud-haze-1
-
cloud-haze-fill
-
cloud-haze2-fill
-
cloud-lightning
-
cloud-lightning-fill
-
cloud-lightning-rain
-
cloud-lightning-rain-fill
-
cloud-minus
-
cloud-minus-fill
-
cloud-moon
-
cloud-moon-fill
-
cloud-plus
-
cloud-plus-fill
-
cloud-rain
-
cloud-rain-fill
-
cloud-rain-heavy
-
cloud-rain-heavy-fill
-
cloud-slash
-
cloud-slash-fill
-
cloud-sleet
-
cloud-sleet-fill
-
cloud-snow
-
cloud-snow-fill
-
cloud-sun
-
cloud-sun-fill
-
cloud-upload
-
cloud-upload-fill
-
clouds
-
clouds-fill
-
cloudy
-
cloudy-fill
-
code
-
code-slash
-
code-square
-
collection
-
collection-fill
-
collection-play
-
collection-play-fill
-
columns
-
columns-gap
-
command
-
compass
-
compass-fill
-
cone
-
cone-striped
-
controller
-
cpu
-
cpu-fill
-
credit-card
-
credit-card-2-back
-
credit-card-2-back-fill
-
credit-card-2-front
-
credit-card-2-front-fill
-
credit-card-fill
-
crop
-
cup
-
cup-fill
-
cup-straw
-
cursor
-
cursor-fill
-
cursor-text
-
dash
-
dash-circle
-
dash-circle-dotted
-
dash-circle-fill
-
dash-square
-
dash-square-dotted
-
dash-square-fill
-
diagram-2
-
diagram-2-fill
-
diagram-3
-
diagram-3-fill
-
diamond
-
diamond-fill
-
diamond-half
-
dice-1
-
dice-1-fill
-
dice-2
-
dice-2-fill
-
dice-3
-
dice-3-fill
-
dice-4
-
dice-4-fill
-
dice-5
-
dice-5-fill
-
dice-6
-
dice-6-fill
-
disc
-
disc-fill
-
discord
-
display
-
display-fill
-
distribute-horizontal
-
distribute-vertical
-
door-closed
-
door-closed-fill
-
door-open
-
door-open-fill
-
dot
-
download
-
droplet
-
droplet-fill
-
droplet-half
-
earbuds
-
easel
-
easel-fill
-
egg
-
egg-fill
-
egg-fried
-
eject
-
eject-fill
-
emoji-angry
-
emoji-angry-fill
-
emoji-dizzy
-
emoji-dizzy-fill
-
emoji-expressionless
-
emoji-expressionless-fill
-
emoji-frown
-
emoji-frown-fill
-
emoji-heart-eyes
-
emoji-heart-eyes-fill
-
emoji-laughing
-
emoji-laughing-fill
-
emoji-neutral
-
emoji-neutral-fill
-
emoji-smile
-
emoji-smile-fill
-
emoji-smile-upside-down
-
emoji-smile-upside-down-fill
-
emoji-sunglasses
-
emoji-sunglasses-fill
-
emoji-wink
-
emoji-wink-fill
-
envelope
-
envelope-fill
-
envelope-open
-
envelope-open-fill
-
eraser
-
eraser-fill
-
exclamation
-
exclamation-circle
-
exclamation-circle-fill
-
exclamation-diamond
-
exclamation-diamond-fill
-
exclamation-octagon
-
exclamation-octagon-fill
-
exclamation-square
-
exclamation-square-fill
-
exclamation-triangle
-
exclamation-triangle-fill
-
exclude
-
eye
-
eye-fill
-
eye-slash
-
eye-slash-fill
-
eyedropper
-
eyeglasses
-
facebook
-
file
-
file-arrow-down
-
file-arrow-down-fill
-
file-arrow-up
-
file-arrow-up-fill
-
file-bar-graph
-
file-bar-graph-fill
-
file-binary
-
file-binary-fill
-
file-break
-
file-break-fill
-
file-check
-
file-check-fill
-
file-code
-
file-code-fill
-
file-diff
-
file-diff-fill
-
file-earmark
-
file-earmark-arrow-down
-
file-earmark-arrow-down-fill
-
file-earmark-arrow-up
-
file-earmark-arrow-up-fill
-
file-earmark-bar-graph
-
file-earmark-bar-graph-fill
-
file-earmark-binary
-
file-earmark-binary-fill
-
file-earmark-break
-
file-earmark-break-fill
-
file-earmark-check
-
file-earmark-check-fill
-
file-earmark-code
-
file-earmark-code-fill
-
file-earmark-diff
-
file-earmark-diff-fill
-
file-earmark-easel
-
file-earmark-easel-fill
-
file-earmark-excel
-
file-earmark-excel-fill
-
file-earmark-fill
-
file-earmark-font
-
file-earmark-font-fill
-
file-earmark-image
-
file-earmark-image-fill
-
file-earmark-lock
-
file-earmark-lock-fill
-
file-earmark-lock2
-
file-earmark-lock2-fill
-
file-earmark-medical
-
file-earmark-medical-fill
-
file-earmark-minus
-
file-earmark-minus-fill
-
file-earmark-music
-
file-earmark-music-fill
-
file-earmark-person
-
file-earmark-person-fill
-
file-earmark-play
-
file-earmark-play-fill
-
file-earmark-plus
-
file-earmark-plus-fill
-
file-earmark-post
-
file-earmark-post-fill
-
file-earmark-ppt
-
file-earmark-ppt-fill
-
file-earmark-richtext
-
file-earmark-richtext-fill
-
file-earmark-ruled
-
file-earmark-ruled-fill
-
file-earmark-slides
-
file-earmark-slides-fill
-
file-earmark-spreadsheet
-
file-earmark-spreadsheet-fill
-
file-earmark-text
-
file-earmark-text-fill
-
file-earmark-word
-
file-earmark-word-fill
-
file-earmark-x
-
file-earmark-x-fill
-
file-earmark-zip
-
file-earmark-zip-fill
-
file-easel
-
file-easel-fill
-
file-excel
-
file-excel-fill
-
file-fill
-
file-font
-
file-font-fill
-
file-image
-
file-image-fill
-
file-lock
-
file-lock-fill
-
file-lock2
-
file-lock2-fill
-
file-medical
-
file-medical-fill
-
file-minus
-
file-minus-fill
-
file-music
-
file-music-fill
-
file-person
-
file-person-fill
-
file-play
-
file-play-fill
-
file-plus
-
file-plus-fill
-
file-post
-
file-post-fill
-
file-ppt
-
file-ppt-fill
-
file-richtext
-
file-richtext-fill
-
file-ruled
-
file-ruled-fill
-
file-slides
-
file-slides-fill
-
file-spreadsheet
-
file-spreadsheet-fill
-
file-text
-
file-text-fill
-
file-word
-
file-word-fill
-
file-x
-
file-x-fill
-
file-zip
-
file-zip-fill
-
files
-
files-alt
-
film
-
filter
-
filter-circle
-
filter-circle-fill
-
filter-left
-
filter-right
-
filter-square
-
filter-square-fill
-
flag
-
flag-fill
-
flower1
-
flower2
-
flower3
-
folder
-
folder-check
-
folder-fill
-
folder-minus
-
folder-plus
-
folder-symlink
-
folder-symlink-fill
-
folder-x
-
folder2
-
folder2-open
-
fonts
-
forward
-
forward-fill
-
front
-
fullscreen
-
fullscreen-exit
-
funnel
-
funnel-fill
-
gear
-
gear-fill
-
gear-wide
-
gear-wide-connected
-
gem
-
geo
-
geo-alt
-
geo-alt-fill
-
geo-fill
-
gift
-
gift-fill
-
github
-
globe
-
globe2
-
google
-
graph-down
-
graph-up
-
grid
-
grid-1x2
-
grid-1x2-fill
-
grid-3x2
-
grid-3x2-gap
-
grid-3x2-gap-fill
-
grid-3x3
-
grid-3x3-gap
-
grid-3x3-gap-fill
-
grid-fill
-
grip-horizontal
-
grip-vertical
-
hammer
-
hand-index
-
hand-index-fill
-
hand-index-thumb
-
hand-index-thumb-fill
-
hand-thumbs-down
-
hand-thumbs-down-fill
-
hand-thumbs-up
-
hand-thumbs-up-fill
-
handbag
-
handbag-fill
-
hash
-
hdd
-
hdd-fill
-
hdd-network
-
hdd-network-fill
-
hdd-rack
-
hdd-rack-fill
-
hdd-stack
-
hdd-stack-fill
-
headphones
-
headset
-
heart
-
heart-fill
-
heart-half
-
heptagon
-
heptagon-fill
-
heptagon-half
-
hexagon
-
hexagon-fill
-
hexagon-half
-
hourglass
-
hourglass-bottom
-
hourglass-split
-
hourglass-top
-
house
-
house-door
-
house-door-fill
-
house-fill
-
hr
-
hurricane
-
image
-
image-alt
-
image-fill
-
images
-
inbox
-
inbox-fill
-
inboxes-fill
-
inboxes
-
info
-
info-circle
-
info-circle-fill
-
info-square
-
info-square-fill
-
input-cursor
-
input-cursor-text
-
instagram
-
intersect
-
journal
-
journal-album
-
journal-arrow-down
-
journal-arrow-up
-
journal-bookmark
-
journal-bookmark-fill
-
journal-check
-
journal-code
-
journal-medical
-
journal-minus
-
journal-plus
-
journal-richtext
-
journal-text
-
journal-x
-
journals
-
joystick
-
justify
-
justify-left
-
justify-right
-
kanban
-
kanban-fill
-
key
-
key-fill
-
keyboard
-
keyboard-fill
-
ladder
-
lamp
-
lamp-fill
-
laptop
-
laptop-fill
-
layer-backward
-
layer-forward
-
layers
-
layers-fill
-
layers-half
-
layout-sidebar
-
layout-sidebar-inset-reverse
-
layout-sidebar-inset
-
layout-sidebar-reverse
-
layout-split
-
layout-text-sidebar
-
layout-text-sidebar-reverse
-
layout-text-window
-
layout-text-window-reverse
-
layout-three-columns
-
layout-wtf
-
life-preserver
-
lightbulb
-
lightbulb-fill
-
lightbulb-off
-
lightbulb-off-fill
-
lightning
-
lightning-charge
-
lightning-charge-fill
-
lightning-fill
-
link
-
link-45deg
-
linkedin
-
list
-
list-check
-
list-nested
-
list-ol
-
list-stars
-
list-task
-
list-ul
-
lock
-
lock-fill
-
mailbox
-
mailbox2
-
map
-
map-fill
-
markdown
-
markdown-fill
-
mask
-
megaphone
-
megaphone-fill
-
menu-app
-
menu-app-fill
-
menu-button
-
menu-button-fill
-
menu-button-wide
-
menu-button-wide-fill
-
menu-down
-
menu-up
-
mic
-
mic-fill
-
mic-mute
-
mic-mute-fill
-
minecart
-
minecart-loaded
-
moisture
-
moon
-
moon-fill
-
moon-stars
-
moon-stars-fill
-
mouse
-
mouse-fill
-
mouse2
-
mouse2-fill
-
mouse3
-
mouse3-fill
-
music-note
-
music-note-beamed
-
music-note-list
-
music-player
-
music-player-fill
-
newspaper
-
node-minus
-
node-minus-fill
-
node-plus
-
node-plus-fill
-
nut
-
nut-fill
-
octagon
-
octagon-fill
-
octagon-half
-
option
-
outlet
-
paint-bucket
-
palette
-
palette-fill
-
palette2
-
paperclip
-
paragraph
-
patch-check
-
patch-check-fill
-
patch-exclamation
-
patch-exclamation-fill
-
patch-minus
-
patch-minus-fill
-
patch-plus
-
patch-plus-fill
-
patch-question
-
patch-question-fill
-
pause
-
pause-btn
-
pause-btn-fill
-
pause-circle
-
pause-circle-fill
-
pause-fill
-
peace
-
peace-fill
-
pen
-
pen-fill
-
pencil
-
pencil-fill
-
pencil-square
-
pentagon
-
pentagon-fill
-
pentagon-half
-
people
-
person-circle
-
people-fill
-
percent
-
person
-
person-badge
-
person-badge-fill
-
person-bounding-box
-
person-check
-
person-check-fill
-
person-dash
-
person-dash-fill
-
person-fill
-
person-lines-fill
-
person-plus
-
person-plus-fill
-
person-square
-
person-x
-
person-x-fill
-
phone
-
phone-fill
-
phone-landscape
-
phone-landscape-fill
-
phone-vibrate
-
phone-vibrate-fill
-
pie-chart
-
pie-chart-fill
-
pin
-
pin-angle
-
pin-angle-fill
-
pin-fill
-
pip
-
pip-fill
-
play
-
play-btn
-
play-btn-fill
-
play-circle
-
play-circle-fill
-
play-fill
-
plug
-
plug-fill
-
plus
-
plus-circle
-
plus-circle-dotted
-
plus-circle-fill
-
plus-square
-
plus-square-dotted
-
plus-square-fill
-
power
-
printer
-
printer-fill
-
puzzle
-
puzzle-fill
-
question
-
question-circle
-
question-diamond
-
question-diamond-fill
-
question-circle-fill
-
question-octagon
-
question-octagon-fill
-
question-square
-
question-square-fill
-
rainbow
-
receipt
-
receipt-cutoff
-
reception-0
-
reception-1
-
reception-2
-
reception-3
-
reception-4
-
record
-
record-btn
-
record-btn-fill
-
record-circle
-
record-circle-fill
-
record-fill
-
record2
-
record2-fill
-
reply
-
reply-all
-
reply-all-fill
-
reply-fill
-
rss
-
rss-fill
-
rulers
-
save
-
save-fill
-
save2
-
save2-fill
-
scissors
-
screwdriver
-
search
-
segmented-nav
-
server
-
share
-
share-fill
-
shield
-
shield-check
-
shield-exclamation
-
shield-fill
-
shield-fill-check
-
shield-fill-exclamation
-
shield-fill-minus
-
shield-fill-plus
-
shield-fill-x
-
shield-lock
-
shield-lock-fill
-
shield-minus
-
shield-plus
-
shield-shaded
-
shield-slash
-
shield-slash-fill
-
shield-x
-
shift
-
shift-fill
-
shop
-
shop-window
-
shuffle
-
signpost
-
signpost-2
-
signpost-2-fill
-
signpost-fill
-
signpost-split
-
signpost-split-fill
-
sim
-
sim-fill
-
skip-backward
-
skip-backward-btn
-
skip-backward-btn-fill
-
skip-backward-circle
-
skip-backward-circle-fill
-
skip-backward-fill
-
skip-end
-
skip-end-btn
-
skip-end-btn-fill
-
skip-end-circle
-
skip-end-circle-fill
-
skip-end-fill
-
skip-forward
-
skip-forward-btn
-
skip-forward-btn-fill
-
skip-forward-circle
-
skip-forward-circle-fill
-
skip-forward-fill
-
skip-start
-
skip-start-btn
-
skip-start-btn-fill
-
skip-start-circle
-
skip-start-circle-fill
-
skip-start-fill
-
slack
-
slash
-
slash-circle-fill
-
slash-square
-
slash-square-fill
-
sliders
-
smartwatch
-
snow
-
snow2
-
snow3
-
sort-alpha-down
-
sort-alpha-down-alt
-
sort-alpha-up
-
sort-alpha-up-alt
-
sort-down
-
sort-down-alt
-
sort-numeric-down
-
sort-numeric-down-alt
-
sort-numeric-up
-
sort-numeric-up-alt
-
sort-up
-
sort-up-alt
-
soundwave
-
speaker
-
speaker-fill
-
speedometer
-
speedometer2
-
spellcheck
-
square
-
square-fill
-
square-half
-
stack
-
star
-
star-fill
-
star-half
-
stars
-
stickies
-
stickies-fill
-
sticky
-
sticky-fill
-
stop
-
stop-btn
-
stop-btn-fill
-
stop-circle
-
stop-circle-fill
-
stop-fill
-
stoplights
-
stoplights-fill
-
stopwatch
-
stopwatch-fill
-
subtract
-
suit-club
-
suit-club-fill
-
suit-diamond
-
suit-diamond-fill
-
suit-heart
-
suit-heart-fill
-
suit-spade
-
suit-spade-fill
-
sun
-
sun-fill
-
sunglasses
-
sunrise
-
sunrise-fill
-
sunset
-
sunset-fill
-
symmetry-horizontal
-
symmetry-vertical
-
table
-
tablet
-
tablet-fill
-
tablet-landscape
-
tablet-landscape-fill
-
tag
-
tag-fill
-
tags
-
tags-fill
-
telegram
-
telephone
-
telephone-fill
-
telephone-forward
-
telephone-forward-fill
-
telephone-inbound
-
telephone-inbound-fill
-
telephone-minus
-
telephone-minus-fill
-
telephone-outbound
-
telephone-outbound-fill
-
telephone-plus
-
telephone-plus-fill
-
telephone-x
-
telephone-x-fill
-
terminal
-
terminal-fill
-
text-center
-
text-indent-left
-
text-indent-right
-
text-left
-
text-paragraph
-
text-right
-
textarea
-
textarea-resize
-
textarea-t
-
thermometer
-
thermometer-half
-
thermometer-high
-
thermometer-low
-
thermometer-snow
-
thermometer-sun
-
three-dots
-
three-dots-vertical
-
toggle-off
-
toggle-on
-
toggle2-off
-
toggle2-on
-
toggles
-
toggles2
-
tools
-
tornado
-
trash
-
trash-fill
-
trash2
-
trash2-fill
-
tree
-
tree-fill
-
triangle
-
triangle-fill
-
triangle-half
-
trophy
-
trophy-fill
-
tropical-storm
-
truck
-
truck-flatbed
-
tsunami
-
tv
-
tv-fill
-
twitch
-
twitter
-
type
-
type-bold
-
type-h1
-
type-h2
-
type-h3
-
type-italic
-
type-strikethrough
-
type-underline
-
ui-checks
-
ui-checks-grid
-
ui-radios
-
ui-radios-grid
-
umbrella
-
umbrella-fill
-
union
-
unlock
-
unlock-fill
-
upc
-
upc-scan
-
upload
-
vector-pen
-
view-list
-
view-stacked
-
vinyl
-
vinyl-fill
-
voicemail
-
volume-down
-
volume-down-fill
-
volume-mute
-
volume-mute-fill
-
volume-off
-
volume-off-fill
-
volume-up
-
volume-up-fill
-
vr
-
wallet
-
wallet-fill
-
wallet2
-
watch
-
water
-
whatsapp
-
wifi
-
wifi-1
-
wifi-2
-
wifi-off
-
wind
-
window
-
window-dock
-
window-sidebar
-
wrench
-
x
-
x-circle
-
x-circle-fill
-
x-diamond
-
x-diamond-fill
-
x-octagon
-
x-octagon-fill
-
x-square
-
x-square-fill
-
youtube
-
zoom-in
-
zoom-out
Install
Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.
npm
Install Bootstrap Icons—including SVGs, icon sprite, and icon fonts—with npm. Then, choose how you’d like to include the icons with the usage instructions.
npm i bootstrap-icons
Download
Releases are published on GitHub and include icon SVGs, fonts, license, and readme. Our package.json
is also included, though our npm scripts are primarily available for our development workflows.
CDN
Include the icon fonts stylesheet—in your website <head>
or via @import
in CSS—from our CDN and get started in seconds. See icon font docs for examples.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
Usage
Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. Bootstrap Icons include a width
and height
of 1em
by default to allow for easy resizing via font-size
.
Embedded
Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width
and height
.
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
Sprite
Use the SVG sprite to insert any icon through the <use>
element. Use the icon’s filename as the fragment identifier (e.g., toggles
is #toggles
). SVG sprites allow you to reference an external file similar to an <img>
element, but with the power of currentColor
for easy theming.
Heads up! There’s an issue with Chrome where <use>
doesn’t work across domains.
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>
External image
Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the <img>
element.
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">
Icon font
Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., <i class="bi-alarm-clock"></i>
).
Use font-size
and color
to change the icon appearance.
<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
CSS
You can also use the SVG within your CSS (be sure to escape any characters, such as #
to %23
when specifying hex color values). When no dimensions are specified via width
and height
on the <svg>
, the icon will fill the available space.
The viewBox
attribute is required if you wish to resize icons with background-size
. Note that the xmlns
attribute is required.
.bi::before {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
Styling
Color can be changed by setting a .text-*
class or custom CSS:
<svg class="bi bi-alert-triangle text-success" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
...
</svg>
Accessibility
If the icons are not purely decorative, make sure you provide an appropriate text alternative. Depending on which method you’re using to add the icons, and where you’re using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches. Here are a few examples:
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<i class="bi-github" role="img" aria-label="GitHub"></i>
<svg class="bi" ... role="img" aria-label="Tools">
<use xlink:href="bootstrap-icons.svg#tools"/>
</svg>
<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
<svg class="bi bi-volume-mute-fill" ...>
...
</svg>
Working with SVGs
SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven’t included these attributes and workarounds in our code.
Known issues include:
-
SVGs receive focus by default in Internet Explorer and Edge Legacy. When embedding your SVGs, add
focusable="false"
to the<svg>
element. Learn more on Stack Overflow. -
When using SVGs with
<img>
elements, screen readers may not announce them as images, or skip the image completely. Include an additionalrole="img"
on the<img>
element to avoid any issues. See this article for details. -
External SVG sprites may not function correctly in Internet Explorer. Use the svg4everybody polyfill as needed.
Found another issue with SVGs we should note? Please open an issue to share details.