How to integrate great looking brand icons into a React application with Font Awesome Icons

I recently built a new website for my band, called “Eminence Ensemble”, as the final project for my Software Engineering program at Flatiron School. An important feature of any band's website is the ability to link your site to all the Social Media and streaming services associated with the band, and I decided to build all of these links using the associated brand’s icons using the Font Awesome brand icons package. This is what my final product looks like:

For those of you who are unfamiliar, Font Awesome offers a HUGE library of great-looking icons, for basically anything you could ever need. Here is a sample of just a few of the thousands they offer:

Font Awesome makes it super easy to integrate their library into a React project. Assuming you have already created a react app (click here to learn how!), you can easily install Font Awesome as a package using the following commands in your terminal:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/react-fontawesome

Because I am specifically giving a tutorial on how to use their brand icons package, you will also need to run this command to install the library of brand icons, although it is worth noting they offer several other free icons packages as well as many more paid icon packages. For more info on how to install those, click here!

npm install --save @fortawesome/free-brands-svg-icons

Once you have your packages installed, the best way to utilize them is to begin by importing them at the entry point of your application, classically the index.js file.

First, we import the named library component from Font Awesome’s svg-core package and import the fab (Font Awesome Brands) component from the free-brands package. Next, we use call .add to our library and pass in fab, which adds all the brand icons into our library and allows us to globally access them throughout our application. Pretty cool right?

It’s also worth noting, you can easily add individual icons to the library if you'd like. Check out the huge library of icons, and their links here.

import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCheckSquare, faCoffee)

Now, when you are ready to add an icon to your component, you simply import FontAwesomeIcon at the top of your component like so:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

And add the component inside your return statement with the icon as a prop:

<FontAwesomeIcon icon={['fab', 'apple']}/>
<FontAwesomeIcon icon={['fab', 'spotify']}/>

Here we are specifically finding the Apple and Spotify logos from the fab section of the library that we added earlier!

In my case, the logos are all NavLinks which lead to the various streaming platforms. Here is a snippet of how I did that:

One of the awesome features of the Font Awesome icons is that they allow you to style them however you want as if they were text! Very cool! To make my icons really pop, I used the specific brand colors hex code (check out usbrandcolors.com), along with the hover, and scale CSS selectors to make the icons grow and change color on hover:

music css file

And Voila! Beautiful and simple brand icons that link to their corresponding site.

Thanks for reading!

Font Awesome React specific Docs: https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

Full git repository: https://github.com/Zacharyflynn06/ee-frontend