81

I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

When I try to use it in my code like this:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

I am getting this error on the console:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.

7 Answers 7

89

You need to add any icons you wish to use, to a "library" for easy reference.

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

Check out working code here: https://codesandbox.io/s/8y251kv448

Also, read this: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

4
  • 1
    just adding import @fortawesome/fontawesome-free-solid statement helped, but there is no import in react-fontawesome demo Commented Jan 4, 2018 at 8:26
  • In the meanwhile the fortawesome/fontawesome npm package is deprecated. Would be helpful to adjust the code above.
    – jengeb
    Commented Oct 24, 2018 at 14:52
  • My mistake! I was writing in camel case in value to icon as well i.e. faCheckSquare
    – Adil
    Commented Mar 30, 2019 at 20:41
  • My mistake was an unnecessary import {faSync} from ... @fortawesome... despite using the FontAwesome icon="sync" /> tag
    – Vikram K
    Commented Apr 26, 2019 at 8:28
51

Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.

I had

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

and

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

when, in fact, the actual icon name is just "user", not "faUser":

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}
4
  • What's interesting is I called <FontAwesomeIcon icon="circle" /> and added fontawesome.library.add(faCoffee) (after import { faCoffee } from '...') and it worked, I got the circle icon. But if I didn't add anything to the library, nothing would work.
    – Belladonna
    Commented Jun 15, 2018 at 21:04
  • like sorry, but what the pardon "heck" is the company doing? not in any of their docs I have read about that you have to call library add, to make the icon available... it's a simple task of adding icons and somehow they managed to do it so highly complicated. Sorry to write it beneath your solution but I am just baffled... Thank you for this solution.
    – tikej
    Commented Oct 10, 2021 at 21:53
  • @tikej, I am puzzled by the same. Like who on earth within the company wrote the library in such a way? The pattern and unnecessary lines of code we add to just get an Icon are weirdly out of this world. Commented Jan 7, 2022 at 9:44
  • Apparently, this seems to work: javascript import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome } from "@fortawesome/free-solid-svg-icons"; <FontAwesomeIcon icon={faHome} /> Commented Jan 7, 2022 at 9:50
37

You can use FontAwesome icons without library like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} />

I've installed all the necessary packages as react-fontawesome says:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
1
  • 1
    This is the only permutation that worked for me. Commented Jan 18, 2023 at 11:19
11

And if you find yourself not seeing your icon when trying to display faTrashAlt (or similarly named icon), not only do you have to remove the 'fa' when actually using your icon but also you have to convert the icon name from cameCase to "lisp-case".

So, after loading the alternative trash can icon this way:

fontawesome.library.add(faTrashAlt);

It's then used that way:

<FontAwesomeIcon icon="trash-alt" />

Just so you don't waste 20 precious minutes of your time.

0
9

Just because there is more than one way to get a fontawesome icon into a website, I'll give an example with react and fontawesome and explicit import. Explicit import is frugal. Only the exact icon from the fontawesome icon set is imported and the FontAwesomeIcon component icon attribute is set to the imported object instead of the name.

Example:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faHistory } from '@fortawesome/pro-regular-svg-icons';

function exampleReactComponent() {
   return (
     <div>
       <p><FontAwesomeIcon icon={faCoffee}/></p>
       <p><FontAwesomeIcon icon={faHistory}/></p>
     </div>
   );
}

I don't disagree with setting the icon attribute of the FontAwesomeIcon by name it's just that I encountered console errors about finding icons by name and the resolution I discovered is to reference the object. Note the icon={} notation because it is different than using a quoted string of the icon name.

Explicit Import... react-fontawesome npm package github link

Installing with npm... installing fontawesome with npm link

8

To pass the icon path using an array like this

icon={['fa', 'coffee']}

You'll need to import all references of the library in a file and import this file in the index of your React app.

Example, create the file named fonts.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);
library.add(fas);
library.add(far);
library.add(fal);
library.add(fad);

Now in the index.js of your app import the file that was created,

import '../configs/fonts.js'

This path is just an example, be sure that you are putting the right one.

7

For the free version of FontAwesome ;) @fortawesome

Install FontAwesome

npm install --save @fortawesome/react-fontawesome
npm install --save @fortawesome/fontawesome-free
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-brands-svg-icons

Use it

...
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import '@fortawesome/fontawesome-free'
import {library} from '@fortawesome/fontawesome-svg-core'
import {far} from '@fortawesome/free-regular-svg-icons'
import {fas} from '@fortawesome/free-solid-svg-icons'
import {fab} from '@fortawesome/free-brands-svg-icons'
library.add(far,fas,fab);


...

<span className='fa fa-coffee'/>
<FontAwesomeIcon icon='coffee' />
<FontAwesomeIcon icon={['fas', 'coffee']}/>
<FontAwesomeIcon icon={['fab','react']}/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.