EN
React - use Font Awesome icons (script attached in head element)
3 points
In this article, we would like to show you how to use Font Awesome icons in React.
Quick solution
- paste the following line, inside
public/index.html
file, in<head>
element:xxxxxxxxxx
1<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>
- find icon that you want to use: https://fontawesome.com/search (e.g. you can type
TYPO3
), - click to the result matched to your preferences,
- copy icon code and paste into your JSX code, e.g.:
or:
xxxxxxxxxx
1<i className="fab fa-typo3" />
xxxxxxxxxx
1<FontAwesomeIcon icon="fa-brands fa-typo3" />
In this example, we present step by step how to use Font Awesome icons in your React project.

Inside index.html
file, in <head>
element, paste the following line:
xxxxxxxxxx
1
<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>
Example index.html
file:
xxxxxxxxxx
1
2
<html lang="en">
3
<head>
4
<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>
5
</head>
6
<body>
7
<!-- ... -->
8
</body>
9
</html>
Example App.js
file:
xxxxxxxxxx
1
const App = () => {
2
return (
3
<div>
4
Example icon: <i className='fab fa-typo3' />
5
<div/>
6
);
7
};
8
9
export default App;
