icons.getbootstrap.com
Open in
urlscan Pro
172.67.30.148
Public Scan
Submitted URL: http://icons.getbootstrap.com/
Effective URL: https://icons.getbootstrap.com/
Submission: On June 06 via api from US — Scanned from DE
Effective URL: https://icons.getbootstrap.com/
Submission: On June 06 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form class="subnav-search d-flex flex-nowrap ms-auto">
<label for="search" class="visually-hidden">Search for icons</label>
<input class="form-control search mb-0" id="search" type="search" placeholder="Start typing to filter..." autocomplete="off">
</form>Text Content
Skip to main content
Bootstrap
BOOTSTRAP
--------------------------------------------------------------------------------
* Docs
* Examples
* Icons
* Themes
* Blog
--------------------------------------------------------------------------------
* GitHub GitHub
* Twitter Twitter
* Open Collective Open Collective
* --------------------------------------------------------------------------------
* Toggle theme
* Light
* Dark
* Auto
New in v1.11.0: 100 new icons!
BOOTSTRAP ICONS
Free, high quality, open source icon library with over 2,000 icons. Include them
anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without
Bootstrap in any project.
npm i bootstrap-icons
Open in Figma
Your new development career awaits. Check out the latest listings. ads via
Carbon
--------------------------------------------------------------------------------
Currently v1.11.3 • Icons • Icon Sprite • Install • Usage • Styling •
Accessibility • GitHub repo
ICONS
Search for icons
* 0-circle
* 0-circle-fill
* 0-square
* 0-square-fill
* 1-circle
* 1-circle-fill
* 1-square
* 1-square-fill
* 123
* 2-circle
* 2-circle-fill
* 2-square
* 2-square-fill
* 3-circle
* 3-circle-fill
* 3-square
* 3-square-fill
* 4-circle
* 4-circle-fill
* 4-square
* 4-square-fill
* 5-circle
* 5-circle-fill
* 5-square
* 5-square-fill
* 6-circle
* 6-circle-fill
* 6-square
* 6-square-fill
* 7-circle
* 7-circle-fill
* 7-square
* 7-square-fill
* 8-circle
* 8-circle-fill
* 8-square
* 8-square-fill
* 9-circle
* 9-circle-fill
* 9-square
* 9-square-fill
* activity
* airplane
* airplane-engines
* airplane-engines-fill
* airplane-fill
* alarm
* alarm-fill
* alexa
* align-bottom
* align-center
* align-end
* align-middle
* align-start
* align-top
* alipay
* alphabet
* alphabet-uppercase
* alt
* amazon
* amd
* android
* android2
* app
* app-indicator
* apple
* 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-through-heart
* arrow-through-heart-fill
* 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
* arrows-angle-contract
* arrows-angle-expand
* arrows-collapse
* arrows-collapse-vertical
* arrows-expand
* arrows-expand-vertical
* arrows-fullscreen
* arrows-move
* arrows-vertical
* aspect-ratio
* aspect-ratio-fill
* asterisk
* at
* award
* award-fill
* back
* backpack
* backpack-fill
* backpack2
* backpack2-fill
* backpack3
* backpack3-fill
* backpack4
* backpack4-fill
* 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-sd
* badge-sd-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-heart
* bag-heart-fill
* bag-plus
* bag-plus-fill
* bag-x
* bag-x-fill
* balloon
* balloon-fill
* balloon-heart
* balloon-heart-fill
* ban
* ban-fill
* bandaid
* bandaid-fill
* bank
* bank2
* 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
* behance
* bell
* bell-fill
* bell-slash
* bell-slash-fill
* bezier
* bezier2
* bicycle
* bing
* binoculars
* binoculars-fill
* blockquote-left
* blockquote-right
* bluetooth
* body-text
* 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
* boombox
* boombox-fill
* 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-fill
* box-seam
* box-seam-fill
* box2
* box2-fill
* box2-heart
* box2-heart-fill
* boxes
* braces
* braces-asterisk
* 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
* brilliance
* broadcast
* broadcast-pin
* browser-chrome
* browser-edge
* browser-firefox
* browser-safari
* brush
* brush-fill
* bucket
* bucket-fill
* bug
* bug-fill
* building
* building-add
* building-check
* building-dash
* building-down
* building-exclamation
* building-fill
* building-fill-add
* building-fill-check
* building-fill-dash
* building-fill-down
* building-fill-exclamation
* building-fill-gear
* building-fill-lock
* building-fill-slash
* building-fill-up
* building-fill-x
* building-gear
* building-lock
* building-slash
* building-up
* building-x
* buildings
* buildings-fill
* bullseye
* bus-front
* bus-front-fill
* c-circle
* c-circle-fill
* c-square
* c-square-fill
* cake
* cake-fill
* cake2
* cake2-fill
* 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-heart
* calendar-heart-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-heart
* calendar2-heart-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
* capsule
* capsule-pill
* car-front
* car-front-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-coin
* cash-stack
* cassette
* cassette-fill
* cast
* cc-circle
* cc-circle-fill
* cc-square
* cc-square-fill
* chat
* chat-dots
* chat-dots-fill
* chat-fill
* chat-heart
* chat-heart-fill
* chat-left
* chat-left-dots
* chat-left-dots-fill
* chat-left-fill
* chat-left-heart
* chat-left-heart-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-heart
* chat-right-heart-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-heart
* chat-square-heart-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-lg
* 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-check-fill
* clipboard-data
* clipboard-data-fill
* clipboard-fill
* clipboard-heart
* clipboard-heart-fill
* clipboard-minus
* clipboard-minus-fill
* clipboard-plus
* clipboard-plus-fill
* clipboard-pulse
* clipboard-x
* clipboard-x-fill
* clipboard2
* clipboard2-check
* clipboard2-check-fill
* clipboard2-data
* clipboard2-data-fill
* clipboard2-fill
* clipboard2-heart
* clipboard2-heart-fill
* clipboard2-minus
* clipboard2-minus-fill
* clipboard2-plus
* clipboard2-plus-fill
* clipboard2-pulse
* clipboard2-pulse-fill
* clipboard2-x
* clipboard2-x-fill
* 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-fill
* cloud-haze2
* 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
* coin
* collection
* collection-fill
* collection-play
* collection-play-fill
* columns
* columns-gap
* command
* compass
* compass-fill
* cone
* cone-striped
* controller
* cookie
* copy
* 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
* crosshair
* crosshair2
* cup
* cup-fill
* cup-hot
* cup-hot-fill
* cup-straw
* currency-bitcoin
* currency-dollar
* currency-euro
* currency-exchange
* currency-pound
* currency-rupee
* currency-yen
* cursor
* cursor-fill
* cursor-text
* dash
* dash-circle
* dash-circle-dotted
* dash-circle-fill
* dash-lg
* dash-square
* dash-square-dotted
* dash-square-fill
* database
* database-add
* database-check
* database-dash
* database-down
* database-exclamation
* database-fill
* database-fill-add
* database-fill-check
* database-fill-dash
* database-fill-down
* database-fill-exclamation
* database-fill-gear
* database-fill-lock
* database-fill-slash
* database-fill-up
* database-fill-x
* database-gear
* database-lock
* database-slash
* database-up
* database-x
* device-hdd
* device-hdd-fill
* device-ssd
* device-ssd-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
* displayport
* displayport-fill
* distribute-horizontal
* distribute-vertical
* door-closed
* door-closed-fill
* door-open
* door-open-fill
* dot
* download
* dpad
* dpad-fill
* dribbble
* dropbox
* droplet
* droplet-fill
* droplet-half
* duffle
* duffle-fill
* ear
* ear-fill
* earbuds
* easel
* easel-fill
* easel2
* easel2-fill
* easel3
* easel3-fill
* egg
* egg-fill
* egg-fried
* eject
* eject-fill
* emoji-angry
* emoji-angry-fill
* emoji-astonished
* emoji-astonished-fill
* emoji-dizzy
* emoji-dizzy-fill
* emoji-expressionless
* emoji-expressionless-fill
* emoji-frown
* emoji-frown-fill
* emoji-grimace
* emoji-grimace-fill
* emoji-grin
* emoji-grin-fill
* emoji-heart-eyes
* emoji-heart-eyes-fill
* emoji-kiss
* emoji-kiss-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-surprise
* emoji-surprise-fill
* emoji-tear
* emoji-tear-fill
* emoji-wink
* emoji-wink-fill
* envelope
* envelope-arrow-down
* envelope-arrow-down-fill
* envelope-arrow-up
* envelope-arrow-up-fill
* envelope-at
* envelope-at-fill
* envelope-check
* envelope-check-fill
* envelope-dash
* envelope-dash-fill
* envelope-exclamation
* envelope-exclamation-fill
* envelope-fill
* envelope-heart
* envelope-heart-fill
* envelope-open
* envelope-open-fill
* envelope-open-heart
* envelope-open-heart-fill
* envelope-paper
* envelope-paper-fill
* envelope-paper-heart
* envelope-paper-heart-fill
* envelope-plus
* envelope-plus-fill
* envelope-slash
* envelope-slash-fill
* envelope-x
* envelope-x-fill
* eraser
* eraser-fill
* escape
* ethernet
* ev-front
* ev-front-fill
* ev-station
* ev-station-fill
* exclamation
* exclamation-circle
* exclamation-circle-fill
* exclamation-diamond
* exclamation-diamond-fill
* exclamation-lg
* exclamation-octagon
* exclamation-octagon-fill
* exclamation-square
* exclamation-square-fill
* exclamation-triangle
* exclamation-triangle-fill
* exclude
* explicit
* explicit-fill
* exposure
* eye
* eye-fill
* eye-slash
* eye-slash-fill
* eyedropper
* eyeglasses
* facebook
* fan
* fast-forward
* fast-forward-btn
* fast-forward-btn-fill
* fast-forward-circle
* fast-forward-circle-fill
* fast-forward-fill
* feather
* feather2
* 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-pdf
* file-earmark-pdf-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-pdf
* file-pdf-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
* filetype-aac
* filetype-ai
* filetype-bmp
* filetype-cs
* filetype-css
* filetype-csv
* filetype-doc
* filetype-docx
* filetype-exe
* filetype-gif
* filetype-heic
* filetype-html
* filetype-java
* filetype-jpg
* filetype-js
* filetype-json
* filetype-jsx
* filetype-key
* filetype-m4p
* filetype-md
* filetype-mdx
* filetype-mov
* filetype-mp3
* filetype-mp4
* filetype-otf
* filetype-pdf
* filetype-php
* filetype-png
* filetype-ppt
* filetype-pptx
* filetype-psd
* filetype-py
* filetype-raw
* filetype-rb
* filetype-sass
* filetype-scss
* filetype-sh
* filetype-sql
* filetype-svg
* filetype-tiff
* filetype-tsx
* filetype-ttf
* filetype-txt
* filetype-wav
* filetype-woff
* filetype-xls
* filetype-xlsx
* filetype-xml
* filetype-yml
* film
* filter
* filter-circle
* filter-circle-fill
* filter-left
* filter-right
* filter-square
* filter-square-fill
* fingerprint
* fire
* flag
* flag-fill
* floppy
* floppy-fill
* floppy2
* floppy2-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
* fuel-pump
* fuel-pump-diesel
* fuel-pump-diesel-fill
* fuel-pump-fill
* fullscreen
* fullscreen-exit
* funnel
* funnel-fill
* gear
* gear-fill
* gear-wide
* gear-wide-connected
* gem
* gender-ambiguous
* gender-female
* gender-male
* gender-neuter
* gender-trans
* geo
* geo-alt
* geo-alt-fill
* geo-fill
* gift
* gift-fill
* git
* github
* gitlab
* globe
* globe-americas
* globe-asia-australia
* globe-central-south-asia
* globe-europe-africa
* globe2
* google
* google-play
* gpu-card
* graph-down
* graph-down-arrow
* graph-up
* graph-up-arrow
* 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
* h-circle
* h-circle-fill
* h-square
* h-square-fill
* 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
* hdmi
* hdmi-fill
* headphones
* headset
* headset-vr
* heart
* heart-arrow
* heart-fill
* heart-half
* heart-pulse
* heart-pulse-fill
* heartbreak
* heartbreak-fill
* hearts
* heptagon
* heptagon-fill
* heptagon-half
* hexagon
* hexagon-fill
* hexagon-half
* highlighter
* highlights
* hospital
* hospital-fill
* hourglass
* hourglass-bottom
* hourglass-split
* hourglass-top
* house
* house-add
* house-add-fill
* house-check
* house-check-fill
* house-dash
* house-dash-fill
* house-door
* house-door-fill
* house-down
* house-down-fill
* house-exclamation
* house-exclamation-fill
* house-fill
* house-gear
* house-gear-fill
* house-heart
* house-heart-fill
* house-lock
* house-lock-fill
* house-slash
* house-slash-fill
* house-up
* house-up-fill
* house-x
* house-x-fill
* houses
* houses-fill
* hr
* hurricane
* hypnotize
* image
* image-alt
* image-fill
* images
* inbox
* inbox-fill
* inboxes-fill
* inboxes
* incognito
* indent
* infinity
* info
* info-circle
* info-circle-fill
* info-lg
* 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
* line
* link
* link-45deg
* linkedin
* list
* list-check
* list-columns
* list-columns-reverse
* list-nested
* list-ol
* list-stars
* list-task
* list-ul
* lock
* lock-fill
* luggage
* luggage-fill
* lungs
* lungs-fill
* magic
* magnet
* magnet-fill
* mailbox
* mailbox-flag
* mailbox2
* mailbox2-flag
* map
* map-fill
* markdown
* markdown-fill
* marker-tip
* mask
* mastodon
* medium
* megaphone
* megaphone-fill
* memory
* menu-app
* menu-app-fill
* menu-button
* menu-button-fill
* menu-button-wide
* menu-button-wide-fill
* menu-down
* menu-up
* messenger
* meta
* mic
* mic-fill
* mic-mute
* mic-mute-fill
* microsoft
* microsoft-teams
* minecart
* minecart-loaded
* modem
* modem-fill
* moisture
* moon
* moon-fill
* moon-stars
* moon-stars-fill
* mortarboard
* mortarboard-fill
* motherboard
* motherboard-fill
* mouse
* mouse-fill
* mouse2
* mouse2-fill
* mouse3
* mouse3-fill
* music-note
* music-note-beamed
* music-note-list
* music-player
* music-player-fill
* newspaper
* nintendo-switch
* node-minus
* node-minus-fill
* node-plus
* node-plus-fill
* noise-reduction
* nut
* nut-fill
* nvidia
* nvme
* nvme-fill
* octagon
* octagon-fill
* octagon-half
* opencollective
* optical-audio
* optical-audio-fill
* option
* outlet
* p-circle
* p-circle-fill
* p-square
* p-square-fill
* paint-bucket
* palette
* palette-fill
* palette2
* paperclip
* paragraph
* pass
* pass-fill
* passport
* passport-fill
* 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
* paypal
* pc
* pc-display
* pc-display-horizontal
* pc-horizontal
* pci-card
* pci-card-network
* pci-card-sound
* peace
* peace-fill
* pen
* pen-fill
* pencil
* pencil-fill
* pencil-square
* pentagon
* pentagon-fill
* pentagon-half
* people
* person-circle
* people-fill
* percent
* person
* person-add
* person-arms-up
* person-badge
* person-badge-fill
* person-bounding-box
* person-check
* person-check-fill
* person-dash
* person-dash-fill
* person-down
* person-exclamation
* person-fill
* person-fill-add
* person-fill-check
* person-fill-dash
* person-fill-down
* person-fill-exclamation
* person-fill-gear
* person-fill-lock
* person-fill-slash
* person-fill-up
* person-fill-x
* person-gear
* person-heart
* person-hearts
* person-lines-fill
* person-lock
* person-plus
* person-plus-fill
* person-raised-hand
* person-rolodex
* person-slash
* person-square
* person-standing
* person-standing-dress
* person-up
* person-vcard
* person-vcard-fill
* person-video
* person-video2
* person-video3
* person-walking
* person-wheelchair
* person-workspace
* person-x
* person-x-fill
* phone
* phone-fill
* phone-flip
* phone-landscape
* phone-landscape-fill
* phone-vibrate
* phone-vibrate-fill
* pie-chart
* pie-chart-fill
* piggy-bank
* piggy-bank-fill
* pin
* pin-angle
* pin-angle-fill
* pin-fill
* pin-map
* pin-map-fill
* pinterest
* pip
* pip-fill
* play
* play-btn
* play-btn-fill
* play-circle
* play-circle-fill
* play-fill
* playstation
* plug
* plug-fill
* plugin
* plus
* plus-circle
* plus-circle-dotted
* plus-circle-fill
* plus-lg
* plus-slash-minus
* plus-square
* plus-square-dotted
* plus-square-fill
* postage
* postage-fill
* postage-heart
* postage-heart-fill
* postcard
* postcard-fill
* postcard-heart
* postcard-heart-fill
* power
* prescription
* prescription2
* printer
* printer-fill
* projector
* projector-fill
* puzzle
* puzzle-fill
* qr-code
* qr-code-scan
* question
* question-circle
* question-diamond
* question-diamond-fill
* question-circle-fill
* question-lg
* question-octagon
* question-octagon-fill
* question-square
* question-square-fill
* quora
* quote
* r-circle
* r-circle-fill
* r-square
* r-square-fill
* radar
* radioactive
* 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
* recycle
* reddit
* regex
* repeat
* repeat-1
* reply
* reply-all
* reply-all-fill
* reply-fill
* rewind
* rewind-btn
* rewind-btn-fill
* rewind-circle
* rewind-circle-fill
* rewind-fill
* robot
* rocket
* rocket-fill
* rocket-takeoff
* rocket-takeoff-fill
* router
* router-fill
* rss
* rss-fill
* rulers
* safe
* safe-fill
* safe2
* safe2-fill
* save
* save-fill
* save2
* save2-fill
* scissors
* scooter
* screwdriver
* sd-card
* sd-card-fill
* search
* search-heart
* search-heart-fill
* segmented-nav
* send
* send-arrow-down
* send-arrow-down-fill
* send-arrow-up
* send-arrow-up-fill
* send-check
* send-check-fill
* send-dash
* send-dash-fill
* send-exclamation
* send-exclamation-fill
* send-fill
* send-plus
* send-plus-fill
* send-slash
* send-slash-fill
* send-x
* send-x-fill
* server
* shadows
* 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
* sign-dead-end
* sign-dead-end-fill
* sign-do-not-enter
* sign-do-not-enter-fill
* sign-intersection
* sign-intersection-fill
* sign-intersection-side
* sign-intersection-side-fill
* sign-intersection-t
* sign-intersection-t-fill
* sign-intersection-y
* sign-intersection-y-fill
* sign-merge-left
* sign-merge-left-fill
* sign-merge-right
* sign-merge-right-fill
* sign-no-left-turn
* sign-no-left-turn-fill
* sign-no-parking
* sign-no-parking-fill
* sign-no-right-turn
* sign-no-right-turn-fill
* sign-railroad
* sign-railroad-fill
* sign-stop
* sign-stop-fill
* sign-stop-lights
* sign-stop-lights-fill
* sign-turn-left
* sign-turn-left-fill
* sign-turn-right
* sign-turn-right-fill
* sign-turn-slight-left
* sign-turn-slight-left-fill
* sign-turn-slight-right
* sign-turn-slight-right-fill
* sign-yield
* sign-yield-fill
* signal
* signpost
* signpost-2
* signpost-2-fill
* signpost-fill
* signpost-split
* signpost-split-fill
* sim
* sim-fill
* sim-slash
* sim-slash-fill
* sina-weibo
* 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
* skype
* slack
* slash
* slash-circle-fill
* slash-lg
* slash-square
* slash-square-fill
* sliders
* sliders2
* sliders2-vertical
* smartwatch
* snapchat
* 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
* sourceforge
* speaker
* speaker-fill
* speedometer
* speedometer2
* spellcheck
* spotify
* square
* square-fill
* square-half
* stack
* stack-overflow
* star
* star-fill
* star-half
* stars
* steam
* 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
* strava
* stripe
* subscript
* substack
* subtract
* suit-club
* suit-club-fill
* suit-diamond
* suit-diamond-fill
* suit-heart
* suit-heart-fill
* suit-spade
* suit-spade-fill
* suitcase
* suitcase-fill
* suitcase-lg
* suitcase-lg-fill
* suitcase2
* suitcase2-fill
* sun
* sun-fill
* sunglasses
* sunrise
* sunrise-fill
* sunset
* sunset-fill
* superscript
* symmetry-horizontal
* symmetry-vertical
* table
* tablet
* tablet-fill
* tablet-landscape
* tablet-landscape-fill
* tag
* tag-fill
* tags
* tags-fill
* taxi-front
* taxi-front-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
* tencent-qq
* terminal
* terminal-dash
* terminal-fill
* terminal-plus
* terminal-split
* terminal-x
* text-center
* text-indent-left
* text-indent-right
* text-left
* text-paragraph
* text-right
* text-wrap
* textarea
* textarea-resize
* textarea-t
* thermometer
* thermometer-half
* thermometer-high
* thermometer-low
* thermometer-snow
* thermometer-sun
* threads
* threads-fill
* three-dots
* three-dots-vertical
* thunderbolt
* thunderbolt-fill
* ticket
* ticket-detailed
* ticket-detailed-fill
* ticket-fill
* ticket-perforated
* ticket-perforated-fill
* tiktok
* toggle-off
* toggle-on
* toggle2-off
* toggle2-on
* toggles
* toggles2
* tools
* tornado
* train-freight-front
* train-freight-front-fill
* train-front
* train-front-fill
* train-lightrail-front
* train-lightrail-front-fill
* translate
* transparency
* trash
* trash-fill
* trash2
* trash2-fill
* trash3
* trash3-fill
* tree
* tree-fill
* trello
* triangle
* triangle-fill
* triangle-half
* trophy
* trophy-fill
* tropical-storm
* truck
* truck-flatbed
* truck-front
* truck-front-fill
* tsunami
* tv
* tv-fill
* twitch
* twitter
* twitter-x
* type
* type-bold
* type-h1
* type-h2
* type-h3
* type-h4
* type-h5
* type-h6
* type-italic
* type-strikethrough
* type-underline
* ubuntu
* ui-checks
* ui-checks-grid
* ui-radios
* ui-radios-grid
* umbrella
* umbrella-fill
* unindent
* union
* unity
* universal-access
* universal-access-circle
* unlock
* unlock-fill
* upc
* upc-scan
* upload
* usb
* usb-c
* usb-c-fill
* usb-drive
* usb-drive-fill
* usb-fill
* usb-micro
* usb-micro-fill
* usb-mini
* usb-mini-fill
* usb-plug
* usb-plug-fill
* usb-symbol
* valentine
* valentine2
* vector-pen
* view-list
* view-stacked
* vignette
* vimeo
* vinyl
* vinyl-fill
* virus
* virus2
* 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
* webcam
* webcam-fill
* wechat
* whatsapp
* wifi
* wifi-1
* wifi-2
* wifi-off
* wikipedia
* wind
* window
* window-dash
* window-desktop
* window-dock
* window-fullscreen
* window-plus
* window-sidebar
* window-split
* window-stack
* window-x
* windows
* wordpress
* wrench
* wrench-adjustable
* wrench-adjustable-circle
* wrench-adjustable-circle-fill
* x
* x-circle
* x-circle-fill
* x-diamond
* x-diamond-fill
* x-lg
* x-octagon
* x-octagon-fill
* x-square
* x-square-fill
* xbox
* yelp
* yin-yang
* youtube
* zoom-in
* zoom-out
INSTALL
Bootstrap Icons are published to npm, but they can also be manually downloaded
if needed.
PACKAGE MANAGER
Install Bootstrap Icons—including SVGs, icon sprite, and icon fonts—with npm or
Composer. Then, choose how you’d like to include the icons with the usage
instructions.
npm i bootstrap-icons
composer require twbs/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.
Download latest ZIP
CDN
Include the icon fonts stylesheet—in your website <head> or via @import in
CSS—from jsDelivr and get started in seconds. See icon font docs for examples.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.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. We recommend using a width: 1em (and
optionally height: 1em) 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="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></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/icons/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-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
...
</svg>
ACCESSIBILITY
For purely decorative icons, add aria-hidden="true". Otherwise, 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/icons/bootstrap.svg" alt="Bootstrap" ...>
<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" aria-hidden="true" ...>
...
</svg>
</button>
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 additional role="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.
Bootstrap Bootstrap
* Designed and built with all the love in the world by the Bootstrap team with
the help of our contributors.
* Code licensed MIT, docs CC BY 3.0.
LINKS
* Home
* Docs
* Examples
* Icons
* Themes
* Blog
* Swag Store
GUIDES
* Getting started
* Starter template
* Webpack
* Parcel
* Vite
PROJECTS
* Bootstrap 5
* Bootstrap 4
* Icons
* RFS
* npm starter
COMMUNITY
* Issues
* Discussions
* Corporate sponsors
* Open Collective
* Stack Overflow