Icons

Install

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

npm

Install Bootstrap Icons via command line with npm.

npm install bootstrap-icons

Download

Our releases are published to GitHub. All icon SVGs are included in the bundle, as well as license and readme files. Our package.json is also included, though our npm scripts are primarily available for our development workflows.

Download latest ZIP

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 class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></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="" width="32" height="32" title="Bootstrap">

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: "";
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></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>

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.

Found another issue with SVGs we should note? Please open an issue to share details.