How to use Icons in React (Font Awesome,Material Design)

How to use Icons in React (Font Awesome,Material Design)

In this tutorial, we are going to learn about how to use a different type of icons in react apps.

Installing react-icons

First we need to install the react-icons package which provides us different type of icons(fontawesome,Material design,Ionicons,devicons) as a react components.

npm install react-icons --save

Using FontAwesome Icons

App.js
import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";
function App() {
 return (
 <div className="App">
 <p>
 Accessible icon <FaAccessibleIcon /> </p>
 </div>
 );
}

export default App;

In the above code, we first imported FaAcessibleIcon from the react-icons/fa package and used it as a component.

Changing icon sizes

We can change our icon size by adding a size prop to Icon component.

App.js
import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";
function App() {
 return (
 <div className="App">
 <p>
 Accessible icon <FaAccessibleIcon size="50px" /> </p>
 </div>
 );
}

export default App;

changing-icon size

Changing Icon colors

We can also change icon color by adding a color prop to Icon component.

App.js
import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";
function App() {
 return (
 <div className="App">
 <p>
 Accessible icon <FaAccessibleIcon size="50px" color="red" /> </p>
 </div>
 );
}

export default App;

changing-color

Using Material Design icons

Similarly we can import Material Design icons by changing the package path to react-icons/md.

App.js
import React from "react";
import ReactDOM from "react-dom";
import { MdDns } from "react-icons/md";
function App() {
 return (
 <div className="App">
 <p>
 Dns Icon <MdDns size="30px" color="green" /> </p>
 </div>
 );
}

export default App;

You can check all available icon names in react-icons website.