icons

Bootstrap Icons

Official open source SVG icon library for Bootstrap with over 2,000 icons.
Explore Bootstrap Icons »

Bootstrap · Blog

Install

The published package includes individual SVG files, the combined SVG sprite, icon fonts, CSS, and Sass.

npm i bootstrap-icons

For those using Packagist, Bootstrap Icons are also available via Composer:

composer require twbs/bootstrap-icons

You can also download the latest release archive.

CDN

For the icon font, include the versioned jsDelivr stylesheet in your document head or import it from your stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

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

Usage

Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they’re built for Bootstrap, they’ll work in any project.

Embedded SVG

Embed an icon’s SVG directly in your HTML. A width and height of 1em lets the icon scale with the surrounding text.

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16" aria-hidden="true">
  <path d="M4 1c2 0 3 1.5 4 3 1-1.5 2-3 4-3 2.5 0 4 2 4 4.5 0 3-2.5 5.5-8 9.5C2.5 11 0 8.5 0 5.5 0 3 1.5 1 4 1"/>
</svg>

External image

Copy an SVG into your project and reference it like any other image. Use useful alt text when the image conveys meaning and an empty alt when it is decorative.

<img src="/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">

SVG sprite

The package includes bootstrap-icons.svg. Copy it to your own origin and use an icon filename as the fragment identifier. Cross-origin external sprites are restricted by some browsers, so serve the sprite with your application.

<svg class="bi" width="32" height="32" fill="currentColor" aria-hidden="true">
  <use href="/bootstrap-icons.svg#toggles"></use>
</svg>

See the complete sprite guide for local and external examples.

Icon font

Include the icon font stylesheet, then combine the base bi class with an icon class based on its filename. Font icons inherit the current text size and color.

<i class="bi bi-alarm" aria-hidden="true"></i>

When your Sass compiler cannot resolve the package’s relative font URLs, set the font directory before importing the source:

$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";

See the icon font guide for class examples and the generated font stylesheet.

Sizing and color

Embedded SVGs and the icon font use currentColor. Set color directly and set font-size when the icon dimensions are 1em.

.feature-icon {
  color: cornflowerblue;
  font-size: 2rem;
}

Accessibility

Hide purely decorative icons from assistive technology with aria-hidden="true". Meaningful standalone images need an appropriate text alternative. For icon-only controls, put the accessible name on the control—not on its decorative child icon.

<button type="button" aria-label="Mute">
  <svg class="bi" aria-hidden="true">
    <use href="/bootstrap-icons.svg#volume-mute-fill"></use>
  </svg>
</button>

Prefer visible text when possible. A visible label or a visually-hidden label stays available to screen readers and supports users who may not recognize an icon.

Use in CSS

SVG data URLs work in CSS, but URL-sensitive characters must be escaped—for example, # becomes %23. Keep the viewBox when resizing with background-size, and include the SVG namespace.

.icon-example {
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'>…</svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Figma

The official Bootstrap Icons community file makes the icon set available in Figma for design work.

Releases and resources

• Browse and search every icon
• Detailed installation and usage guide
• SVG sprite guide
• Icon font guide
• Release notes and downloads
• Package on npm

Development

Clone the repo, install the root and Astro dependencies, and start the docs server locally.

git clone https://github.com/twbs/icons/
cd icons
npm ci
npm ci --prefix astro
npm start

Then open http://localhost:4321 in your browser.

npm scripts

Here are some key scripts you’ll use during development. Be sure to look to our package.json or npm run output for a complete list of scripts.

Script	Description
start	Alias for running docs-serve
docs-serve	Starts the local Astro development server
docs-build	Builds the production documentation site
docs-test	Checks, builds, and validates the documentation site
pages	Generates permalink pages for each icon with template Markdown
icons	Processes and optimizes SVGs in icons directory, generates fonts and sprite

Adding SVGs

Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with fill (no stroke). Once a new SVG icon has been added to the icons directory, we use an npm script to:

1. Optimize our SVGs with SVGO.
2. Modify the SVGs source code, removing all attributes before setting new attributes and values in our preferred order.

Use npm run icons to run the script, run npm run pages to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.

Warning: Please exclude any auto-generated files, like font/** and bootstrap-icons.svg from your branch because they cause conflicts, and we generally update the dist files before a release.

Publishing

Documentation is published automatically when a new Git tag is published. See our GitHub Actions and package.json for more information.

License

MIT

Author

@mdo