Skip to main content
Bootstrap Icons
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

Currently v1.11.3 Icons Icon Sprite Install Usage Styling Accessibility GitHub repo



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


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


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="">
@import url("");


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.


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="" 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- 0 0 1 .548-.736h.005l. 1.522.242 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>


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 class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>

External image

Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the <img> element.