Bootstrap Icons 1.13.2: four ways to ship 2,000 SVG icons, and where each one breaks

One package, four formats: SVG files, a sprite, an icon font and Sass

Bootstrap Icons is the official open source SVG icon library for Bootstrap, with over 2,000 icons. It is built for Bootstrap but works in any project, because each icon is an SVG that scales and can be styled with CSS. The published package carries individual SVG files, the combined SVG sprite, icon fonts, CSS and Sass. Its package.json limits what ships to `icons/*.svg`, `bootstrap-icons.svg` and the `font` directory, and points the `style`, `sass` and `types` fields at `font/bootstrap-icons.css`, `font/bootstrap-icons.scss` and `font/bootstrap-icons.ts`.

There are three ways to get it. From npm:

npm i bootstrap-icons

From Packagist through Composer:

composer require twbs/bootstrap-icons

Or as the latest release archive from GitHub. The project is MIT licensed, and the author field in package.json is mdo.

The CDN stylesheet pins 1.13.2, after a seventeen-month gap

For the icon font, the shortest route is the versioned jsDelivr stylesheet, either in the document head or imported from your own CSS:

<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");

The version is in the URL, which means a page using it stays on 1.13.2 until someone edits the tag. That is a feature for stability and a chore for upgrades. The release history explains the number: v1.13.0 and v1.13.1 both shipped on 2025-05-09, and v1.13.2 followed on 2026-10-08, roughly seventeen months later. Releases are infrequent, so a pinned CDN link does not fall far behind quickly, but when a new release arrives you have to search your templates for the old version string yourself. The repository is not archived, and the last push was on 2026-11-01.

Embedded SVG and currentColor: sizing icons with font-size

The most direct method is pasting an icon's SVG into the HTML. With width and height set to `1em`, the icon scales 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>

Embedded SVGs and the icon font both use `currentColor`, so color comes from the CSS `color` property and size from `font-size` when the dimensions are `1em`:

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

The alternative is copying an SVG file into your project and using it as an ordinary image. That route loses `currentColor` inheritance from the surrounding text, so the icon keeps whatever fill the file carries. Give it useful alt text when it conveys meaning, and an empty `alt` when it is decorative.

The sprite has to live on your own origin

The package includes `bootstrap-icons.svg`, a sprite holding every icon. You reference one icon with its filename as the fragment identifier:

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

The catch is where the file sits. Some browsers restrict cross-origin external sprites, so the project tells you to copy the sprite to your own origin and serve it with your application. In practice, that rules out the convenient pattern of pointing `<use href>` at a CDN copy of the sprite: on browsers that block it, the icons simply do not render, and nothing in your own code is wrong. If you want the sprite approach, add a build or deploy step that copies `bootstrap-icons.svg` into your static files, and keep it in step with the package version. A separate sprite guide on the documentation site covers local and external examples.

Sass compilers that cannot resolve the font's relative URLs

The icon font is used by combining the base `bi` class with a class named after the icon's file:

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

Font icons inherit the current text size and color. The trouble starts when you compile the Sass source yourself instead of linking the prebuilt CSS. The package's font stylesheet refers to its font files with relative URLs, and some Sass compilers cannot resolve them from where your build runs. The result is a stylesheet that compiles but points at font files that are not there, so the icons do not show up. The fix is to set the font directory before the import:

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

The package keywords include woff and woff2. An icon font guide on the documentation site shows class examples and the generated stylesheet.

Data URLs in CSS need escaped characters and the viewBox kept

Icons can also go into CSS as SVG data URLs, for example as a `background-image`. Two rules apply. URL-sensitive characters must be escaped, so `#` in a color value becomes `%23`, and a raw hash in the string breaks the data URL. And the `viewBox` has to stay on the SVG when you resize it with `background-size`, along with the SVG namespace, so the icon resizes with the box.

This method gives up `currentColor`: the fill is baked into the data URL, so changing the icon color means editing the string, not setting `color`. It suits one-off decorative backgrounds rather than icons that change with theme or state.

Accessibility rules apply to every method. Decorative icons get `aria-hidden="true"`. For an icon-only button, the accessible name goes on the button through `aria-label`, not on the icon inside it, and a visible or `visually-hidden` text label is preferred where possible.

New glyphs come from one designer on a 16x16 grid

Additions to the set are, as a rule, made by @mdo, with exceptions possible. New glyphs are designed in Figma on a 16x16px grid and exported as flattened SVGs using `fill` with no stroke. A build script then optimizes them with SVGO and rewrites each file's attributes in a fixed order, and a second script builds permalink pages:

npm run icons

For users, the consequence is that a missing icon is not something you can expect to be added because you asked; plan to draw your own or mix in another set, and match the 16px grid and fill-only style if you want it to sit beside these. Designers can work with the set directly through the official Bootstrap Icons community file in Figma. To run the documentation site locally, clone the repository and start the Astro server:

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

The site then serves at `http://localhost:4321`.

Editorial conclusion

Bootstrap Icons fits any web project that wants a large, MIT-licensed set of 16x16 grid icons it can embed as SVG, reference as images, serve as a sprite or use as a font, Bootstrap or not. It does not fit projects that need a cross-origin sprite from a CDN, or teams that expect their icon requests to be added on demand, since new glyphs come from one designer. Before choosing a method, decide whether you will self-host the sprite, and pin the version in your CDN URLs.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. twbs/icons on GitHub