Bootstrap Icons

Icons

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.

composer require twbs/bootstrap-icons

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.13.1/font/bootstrap-icons.min.css">

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

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.

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;
}

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>