Use Font Awesome, Bootstrap, Weather and More Icons in React

Published on July 19, 2020 59 sec read

HIRE US 🖐
We're available to do freelance project. Take a look at our services!

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. 🙂

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *