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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course