Chapter 97: Bootstrap
What is Bootstrap Icons
So let’s do this properly — like a real teacher who wants you to understand exactly what Bootstrap Icons are, how they compare to Font Awesome, and why so many developers in 2026 love using them.
1. Bootstrap Icons — The Big Picture (in very simple teacher language)
Bootstrap Icons is a completely separate, free, open-source icon library created by the same team that makes Bootstrap (the most popular CSS framework in the world).
- First public release: January 2021 (v1.0.0)
- Current version in February 2026: v1.11.x (still actively updated)
- Total icons: over 2,000 (free, no paid/pro version)
- License: MIT (completely free for commercial & personal use)
Important point: Bootstrap Icons is NOT part of Font Awesome at all.
It is a different project, with its own design language, own icons, own way of using them.
2. Key differences — Bootstrap Icons vs Font Awesome 5 / 6 (2026 reality)
| Feature | Bootstrap Icons (v1.11, 2026) | Font Awesome 5 Free | Font Awesome 6/7 Free | Winner for most people in 2026? |
|---|---|---|---|---|
| Number of icons | ~2,000+ | ~1,500–1,600 | ~2,000+ (but many Pro-only) | Bootstrap Icons / FA6 |
| Style | Only one modern line-style (consistent) | Solid + Regular + Brands | Solid + Regular + Brands + Sharp | Bootstrap Icons (cleaner) |
| File format options | SVG sprites, SVG individual, web font, Figma | Only web font (or SVG in v6) | Web font + SVG | Bootstrap Icons (more flexible) |
| Size & weight | Very thin & modern lines | Thicker strokes (especially FA5) | Thinner & more modern | Bootstrap Icons / FA6 |
| Brand / logo icons | Almost none (only very few generic ones) | ~60 free brand logos | ~100+ free brand logos | Font Awesome |
| Official CDN / package size | Extremely lightweight (~100 KB sprite) | ~150–180 KB | ~200 KB+ | Bootstrap Icons |
| Customization | Very easy to change color/stroke via CSS | Easy (but solid style harder to tweak) | Easy | Bootstrap Icons |
| Integration with Bootstrap | Perfect (designed for it) | Works well but not native | Works well | Bootstrap Icons |
| Still updated in 2026? | Yes (regular releases) | No (frozen since 2018) | Yes | Tie (both active) |
| Most popular use-case 2026 | Modern dashboards, landing pages, startups | Legacy sites, old WordPress themes | New projects | Bootstrap Icons for new work |
3. How do Bootstrap Icons look? (very important)
Bootstrap Icons use very thin, clean, consistent line-style (stroke-based) — they feel modern, minimal, and premium.
Compare these common icons:
- Home icon
- FA5: thicker, more filled look
- Bootstrap Icons: thin outline, elegant
- User icon
- FA5: bold silhouette
- Bootstrap Icons: delicate line drawing
- Search icon
- FA5: thicker magnifying glass
- Bootstrap Icons: super slim & sharp
Many developers in 2025–2026 say: “Once I switched to Bootstrap Icons, everything suddenly looked 2× more professional and 2× lighter.”
4. How to use Bootstrap Icons (3 main ways – 2026 reality)
Method 1: CDN (easiest for beginners)
HTML
|
0 1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> |
Method 2: SVG sprite (best performance, most popular in 2026)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<svg style="display:none;"> <symbol id="bi-house" viewBox="0 0 16 16"> <!-- SVG path code from bootstrap icons --> </symbol> <!-- ... many more symbols ... --> </svg> <!-- Usage --> <svg class="bi" width="24" height="24" fill="currentColor"> <use xlink:href="#bi-house"/> </svg> Home |
Method 3: Individual SVG files (most flexible)
HTML
|
0 1 2 3 4 5 6 |
<img src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/house.svg" alt="Home" width="24" height="24"> |
or inline SVG:
HTML
|
0 1 2 3 4 5 6 7 8 |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"> <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/> </svg> |
5. Real, copy-paste examples (how people actually use Bootstrap Icons)
Example 1: Modern navigation bar (2026 style)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<nav style="background:#0d6efd; padding:15px; color:white; display:flex; justify-content:space-between; align-items:center;"> <div style="font-size:1.6rem; display:flex; align-items:center; gap:12px;"> <svg class="bi" width="32" height="32" fill="white"><use xlink:href="#bi-bootstrap"/></svg> My SaaS App </div> <div style="display:flex; gap:30px; font-size:1.3rem;"> <a href="#" style="color:white; text-decoration:none; display:flex; align-items:center; gap:8px;"> <svg class="bi" width="20" height="20" fill="white"><use xlink:href="#bi-house"/></svg> Dashboard </a> <a href="#" style="color:white; text-decoration:none; display:flex; align-items:center; gap:8px;"> <svg class="bi" width="20" height="20" fill="white"><use xlink:href="#bi-people"/></svg> Users </a> <a href="#" style="color:white; text-decoration:none; display:flex; align-items:center; gap:8px;"> <svg class="bi" width="20" height="20" fill="white"><use xlink:href="#bi-gear"/></svg> Settings </a> </div> </nav> |
Example 2: Pricing card with icon (very common in 2026)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="border:1px solid #dee2e6; padding:30px; max-width:380px; margin:40px auto; border-radius:12px; text-align:center;"> <svg class="bi text-primary mb-3" width="64" height="64" fill="currentColor"><use xlink:href="#bi-rocket-takeoff"/></svg> <h2>Pro Plan</h2> <p style="font-size:2.8rem; font-weight:bold; color:#0d6efd; margin:15px 0;"> $29 <small style="font-size:1rem; color:#6c757d;">/ month</small> </p> <button style="background:#0d6efd; color:white; padding:14px 28px; border:none; border-radius:50px; font-size:1.2rem;"> Get Started </button> </div> |
Example 3: Simple settings toggle list
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style="max-width:500px; margin:50px auto; font-size:1.3rem;"> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid #eee;"> Dark Mode <svg class="bi text-primary" width="32" height="32" fill="currentColor"><use xlink:href="#bi-toggle-on"/></svg> </div> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid #eee;"> Notifications <svg class="bi text-secondary" width="32" height="32" fill="currentColor"><use xlink:href="#bi-toggle-off"/></svg> </div> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px;"> Auto Save <svg class="bi text-primary" width="32" height="32" fill="currentColor"><use xlink:href="#bi-toggle-on"/></svg> </div> </div> |
6. Teacher Summary – Quick Facts (February 2026)
Bootstrap Icons = free, open-source, modern line-style icon library made by the Bootstrap team
| Question | Answer for Bootstrap Icons (2026) |
|---|---|
| When released? | January 2021 |
| How many icons? | ~2,000+ (all free) |
| Style? | Only one thin, consistent line-style |
| Brand / logo icons? | Almost none (only very few generic ones) |
| File size (CDN sprite)? | Very light (~100 KB) |
| Best for? | Modern dashboards, landing pages, startups, SaaS |
| Still updated? | Yes — regular releases |
| Should new projects use it? | Yes — highly recommended in 2026 |
Got it now? Want me to:
- Build a full modern SaaS dashboard header + settings page demo using only Bootstrap Icons?
- Show side-by-side comparison of Bootstrap Icons vs Font Awesome 5 for the same icons?
- Give you ready-to-copy CDN + sprite code for Bootstrap Icons?
- Or continue with the next category in our FA5 series?
Just raise your hand — teacher is ready! 🛠️📊⚙️🚀
