Bootstrap 5 icon buttons combine icons with Bootstrap's button component. This page covers 4 patterns — icon-only, text with icon, social buttons and floating action buttons — each using Bootstrap Icons.
Quick Setup
Icon buttons need Bootstrap 5 CSS and Bootstrap Icons:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.bi | Bootstrap Icon base class |
.bi-pencil | Edit icon |
.bi-trash | Delete icon |
.bi-download | Download icon |
.d-flex.align-items-center.gap-2 | Aligns icon and text |
.rounded-circle | Circular button shape |
aria-label | Accessibility for icon-only buttons |
.position-fixed | Fixed floating button |
1. Bootstrap 5 Icon-Only Buttons
Square and circular icon-only buttons using Bootstrap Icons. Add aria-label for accessibility.
2. Bootstrap 5 Buttons with Text and Icons
Buttons combining text and Bootstrap Icons. Icon on the left, right or both sides.
4. Bootstrap 5 Floating Action Button (FAB)
A fixed floating action button in the bottom-right corner. Common in mobile-first interfaces.
Frequently Asked Questions
Add the Bootstrap Icons CDN to your head: <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css' rel='stylesheet'>. Then add the icon inside the button: <button class='btn btn-primary'><i class='bi bi-download'></i> Download</button>.
Add rounded-circle to the button and set equal width and height with padding:0: <button class='btn btn-primary rounded-circle' style='width:40px;height:40px;padding:0'>. Center the icon with d-flex align-items-center justify-content-center or use line-height.
Create a circular button with position-fixed and bottom/end position classes: <button class='btn rounded-circle position-fixed' style='bottom:24px;right:24px;width:56px;height:56px'>. Add a high z-index if it appears behind other content: style='z-index:1030'.
Add d-flex align-items-center gap-2 to the button: <button class='btn btn-primary d-flex align-items-center gap-2'><i class='bi bi-download'></i> Download</button>. The gap-2 adds spacing between the icon and text. The align-items-center keeps both vertically centered.
Yes. Add Font Awesome CDN and use fa or fas classes: <button class='btn btn-primary'><i class='fas fa-download me-2'></i>Download</button>. Use Bootstrap's me-2 or me-1 for right spacing on left-side icons. Both Bootstrap Icons and Font Awesome work identically with Bootstrap buttons.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.
3. Bootstrap 5 Social Media Buttons
Branded social media buttons with brand colors and Bootstrap Icons.