What Are Bootstrap Icons?
The library comes out of the Bootstrap project but installs separately from the Bootstrap CSS and JavaScript bundle. A project that skips the Bootstrap framework can still use every icon.
Every icon is a flat SVG file drawn on a 16 by 16 pixel grid, with fill and no stroke, according to the twbs/icons README.
The package includes one SVG file per icon, which suits inline markup or the img tag. It also includes bootstrap-icons.svg, a sprite that packs every icon into a single file you reference with use. Then there’s the font side: WOFF and WOFF2 files plus CSS and Sass, all driven by bi classes.
The MIT license covers all of it. Commercial use, modification and redistribution are fine as long as the copyright and license notice stay with the copy.
The README lists @mdo as author, the GitHub handle of Bootstrap co-creator Mark Otto. It also says new icons are typically added only by him, though exceptions can be made.
For the record, icons.getbootstrap.com shows 2,078 icons at version 1.13.2 (October 2026), and the twbs/icons README confirms the MIT license and that 16 by 16 grid with flat fill and no stroke.
Icon counts differ from page to page. The README says over 2,000. PW Skills still cites over 1,300 beside a 1.7.2 CDN link, and Hyring says more than 1,900 beside a 1.11.3 link.
The gap comes from release age. Tutorials written against older versions understate what the library holds today.
How to Install Bootstrap Icons
You can pull the library in from the jsDelivr CDN, a release ZIP, npm or Composer. They all deliver the same files, so the choice depends on your build setup and has nothing to do with features.
CDN link and release download
The CDN route is one line in the head of the page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css">
Keep the version number in the URL. Without it, jsDelivr serves the newest release, and a later update changes what your page loads.
The release archive from GitHub holds the SVGs, fonts, sprite, license and README, per the install section of the icons.getbootstrap.com usage page. Unzip it into the project and link the local stylesheet. The fonts folder has to stay beside the CSS file.
npm and Composer
Bundler projects usually go with npm i bootstrap-icons. PHP projects can run composer require twbs/bootstrap-icons, since the package is published on Packagist.
Either one installs the full package, meaning individual SVGs, the sprite, icon fonts, CSS and Sass (twbs/icons README).
It breaks when your Sass compiler can’t resolve the font URLs inside the package. Set the font directory before the import and it goes away.
$bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";
The 1.13.0 release notes also record a docs update for relative path issues in Vite and Parcel.
For a prototype, the CDN link is plenty. Once the project is headed to production, I’d install through npm or Composer and serve the files from your own origin. That drops a third-party request and also satisfies the sprite’s same-origin rule.
Icon Font, Inline SVG, SVG Sprite or img Tag: Which Method to Use
Use inline SVG or the sprite when a page shows a handful of icons. Use the icon font when icons are scattered across many templates and you can’t edit the markup of each one.
| Method | Load cost | Strength | Drawback |
|---|
| Icon font | Whole set loads | One link, one class | Single color per glyph |
| Inline SVG | Only icons used | currentColor styling, no extra request | Markup repeats per use |
| SVG sprite | One file, every icon | One request, reusable with use | Same origin only |
| img tag | One request per icon | Plain, cacheable markup | Page CSS color does not apply |
Pasting an icon’s SVG markup into your HTML is the inline route. The paths sit right in the page, and currentColor picks up the surrounding text color.
What the icon font costs to load
jsDelivr’s package index for version 1.13.2 lists the minified stylesheet at 87,008 bytes and the WOFF2 file at 134,012 bytes.
That’s about 221 KB of files before transfer compression, and it loads whether the page shows 3 icons or 300. (WOFF2 is already compressed, so the CSS shrinks more in transit than the font does.)
Single files are far lighter. The index puts alarm.svg at 689 bytes and cup-hot.svg at 2,203 bytes.
The repository’s icon build script runs each SVG through SVGO, so the individual files already carry the benefits of SVG optimization.
The font is the quickest way to get started. It’s also the heaviest way to ship a page that uses five icons.
Where each method breaks
- Every glyph in the icon font is one color, and if the font file fails to load, the icons disappear.
- Inline SVG gets annoying when one icon changes, because you edit every copy of its markup.
- The sprite should be served from the same origin as the page, since browser security restrictions can block external
use references across domains, per the icons.getbootstrap.com sprite guide. - An SVG loaded through an img tag is treated as an image. It needs real alt text when it carries meaning and an empty alt when it’s decorative.
How to Add Bootstrap Icons to a Page
Load the stylesheet, then write an element with two classes: bi and bi- followed by the icon’s filename.
- Link
bootstrap-icons.min.css in the head, from the CDN or from a local copy. - Find the icon on icons.getbootstrap.com. The class is
bi- plus the filename, so alarm becomes bi-alarm. - Add the element, for example
<i class="bi bi-alarm" aria-hidden="true"></i> - Add spacing next to text with a Bootstrap utility such as
me-2, or write a margin rule if Bootstrap is not loaded. - Reload and confirm the glyph renders at the size of the surrounding text.
The bi class applies the shared icon-font styling, and the second class picks the glyph.
Some older tutorials show only bi-alarm without the base class. The current official usage page uses both, and the 1.11.4 release notes list a docs fix for font examples that were missing bi.
Inside a Bootstrap button, put the icon before the label and give it a margin.
<button type="button" class="btn btn-primary">
<i class="bi bi-alarm me-2" aria-hidden="true"></i>Set alarm
</button>
The same markup works in a nav link inside a Bootstrap navbar. An icon-only link needs its label on the link, for example aria-label="Search", and not on the icon.
Prefer the sprite? Then the same icon becomes an svg element with a use reference to a copy of the file on your own origin.
<svg class="bi" width="32" height="32" fill="currentColor" aria-hidden="true">
<use href="/bootstrap-icons.svg#alarm"></use>
</svg>
With the font, all you write is one class. The sprite needs a copy of its file sitting on your server, which is also why the live examples on this page use the font and inline SVG: each one runs in a sandboxed frame with no file of its own to point use at.
How to Change Bootstrap Icon Size and Color
Set font-size to resize an icon and color to recolor it. The icon font and embedded SVGs both follow the surrounding text, so no icon-specific rule is needed.
.feature-icon {
color: cornflowerblue;
font-size: 2rem;
}
Size has a few controls. font-size scales font icons and any SVG sized at 1em, with rem units following the root and em units following the parent. Width and height attributes fix an SVG at a pixel size, and after that font-size stops affecting it. Bootstrap’s own utilities cover the rest, fs-1 through fs-6 for size and text-primary and its siblings for color.
Because the icon inherits text color, one hover rule on a button recolors the label and the icon together. A dark theme that changes the text color changes the icons too.
The color you pick still has to read against its background. The W3C’s WCAG 2.2 guidance for success criterion 1.4.11 sets a 3:1 color contrast ratio for graphics needed to understand content, and it exempts purely aesthetic ones.
The img route has a workaround, a CSS filter chain that approximates a target color. A CSS color filter generator works out the values, but the result is only an approximation, so inline SVG is the cleaner fix.
How to Make Bootstrap Icons Accessible
Hide decorative icons with aria-hidden="true" and put the accessible name on the control that holds the icon, not on the icon itself.
The Bootstrap Icons documentation draws the same line. Decorative icons stay hidden from assistive technology, and icon-only controls need a label. A meaningful standalone image needs a text alternative as well.
Icon next to visible text
The visible word already names the control, so the icon adds nothing for a screen reader.
<a href="/cart"><i class="bi bi-cart" aria-hidden="true"></i> Cart</a>
Visible text is the better choice wherever space allows, because it also helps users who don’t recognize an icon.
Icon-only controls
An aria-label on the button names it with no extra markup and no visible text. The other option is visually hidden text, a span with Bootstrap’s visually-hidden class, which stays available to screen readers.
<button type="button" aria-label="Mute">
<i class="bi bi-volume-mute-fill" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-trash" aria-hidden="true"></i>
<span class="visually-hidden">Delete</span>
</button>
The aria-label attribute comes from ARIA. A button with only an icon and no label has nothing to announce, which is the exact problem it solves.
Standalone SVG and img icons
A meaningful standalone SVG needs an accessible name. Through an img tag that means useful alt text, and a decorative img gets an empty alt.
Naming techniques for inline SVG, such as title elements, are covered in this guide to accessible SVG files.
Why Bootstrap Icons Are Not Showing
When icons go missing, the cause is usually a stylesheet or font file that returns an error, an icon newer than the pinned version, or a Content Security Policy that blocks the font.
The stylesheet or font file returns an error
You get empty space where the icon belongs. Open the Network tab and confirm the CSS and both font files return 200.
In the package, the CSS sits in font/ and the WOFF and WOFF2 files sit in font/fonts/, per jsDelivr’s package index for version 1.13.2. Move the CSS without the fonts folder and every glyph disappears.
The icon is newer than your pinned version
Release 1.12.0, titled The Bluesky Update, added one icon, Bluesky. A page pinned to 1.11.4 or older has no bi-bluesky, and the element renders empty.
On a CDN, raise the version number in the URL. With npm, update the package and rebuild.
A Content Security Policy blocks the font
MDN documents font-src as the directive that controls @font-face sources, falling back to default-src when absent. The icon font loads through @font-face, so a policy that omits the CDN origin blocks it.
Content-Security-Policy: style-src 'self' https://cdn.jsdelivr.net; font-src 'self' https://cdn.jsdelivr.net
Allow the CDN in both directives, or self-host the files and drop the third-party dependency.
Bootstrap Icons vs Font Awesome and Other Icon Sets
Stay with Bootstrap Icons when the project already runs Bootstrap and needs a free UI set. Switch when you need a larger library, adjustable weight, or a stroke style.
| Set | License | Delivery | Drawback |
|---|
| Font Awesome Free | CC BY 4.0 (icons), SIL OFL (fonts) | Web font, SVG | Extra styles require Pro |
| Material Symbols | Apache 2.0 | Variable icon font, SVG | Default load includes every icon |
| Heroicons | MIT | SVG, React, Vue | No new icons from contributors |
| Feather Icons | MIT | SVG, sprite, JS replace | Line style only |
| Tabler Icons | MIT | SVG, sprite, React, webfont | PNG and PDF exports sit in a paid bundle |
Where Bootstrap Icons falls short
- Size is the obvious gap. Tabler Icons lists 6,257 icons on tabler.io.
- Material Symbols exposes fill, weight, grade and optical size as variable font axes, per Google’s guide, and Bootstrap Icons has nothing like that.
- Google’s guide puts the default Material Symbols font load, every icon, at 295 KB, and a three-icon subset at 1.7 KB through the
icon_names parameter. Bootstrap Icons documents no matching option for its font, so trimming means inline SVG. - Font Awesome Free icons are CC BY 4.0, which requires attribution, and the extra styles sit behind Pro.
- The Heroicons README accepts bug fixes only, with no new icons from contributors.
Google’s own guide gives two counts for Material Symbols, over 2,500 icons in the overview and 3,800+ in the subsetting section. Check the live library before quoting either.
Which set to pick
On a Bootstrap project that needs a free set of UI-sized icons, Bootstrap Icons is the obvious fit. A utility-class project is better served by Heroicons, from the makers of Tailwind CSS, which come with first-party React and Vue packages.
Material Symbols, subsetted, is the pick when you want variable weight or fill states. Tabler Icons makes sense if you need thousands of extra line icons.
Switching for style alone rarely pays off. Mixing two sets on one page adds a second payload and a second visual style.
Bootstrap Icons FAQ
Are Bootstrap Icons included when I install Bootstrap 5?
No. Bootstrap Icons installs as its own package, so loading the Bootstrap CSS bundle does not load the icon font.
Add the icon stylesheet or SVG files next to the framework.
How do I use Bootstrap Icons in React or Vue?
In React, install the community react-bootstrap-icons package and import each icon as a component.
In Vue, install bootstrap-icons and import bootstrap-icons/font/bootstrap-icons.css once in the entry file, then write bi classes as usual. The official documentation lists no first-party Vue component.
How can I find the right icon name?
Search on icons.getbootstrap.com. The box filters by name and by tags, so a synonym often works as well as the exact word.
The class is bi- plus the file name shown under each icon. Release 1.11.1 added a “gauge” tag to the speedometer icon, so tag coverage keeps growing.
What is the difference between filled and outline icons?
Filled icons carry a -fill suffix. bi-heart is the outline and bi-heart-fill is solid.
Swap one for the other to show a state change, such as liked and not liked.
Can I rotate or animate an icon?
Yes. The i element is inline by default, so give it display: inline-block before transform: rotate() takes effect.
Continuous motion needs a keyframes rule. For inline SVG, this guide on how to animate SVG with CSS covers the options.
Can one icon use more than one color?
Yes, with inline SVG. Give individual path elements their own classes and set a fill on each one.
A font glyph takes a single color, so per-path styling means switching the markup.
How do I put an icon inside an input field?
Wrap the field in a Bootstrap input-group. Place the icon in an input-group-text span beside the control.
The Bootstrap input classes keep the border and height aligned, and the icon needs aria-hidden="true" when a label already names the field.
Pinning and Trimming Bootstrap Icons as a Project Grows
Bootstrap Icons stays dependable as a project grows if you pin the version first, settle on a delivery method second, and cut unused icons last. Pin the exact version in the CDN URL or package file, stick to one delivery method per project, and remove any icon the pages never call.
Pinning comes first because it costs one edit and makes every later change reproducible. Trimming comes last because it needs the final list of icons in use.
The downside is manual upkeep. A pinned build gets no new icons or fixes until someone raises the version number, so that bump belongs on the checklist for each release.