🔗 Bootstrap 5 – Icons & Icon Links: Add Scalable Vector Icons to Any UI
🧲 Introduction – How Bootstrap 5 Handles Icons
Unlike earlier versions, Bootstrap 5 no longer includes built-in icon fonts. Instead, it officially recommends using Bootstrap Icons, a separate SVG-based icon set. These icons are easy to use, scalable, accessible, and customizable via CSS utilities.
🎯 In this guide, you’ll learn:
- How to include Bootstrap Icons in your project
- Embed icons with links, buttons, and headings
- Style icons using color, size, spacing utilities
- Alternatives: Font Awesome, Feather Icons, etc.
🚀 Step 1 – Include Bootstrap Icons
✅ CDN Method (Fastest Way)
Add this inside your <head> tag:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
🔍 Result:
- You now have access to over 1,300+ icons via
<i class="bi bi-..."></i>syntax
✅ Example 1 – Simple Icon Usage
<i class="bi bi-alarm"></i>
<i class="bi bi-battery-full"></i>
<i class="bi bi-check-circle text-success"></i>
🔍 Explanation:
biis the base icon classbi-alarm,bi-battery-full, etc. specify the icon name- Use utility classes like
text-*for styling
✅ Example 2 – Icons with Text or Links
<a href="#" class="text-decoration-none">
<i class="bi bi-house-door me-1"></i>Home
</a>
<button class="btn btn-primary">
<i class="bi bi-download me-1"></i>Download
</button>
🔍 Explanation:
.me-1adds right margin between the icon and text- Icons work well inline with links, buttons, and labels
✅ Example 3 – Icon Sizes
<i class="bi bi-search" style="font-size: 2rem;"></i>
<i class="bi bi-gear" style="font-size: 3rem;"></i>
🔍 Tip:
- Use inline
styleor custom classes to adjust icon size - Bootstrap Icons are scalable SVG fonts
✅ Example 4 – Icon Buttons with Tooltips
<button class="btn btn-outline-secondary" data-bs-toggle="tooltip" title="Settings">
<i class="bi bi-gear"></i>
</button>
🔍 Output:
- A button with a gear icon and hover tooltip
🧩 Bootstrap Icons Categories
Some useful icon groups include:
| Category | Examples |
|---|---|
| Actions | bi-download, bi-upload, bi-share |
| Alerts | bi-exclamation, bi-bell, bi-flag |
| Media | bi-play, bi-pause, bi-volume-up |
| Navigation | bi-house, bi-arrow-left, bi-grid |
| UI Elements | bi-gear, bi-search, bi-pencil |
| Status | bi-check, bi-x, bi-question-circle |
Explore full icons: Bootstrap Icons Library
🔄 Alternative Icon Libraries (Optional)
If you prefer other styles or need more icons:
| Library | Include Method |
|---|---|
| Font Awesome | CDN: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| Feather Icons | SVGs via JS or manual copy |
| HeroIcons | Ideal for Tailwind, but usable in Bootstrap via SVG |
🛠️ Best Practices for Using Icons in Bootstrap
| Tip | Why It Helps |
|---|---|
Use .me-*, .ms-* for spacing | Keeps icons clean and readable with text |
Always use aria-hidden="true" | Improves accessibility for decorative icons |
Use <span role="img"> for semantic icons | Helps screen readers interpret correctly |
Match icon color with .text-* | Maintains theme consistency |
| Avoid overusing icons | Only use icons that enhance UX, not clutter |
📌 Summary – Bootstrap Icons for Clean & Functional UIs
Bootstrap Icons make it easy to add lightweight, scalable, and theme-friendly icons into any Bootstrap 5 project. Whether embedded in text, buttons, or standalone, icons improve usability and UI clarity.
🔍 Key Takeaways:
- Use
<i class="bi bi-icon-name">syntax after adding the CDN - Add icons to links, buttons, forms, headers, and tooltips
- Adjust size with CSS and spacing with Bootstrap utilities
- Use icons purposefully and accessibly
⚙️ Ideal for dashboards, navigation bars, call-to-actions, and admin UIs.
❓ FAQs – Bootstrap 5 Icons & Icon Links
❓ Are Bootstrap Icons included in Bootstrap 5 by default?
❌ No. You must add the separate CDN or install them manually.
❓ How do I resize a Bootstrap icon?
✅ Use style="font-size: Xrem" or custom CSS classes.
❓ Can I use icons inside buttons and links?
✅ Yes! Combine <i> tags with Bootstrap spacing utilities like .me-1, .ms-2.
❓ Are Bootstrap Icons accessible?
✅ You should add aria-hidden="true" for decorative icons and use <span role="img"> if the icon conveys meaning.
❓ What are some alternatives to Bootstrap Icons?
✅ Font Awesome, Feather Icons, HeroIcons, and Material Icons are all great options.
Share Now :
