Bootstrap 5 icons vs Font Awesome: comparison based on design, variety and usability

Nowadays icons have become an almost indispensable part of user interfaces for websites. Icons are mostly used to complement other components and texts to offer a more suggestive visual experience to visitors.

The de facto leader of open source icons is Font Awesome. The initial release dates back to the 21th of August 2012 having roughly a 38% market share among websites using third-party font scripts right below Google Fonts.

Font Awesome vs Bootstrap Icons

It was created by Dave Gandy to be used with Twitter Bootstrap but in recent years they took it to the next level and also created a Pro version for those who want to upgrade.

If you used Bootstrap 3 you remember the awesome Glyphicons that came with the framework. Unfortunately with the release of Bootstrap 4 icons were no longer included by default in Bootstrap, rather the documentation recommends other icon libraries such as Font Awesome, Iconic, Octicons and so on.

With the upcoming release of Bootstrap 5 we know for sure that there will be custom Bootstrap Icons included in the framework. Last year we found out about the release of a custom Bootstrap Icon library on the official blog.

I have personally used Font Awesome for the past couple years but with the release of Bootstrap icons I am inclined to test it out on a few new websites. In this article I want to compare the two icon libraries and also show you how you can get started using them.

Font Awesome Icons

Font Awesome currently has 1,588 free icons and an additional 7,842 pro icons if you opt for the paid version. The design of the icons are of very high quality and they are SVG powered meaning any size you give the icons it will still look perfect.

There are very few occasions when I couldn’t find a good icon from the large pool that Font Awesome offers by default. At Themesberg we make use of the pro icons and I must say it is worth every dollar if you want to take your design to the next level.

Their website is also really well done when searching for certain icons and letting you know which classes and markup you have to use to make it appear.

It is also a good sign that they seem to be very up to date with updating their base set of icons. For example, they launched a set of icons for COVID-19 awareness.

How to use Font Awesome icons in Bootstrap

Getting started with Font Awesome is quite easy and can also be included in a lot of ways, such as using CDN, NPM, Yarn or by just downloading the source files.

Using CDN

You can get a free CDN link and configure which icons you want the use for your website. I believe this to be the best way of using Font Awesome because you can choose to include only the icons that you are actually using, reducing the amount of data that is being loaded altogether.

Via NPM

If you have your project dependencies managed by NPM then you might want to include Font Awesome using:

npm install --save @fortawesome/fontawesome-free

Via Download

If you don’t want to use the above methods you can also just download the source files directly. After you have downloaded the files all you need to do is include the `all.min.css` file which includes all the webfont classes like this:


<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

Bootstrap icons

Bootstrap icons has an initial set of over 200 icons and it is open sourced under the MIT license. The icons have been developed in Figma and exported as SVG’s and later integrated as webfonts. I must say that the look and feel of these icons are more premium compared to Font Awesome. I expect the number of icons to increase in time.

What I like is that you can also take the SVG code directly from their website not having to include the whole project. I’ve seen many high quality projects using inline SVG for icons.

Of course you can also include them as images or create classes that append the icons as pseudo elements very much similar to how Font Awesome icons are generally used.

How to use Bootstrap icons

Getting started with Bootstrap icons is different compared to Font Awesome because it does not offer by default a set of classes that you can use but rather offers you the SVG’s directly. Of course if you want to you can create your own classes using pseudo elements.

Embedded SVG

Many high quality websites use inline SVG because it is fast, simple and it does its job. On the Bootstrap Icons website just click on one of the icons and then you can easily copy and paste the SVG source. Afterwards you can change the size and color of the icon to your liking. Here’s an example:


<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

External image

If you want your HTML markup to be cleaner you can also include the SVG as an external image like this:


<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

CSS

This method is similar to how you can use Font Awesome icons by default. Create a class in CSS and attribute the background-image to the source of the SVG like this:


.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Then you can use the .bi class on a <i> or <span> element within your markup to show the icon.

The Bootstrap themes that we develop currently use Font Awesome icons, but we might soon start using Bootstrap icons as well as an alternative.

In conclusion I believe that both projects are awesome and have a high quality set of icons that you can use for your websites. Currently Font Awesome has roughly 8 times more icons than Bootstrap icons, although I recommend playing around and trying out the new set of icons from Bootstrap for your new project.