by Sai gowtham

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.