The react-icons package provides many icons such as Devicons, Font Awesome, Bootstrap, Weather, Material Design, Typicons and more. Let’s see how to use it:

Table of Contents

1. Install react-icons
2. Font Awesome Icons
3. Devicons
4. Weather Icons

Install react-icons

Navigate to your project directory and run this command:

npm install react-icons --save

Font Awesome Icons

You’re able to see & copy font awesome icon from react-icons doc. Here’s an example:

import React from 'react';

import { FaApple } from "react-icons/fa";
import { FaWindows } from "react-icons/fa";

function App() {
  return (
    <div className="App">
      Apple Icon: <FaApple/> <br/>
      Windows Icon: <FaWindows/>
    </div>
  );
}

export default App;

We can set size and color like:

<FaApple size="80px" color="green"/>

Devicons

To use Devicons, we need to import the icons from react-icons/di. Other things are similar to Font Awesome.

import React from 'react';

import { DiReact } from "react-icons/di";
import { DiAndroid } from "react-icons/di";

function App() {
  return (
    <div className="App">
      React Icon: <DiReact/> <br/>
      Android Icon: <DiAndroid/>
    </div>
  );
}

export default App;

We’re able to set size and color too.

Weather Icons

Weather Icons need to be imported from react-icons/wi.

import React from 'react';

import { WiDayFog } from "react-icons/wi";
import { WiNightHail } from "react-icons/wi";

function App() {
  return (
    <div className="App">
      Day Fog Icon: <WiDayFog/> <br/>
      Night Hail Icon: <WiNightHail/>
    </div>
  );
}

export default App;

That’s it. You’ll find more icons in react-icons doc. Thanks for reading.