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