How to Use Bootstrap Icons in HTML, CSS & React: The Complete 2026 Guide
Over 2,000 Open-Source Vector Icons: Designed by the Bootstrap core team and Mark Otto, Bootstrap Icons has grown into one of the most widely searched and deployed open-source icon libraries in web development. Unlike legacy Glyphicons, Bootstrap Icons is framework-agnostic, featuring pure SVGs, web fonts, and npm packages. This production manual details:
- The 4 Integration Paths: Web font CDN, external SVG sprites, inline SVG, and the
react-bootstrap-iconspackage. - Performance Optimization: Why the 98 KB web font harms Core Web Vitals and how inline SVGs slash payloads to ~1.2 KB per icon.
- FOUC Elimination: Preventing font layout shifts and raw text flashes during slow network requests.
- Pixel Alignment: Resolving the classic
vertical-align: -0.125embaseline misalignment in buttons and badges. - Dynamic CSS Styling: Harnessing
currentColor, CSS custom properties, and multi-color gradient fills. - Accessibility Standards: WCAG 2.2 compliant markup for decorative icons versus interactive icon buttons.
- Direct Vector Export: Search and export all 2,084 Bootstrap Icons on IconStash with instant SVG, PNG, and JSX copy.
1. What is Bootstrap Icons? Design & Architecture
When Bootstrap 4 launched, it famously dropped bundled icon fonts (like Glyphicons) to avoid forcing unnecessary network weight on developers. In response to community demand, the Bootstrap team launched Bootstrap Icons: an independent, open-source library built natively in vector SVG.
Key architectural specifications of the library include:
- 2,080+ Production Glyphs: Offering comprehensive coverage across commerce, UI controls, file types, brand badges, and devices.
- Permissive MIT Licensing: 100% free for commercial and proprietary projects without royalties or mandatory attribution.
- Dual Style Pairs: Most concepts provide both an outline variant (e.g.,
heart) and a filled variant (e.g.,heart-fill). - Zero Dependency on Bootstrap CSS: Fully usable in Tailwind CSS, plain HTML, WordPress, Vue, Svelte, or React apps.
To explore how Bootstrap compares to other foundational web icon sets, consult our detailed 28 Best Open Source Icon Libraries benchmark.
2. The Four Integration Methods Compared
Bootstrap Icons provides four distinct ways to render icons on the web. Choosing the right method has a significant impact on your page load speed and styling flexibility.
Method 1: Web Font via CDN (The Quickest Setup)
Include the official CDN stylesheet in your HTML <head> and reference icons using the <i class="bi bi-*"></i> syntax:
<!-- Add to <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- Usage in HTML -->
<button type="button" class="btn btn-primary">
<i class="bi bi-bookmark-check"></i>
<span>Save Article</span>
</button>Method 2: External SVG Sprite (Cached Vector Delivery)
Download the official bootstrap-icons.svg sprite file or host it on your CDN. Render icons via the SVG <use> element:
<svg class="bi" width="24" height="24" fill="currentColor" aria-hidden="true">
<use href="/assets/bootstrap-icons.svg#shield-check"/>
</svg>Method 3: Inline SVG (Maximum Performance & Styling Control)
Embed the raw SVG markup directly into your HTML or template. This eliminates all external network requests and enables surgical CSS path styling:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check2-circle text-success" viewBox="0 0 16 16">
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
</svg>Method 4: React Components via npm
For modern React, Next.js, or Vite apps, install react-bootstrap-icons for tree-shakable JSX components:
npm install react-bootstrap-iconsimport { ShieldLockFill, ArrowRight } from 'react-bootstrap-icons';
export function AuthCard() {
return (
<div className="card p-4 shadow-sm">
<div className="d-flex align-items-center gap-2 mb-3">
<ShieldLockFill size={24} className="text-primary" />
<h5 className="mb-0">Enterprise Encryption</h5>
</div>
<p className="text-muted">End-to-end encrypted protocol active.</p>
</div>
);
}3. Performance Math: Font vs. Sprite vs. Inline SVG
Web developers often choose the CDN font method because of the familiar <i> syntax, unaware of the real Core Web Vitals cost. We conducted network and CPU tests on a simulated 4G connection:
| Delivery Strategy | Network Payload | HTTP Requests | FOUC / FOIT Risk | LCP / FCP Impact |
|---|---|---|---|---|
| Web Font (CDN) | ~118 KB (CSS + WOFF2) | 2 requests | High (Text flashes or disappears) | Render-blocking stylesheet |
| SVG Sprite File | ~85 KB (Gzipped) | 1 request (Cacheable) | Zero | Minimal (Non-blocking asset) |
| Inline SVG (5 icons) | ~4.8 KB | 0 requests | Zero (Instant paint) | Zero render delay |
| React Components (5 icons) | ~5.2 KB compiled JS | Bundled in app chunk | Zero | Zero RSC overhead |
If your application displays fewer than 20 distinct icons, inline SVG or component imports are drastically faster than downloading a 98 KB WOFF2 font containing 2,000 glyphs you will never use. For comprehensive architectural advice, see SVG Sprites vs Inline SVG vs Icon Components.
4. Advanced CSS Styling & Vertical Alignment Fixes
One of the most persistent frustrations with icon fonts is baseline misalignment: icons appear 2px to 3px lower than surrounding body text. This happens because glyph fonts are aligned along typographic font metrics (ascenders and descenders).
The Universal Alignment Fix
Whether using font icons or SVG markup, apply this utility to align icons with inline button text:
/* Perfect inline alignment with text */
.bi {
display: inline-block;
vertical-align: -0.125em; /* Compensates for font descender */
fill: currentColor;
}
/* Flexbox parent alignment (best practice) */
.btn-icon-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}Dynamic Sizing & Theming
Because Bootstrap Icons set fill="currentColor" by default, they automatically inherit the parent CSS color property. You can size and color them dynamically:
/* Dynamic color tokens */
.status-pill {
color: #10B981; /* Emerald */
}
.status-pill .bi {
width: 1.25rem;
height: 1.25rem;
}
/* Dual-color or gradient fills */
.gradient-icon {
background: linear-gradient(135deg, #C1DD2D 0%, #38BDF8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}5. Accessibility & Screen Reader Best Practices
Icons without proper accessible labels can confuse assistive technology users. Follow these two rules:
Rule 1: Purely Decorative Icons
If the icon accompanies visible text that fully conveys meaning, hide the icon from screen readers using aria-hidden="true":
<button type="button" class="btn btn-outline-secondary">
<svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true">
<use href="#trash"/>
</svg>
<span>Delete Record</span>
</button>Rule 2: Interactive Icon-Only Buttons
If the button contains only an icon (e.g., a search button or modal close button), supply an aria-label on the button or include a visually hidden text element:
<button type="button" class="btn btn-icon" aria-label="Close dialog">
<svg class="bi" width="20" height="20" fill="currentColor" aria-hidden="true">
<use href="#x-lg"/>
</svg>
</button>For more detailed WCAG standards, check our Designing Accessible SVG Icons guide.
6. Browse & Export All 2,084 Bootstrap Icons on IconStash
Skip the font payload completely. On IconStash, all 2,084 Bootstrap Icons are indexed with instant search, live fill toggles, and one-click export formats:
- One-Click JSX / TSX: Copy pre-formatted React components ready to paste into your components directory.
- SVGO-Optimized SVG: Clean vector markup without unnecessary metadata or editor bloat.
- High-Resolution PNGs: Download raster versions from 16px up to 1024px for mockups and presentations.
- Cross-Set Concept Search: Compare Bootstrap's icon designs side-by-side with Lucide, Remix Icon, and Tabler Icons.
Frequently Asked Questions
Do I need to install Bootstrap CSS to use Bootstrap Icons?
No. Bootstrap Icons is an entirely standalone, independent open-source icon library. You can use it in Tailwind CSS projects, React applications, static HTML pages, WordPress, or with any other UI framework without installing the core Bootstrap CSS stylesheet.
What is the best way to use Bootstrap Icons for web performance?
Inline SVG or component imports are fastest for web performance. The web font CDN method forces the browser to download a 98 KB WOFF2 font file and render-blocking CSS, causing FOUC. Inline SVG or react-bootstrap-icons only bundles the exact icons your page requires (~1.2 KB per icon), cutting HTTP overhead to zero.
How do I fix vertical alignment issues between Bootstrap Icons and text?
When using the web font class (e.g., ), the icon baseline often drops 2px below inline text. Apply 'vertical-align: -0.125em;' or wrap the icon and text in a CSS flexbox container with 'display: inline-flex; align-items: center; gap: 0.5rem;'.
Can I use Bootstrap Icons in React and Next.js?
Yes. You can install 'react-bootstrap-icons', which exports each icon as an individual React component with full TypeScript types and tree-shaking support, or copy the SVG code directly from IconStash into your JSX markup.
Are Bootstrap Icons free for commercial websites?
Yes. Bootstrap Icons is published under the MIT license. You can use them freely in commercial themes, client websites, SaaS products, and printed media without paying licensing fees or providing mandatory attribution.