How to add icons in React

In this article, we will show you how to add icons in React using react-icons.

React-icons is a library that provides a wide range of popular icon libraries (such as Font Awesome, Material-UI, and Octicons) in a single package, allowing developers to easily add icons to their React projects. The icons are rendered as React components, which can be easily styled and customized using CSS. Additionally, the library provides a way to import individual icons instead of the whole library, which can help to reduce the size of the final bundle.

Demo Application

Output - How to add icons in React - Clue Mediator

How to add icons in React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• react-icons-example

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

Run the following command to install react-icons npm package.

npm i react-icons

You will find the version of the following packages in React application.

react

^18.2.0

react-icons

^4.7.1

3. Implementation

Refer to the following files for implementation.

App.js

import React from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsFillHandThumbsUpFill, BsHeart } from 'react-icons/bs';
import { TiCamera } from 'react-icons/ti';
import { SlHeart } from 'react-icons/sl';

function App() {
  // style for icons
  const fontStyle = {
    fontSize: 30,
    color: '#ff3063'
  }

  return (
    <div class="App">
      <h4>How to add icons in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>
      <div class="icons">
        <faheart style={fontStyle}>
        <faregheart style={fontStyle}>
        <bsfillhandthumbsupfill style={fontStyle}>
        <bsheart style={fontStyle}>
        <ticamera style="{fontStyle}/">
        <slheart style={fontStyle}>
      </slheart></ticamera></bsheart></bsfillhandthumbsupfill></faregheart></faheart></div>
    </div>
  );
}

export default App;

index.css

body {
  margin: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.icons {
  width: 320px;
  display: flex;
  justify-content: space-between;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

4. Output

Run your application and check the output in the browser.
Live Demo

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project