December 28, 2023 UI/UX Design, Web Development

Designing and Developing with Icons? Check Out Bootstrap Icons

Font Awesome has been a staple for designers and developers to add icons to their websites for over a decade. According to a survey from Wappalyzer in 2023, Font Awesome is used on approximately 25% of all websites that utilize third-party font libraries. Bootstrap Icons sits in 6th place, with only 0.5% usage.

What Makes Font Awesome Great?

Easy to use

Adding Font Awesome to a website only takes a few minutes, and you have a massive collection of icons. When designing and developing with structured content in mind, allowing end-users to pick potentially hundreds of icons with no additional design or development time is enormous.


Font Awesome has continued expanding its icon pack library and now has more than 2,000 free. It’s impressive, and you can find an icon for just about anything you are trying to convey with an icon. That is until you get hyper-specific in your use case. Still, Font Awesome has 12 icons related to airplanes. 

Multiple Style Options

A big selling point for Font Awesome is its paid features, which include multiple style options. With five style options (three of which require the pro plan), you can use these style variations to better align with your brand or stand out from the standard free icon pack users.

Do note that with Font Awesome, you can exclude specific font styles from your website that you want to omit. This is a great way to help reduce overall load size and improve website performance. No plans to use duotone? Remove it.

Where Does Bootstrap Icons Fit In?

Bootstrap Icons has plenty of icons when compared to Font Awesome. With 2,000+ icons, you can find an icon for just about anything.

Like Font Awesome, Bootstrap Icons also supports a single line of code to add the library to your website. With a similar naming convention, it’s familiar and easy to integrate Bootstrap Icons into your website.

Designers Will Love It

Bootstrap Icons provides a Figma file that you can hand over to your designers to pull from easily. The Figma file is well organized. You can get the link to the Figma file from the Bootstrap Icons webpage

Ditch the Font Library for SVGs (Where You Can)

If you are developing specific elements or components where icons are unlikely to change, you can use the SVG code instead of relying on the Bootstrap Icons library. 

Example Usage:

Bootstrap Icons

Example of bootstrap icon usage as SVG or html element

Font Awesome

Example of bootstrap icon usage as SVG or html element

When & Where to Use

In a lot of instances, I still lean towards Font Awesome. It’s been ingrained in my brain to use; it’s fast, reliable, and offers a massive collection of icons. Font Awesome icons can have a distinct and easily identifiable appearance. Using Bootstrap Icons in your next project might give your website some uniqueness to it.

When we build websites for clients, we often implement some form of structured content and allow the end-user to pick and choose the icon for the content they are creating. Offering either the Font Awesome or Bootstrap Icons pack is viable with this strategy.

If we’re building an application that has less flexibility or variability in the icon usage, I’d instead lean towards utilizing SVGs and ditch the font library altogether. This reduces the total number of files we need to request, improves load performance, and can reduce exposure to outages.

Bootstrap Icons works well in this case, but Font Awesome can be used similarly.

Overall, both icon packs can be used to meet your design and development needs.