Font Awesome to Bootstrap Icons Mapping: 53 Class Names

Moving from Font Awesome to Bootstrap Icons is mostly a class name swap: fa-solid fa-magnifying-glass becomes bi bi-search, fa-solid fa-xmark becomes bi bi-x-lg. The mapping table below lists 53 common icons. Every name in it was checked against the current Bootstrap Icons, Font Awesome 6 and Font Awesome 7 icon sets.

Library

Bootstrap Icons

Font Awesome Solid

Samples

Icons

2,078

2,000

License

MIT

CC-BY-4.0

Author

The Bootstrap Authors

Dave Gandy

Category

UI 16px / 32px

UI Other / Mixed Grid

Multicolor

No

No

Browse Bootstrap Icons →Browse Font Awesome Solid →

Font Awesome to Bootstrap Icons mapping

Names differ more than you would expect, and Bootstrap Icons marks filled variants with a -fill suffix where Font Awesome uses the Solid style.

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 (fa-gear is bi-gear, but fa-bars is bi-list).

Side by side

HousePersonSearchBellGearTrashHouseUserMagnifying GlassBellGearTrash

Bootstrap Icons are drawn on a 16x16 grid with thinner outlines. Font Awesome Solid is heavier and filled. Mixing the two in one toolbar looks uneven, so migrate a whole screen at a time.

Background

Bootstrap Icons is the icon set from the Bootstrap team. Its npm package was first published in November 2019 (npm registry), and it is a standalone set: it does not need Bootstrap CSS. The current release is 1.13.2.

Font Awesome introduced the <i class="fa ..."> pattern that most icon fonts copied. The current major version is 7 (@fortawesome/fontawesome-free 7.3.1 on npm). The free download has Solid, a smaller Regular set and Brands. Extra styles such as Light, Thin, Duotone and Sharp are in the paid Pro plan.

CDN and class workflow

Both work as an icon font with one stylesheet. Pin the version so a new release cannot change your icons:

<!-- Bootstrap Icons -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.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://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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 size with font-size, so Bootstrap utilities like fs-4 and text-primary work on them. Font Awesome has its own sizing classes (fa-lg, fa-2x).

Using Font Awesome in a Bootstrap project

You can. Bootstrap 4 and 5 ship no icons, so any icon font works next to them. Bootstrap 3 bundled Glyphicons, and many Bootstrap 3 themes added Font Awesome on top. If you start a new Bootstrap 5 project, Bootstrap Icons is the closer fit: same team, same utility classes, MIT license.

React and inline SVG

// Bootstrap Icons: community package react-bootstrap-icons
import { House } from "react-bootstrap-icons";
<House size={20} />;

// Font Awesome: official packages
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHouse } from "@fortawesome/free-solid-svg-icons";
<FontAwesomeIcon icon={faHouse} />;

react-bootstrap-icons is maintained by a community developer, not the Bootstrap team. Font Awesome’s React packages are official.

License comparison

Font Awesome’s license file says attribution is required, and that “Downloaded Font Awesome Free files already contain embedded comments with sufficient attribution, so you shouldn’t need to do anything additional when using these files normally.” Do not strip those comments. Bootstrap Icons uses the MIT license for the whole repository, font files included.

Which to pick

If neither fits, our Font Awesome alternatives roundup covers other open-source sets.

Frequently asked questions