Bootstrap Icons vs Font Awesome: Icon Mapping & Comparison
Font Awesome to Bootstrap Icons mapping table: 53 common fa-solid classes and their bi equivalents, plus licenses, CSS classes and SVG workflow compared.
On this page
Both Bootstrap Icons and Font Awesome support a CSS class–based icon workflow. Bootstrap Icons does it cleaner, fully free, and with no external dependencies.
Background
Bootstrap Icons was launched in Bootstrap 5 (2021) as a standalone SVG icon set, no Bootstrap CSS required. All 2,000+ icons are MIT licensed with no Pro tier, no CDN account, and no attribution requirement.
Font Awesome started in 2012 and introduced the <i class="fa fa-icon"> pattern to millions of developers. Font Awesome Free offers ~2,000 icons under CC BY 4.0 (icons) / MIT (code). Additional weights (Thin, Light, Sharp, Duotone) require a paid Pro account.
Common icons compared
CSS class workflow
Both libraries support the classic CSS class pattern:
<!-- Bootstrap Icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<i class="bi bi-house"></i>
<i class="bi bi-search fs-4 text-primary"></i>
<!-- Font Awesome Free -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x/css/all.min.css"
/>
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass fa-lg text-primary"></i>Bootstrap Icons uses BS utility classes (fs-4, text-primary) naturally since it’s from the same ecosystem. Font Awesome uses its own sizing system (fa-lg, fa-2x).
Font Awesome to Bootstrap Icons mapping
Migrating from Font Awesome? Swap the class names below. Names differ more than you’d expect (fa-magnifying-glass is bi-search, fa-xmark is bi-x-lg), and Bootstrap Icons marks filled variants with a -fill suffix where Font Awesome uses the Solid style.
| Font Awesome 6 (Solid) | Bootstrap Icons |
|---|---|
fa-solid fa-house |
bi bi-house |
fa-solid fa-user |
bi bi-person |
fa-solid fa-users |
bi bi-people |
fa-solid fa-magnifying-glass |
bi bi-search |
fa-solid fa-gear |
bi bi-gear |
fa-solid fa-bell |
bi bi-bell |
fa-solid fa-trash |
bi bi-trash |
fa-solid fa-trash-can |
bi bi-trash3 |
fa-solid fa-pen |
bi bi-pencil |
fa-solid fa-pen-to-square |
bi bi-pencil-square |
fa-solid fa-xmark |
bi bi-x-lg |
fa-solid fa-check |
bi bi-check-lg |
fa-solid fa-plus |
bi bi-plus-lg |
fa-solid fa-minus |
bi bi-dash-lg |
fa-solid fa-bars |
bi bi-list |
fa-solid fa-ellipsis-vertical |
bi bi-three-dots-vertical |
fa-solid fa-envelope |
bi bi-envelope |
fa-solid fa-phone |
bi bi-telephone |
fa-solid fa-comment |
bi bi-chat |
fa-solid fa-heart |
bi bi-heart-fill |
fa-solid fa-star |
bi bi-star-fill |
fa-solid fa-cart-shopping |
bi bi-cart |
fa-solid fa-download |
bi bi-download |
fa-solid fa-upload |
bi bi-upload |
fa-solid fa-arrow-right |
bi bi-arrow-right |
fa-solid fa-arrow-left |
bi bi-arrow-left |
fa-solid fa-chevron-down |
bi bi-chevron-down |
fa-solid fa-chevron-right |
bi bi-chevron-right |
fa-solid fa-rotate-right |
bi bi-arrow-clockwise |
fa-solid fa-circle-info |
bi bi-info-circle-fill |
fa-solid fa-circle-exclamation |
bi bi-exclamation-circle-fill |
fa-solid fa-triangle-exclamation |
bi bi-exclamation-triangle-fill |
fa-solid fa-circle-check |
bi bi-check-circle-fill |
fa-solid fa-lock |
bi bi-lock-fill |
fa-solid fa-eye |
bi bi-eye-fill |
fa-solid fa-eye-slash |
bi bi-eye-slash-fill |
fa-solid fa-calendar |
bi bi-calendar |
fa-solid fa-clock |
bi bi-clock |
fa-solid fa-share-nodes |
bi bi-share |
fa-solid fa-filter |
bi bi-funnel |
fa-solid fa-sliders |
bi bi-sliders |
fa-solid fa-copy |
bi bi-copy |
fa-solid fa-link |
bi bi-link-45deg |
fa-solid fa-image |
bi bi-image |
fa-solid fa-file |
bi bi-file-earmark |
fa-solid fa-folder |
bi bi-folder |
fa-solid fa-floppy-disk |
bi bi-floppy |
fa-solid fa-print |
bi bi-printer |
fa-solid fa-right-from-bracket |
bi bi-box-arrow-right |
fa-solid fa-location-dot |
bi bi-geo-alt-fill |
fa-solid fa-globe |
bi bi-globe |
fa-solid fa-sun |
bi bi-sun |
fa-solid fa-moon |
bi bi-moon |
For an icon not listed here, search the Bootstrap Icons pack by keyword: most Font Awesome names have a close match under a different word.
Inline SVG approach
For performance-critical pages, inline SVG avoids the font file request entirely. Both libraries provide raw SVG files you can paste or import.
// Bootstrap Icons inline SVG (React)
import { House } from "react-bootstrap-icons";
<House size={20} color="currentColor" />;
// Font Awesome React
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHouse } from "@fortawesome/free-solid-svg-icons";
<FontAwesomeIcon icon={faHouse} />;License comparison
| Bootstrap Icons | Font Awesome Free | |
|---|---|---|
| Icon license | MIT | CC BY 4.0 |
| Code license | MIT | MIT |
| Attribution required | No | Technically yes (CC BY) |
| Pro tier | No | Yes (Thin, Light, Duotone) |
| CDN key required | No | No (free CDN) |
CC BY 4.0 technically requires attribution for fonts and images. In practice, most Font Awesome users skip this, but for commercial products, MIT is legally cleaner.
Do you need Bootstrap CSS to use Bootstrap Icons?
No. Bootstrap Icons are completely standalone. The icon font and SVG files work in any project (React, Vue, plain HTML, or anything else), without any Bootstrap CSS dependency.
When to choose each
| Use case | Pick |
|---|---|
| Already using Bootstrap CSS | Bootstrap Icons |
| Need clean MIT license (no attribution) | Bootstrap Icons |
| Migrating existing Font Awesome codebase | Font Awesome |
| Need Light/Thin weight (free) | Bootstrap Icons (or Lucide) |
| WordPress or CMS with FA integration | Font Awesome |
| New project, clean slate | Bootstrap Icons |
Frequently asked questions
Do I need Bootstrap CSS to use Bootstrap Icons?
Is Bootstrap Icons completely free?
Which icon library is easier to migrate to from Font Awesome?
How does Font Awesome Pro compare to Bootstrap Icons?
Related posts