The Best Way to Add Icons in React Application

React-Icons Library

In the React-Icons Library, we can be able to see different icon packages like font awesome, ionicons, typicons, etc.

    1. Go to React icons website. On the site, we can see the different kinds of React libraries on the right-hand side, we can use any of them.react-icons library
    2. To add font awesome icons, we import the given import code to React application and then rendered the element using the icon name. For example, in the below code, we have imported the “FaAngellist” icon and then we render the <FaAngellist/> element in the functional component.
      import React from 'react';
      import  ReactDOM  from 'react-dom';
      import { FaAngellist } from "react-icons/fa"; // import icons
      
      const App = () =>{
        return(
          <div>
             <FaAngellist/>  // rendering imported icons
          </div>
        ) }
      
      ReactDOM.render(
        <App/>,
        document.getElementById('root')
      )

Output:

react-icons library

 

Similarly, we can add icons from any package.

Leave a Reply