Use FontAwesome with React.js

Learn how to quickly set up FontAwesome icons in your React project. Follow these simple steps to install the necessary packages and add icons to your components. Enhance your app with professional icons effortlessly!

iconsweb dev
Strahinja•July 27, 2024

First make a react project and install these 4 packages

//install this core package first
npm i --save @fortawesome/fontawesome-svg-core

//install first if you want to use solid icons and
//install second if you want to use regular icons
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

//install this react component to use fontawesome
npm i --save @fortawesome/react-fontawesome@latest

Now go to here and pick any icon you like.

And you can use it inside your project!

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

function Component() {
	return (
		<div>
			<FontAwesomeIcon icon={faHippo} />
		</div>
	);
}