Source:  Twitter logo

The Font Awesome documentation shows only how to add regular/solid fonts to React. How about social icons?

First I grabbed the packages:

  npm i --save @fortawesome/fontawesome-svg-core \
  npm i --save @fortawesome/free-brands-svg-icons \
  npm i --save @fortawesome/react-fontawesome

Note: I replaced npm i --save @fortawesome/free-solid-svg-icons \ with npm i --save @fortawesome/free-brands-svg-icons \

Then in React:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons' 


And tried using a component:

<FontAwesomeIcon icon="fa-facebook-f" />

even tried:

and keep getting in the console

Could not find icon {prefix: "fas", iconName: "fa-facebook-f"}

I believe I somehow have to get the fab prefix for brands.

This is the icon I want to use


<FontAwesomeIcon icon={['fab', 'facebook-f']} />

Note that font awesome now has different icon sets. The solid set (fas) is the default. The facebook icon is in the brands set (fab).

46 users liked answer #0dislike answer #046
David L. Walsh profile pic
David L. Walsh
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"

const icon = <FontAwesomeIcon icon={faFacebook} />

I found the spelling/casing of the brand icons on FontAwesome's GitHub

43 users liked answer #1dislike answer #143
BillFienberg profile pic

Note that you must run the commands that you ran first:

npm i --save @fortawesome/fontawesome-svg-core 
npm i --save @fortawesome/free-brands-svg-icons 
npm i --save @fortawesome/react-fontawesome

I'd tried to import without installing first - and of course that didn't work.

8 users liked answer #2dislike answer #28
HappyHands31 profile pic


npm i --save @fortawesome/fontawesome-svg-core 
npm i --save @fortawesome/free-brands-svg-icons 
npm i --save @fortawesome/react-fontawesome

Then import in your project

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {  faFacebookF , } from '@fortawesome/free-brands-svg-icons';

Use this

<FontAwesomeIcon icon={faFacebookF} />
5 users liked answer #3dislike answer #35
Ali HaMza profile pic
Ali HaMza

Install these dependencies first

npm i --save @fortawesome/free-brands-svg-icons 
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/react-fontawesome

Create a custom library initFontAwesome.js and paste this code.

import { library } from "@fortawesome/fontawesome-svg-core";
import {fab, faTwitterSquare, faFacebook, faLinkedin, faGithub} from "@fortawesome/free-brands-svg-icons";

function initFontAwesome() {
    library.add(fab, faTwitterSquare, faFacebook, faLinkedin, faGithub);
export default initFontAwesome;

In the App.js include the following code

import initFontAwesome from "./initFontAwesome";

function App() {
  return (

   {/*---------Some code----------*/}

export default App;

In Home.jsx include the following code

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

{/*-------some Code---------*/}

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

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

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

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

{/*-------Some Code---------*/}

This worked for me. I hope this helps!

5 users liked answer #4dislike answer #45
Denny profile pic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).