How to add icons in React.js

 Icons are essential elements in modern web development, adding visual cues and enhancing user experience. In React.js, integrating icons can be achieved seamlessly with the help of libraries like Font Awesome and Material-UI icons. In this tutorial, we'll explore both methods to add icons to your React.js applications.

Using Font Awesome Icons:

Font Awesome is a popular icon library widely used for its extensive collection of icons and ease of integration. Follow these steps to add Font Awesome icons to your React.js project:

1. Install Font Awesome:

   Run the following npm commands to install Font Awesome and its dependencies:

npm install --save @fortawesome/fontawesome-svg-core 
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

2. Import and Use Icons:

Import the desired icons from Font Awesome and use them in your React components. Here's an example:

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    import { faCoffee } from '@fortawesome/free-solid-svg-icons';

    const MyComponent = () => {
        return (
             <div>
                 <FontAwesomeIcon icon={faCoffee} />
             </div>
        );
    }

    export default MyComponent;

Replace `faCoffee` with the icon you want to use. You can find the complete list of available icons on the Font Awesome website.

Using Material-UI Icons:

Material-UI is a popular React component library that includes a wide range of icons following Google's Material Design guidelines. Here's how to integrate Material-UI icons into your React.js project:

1. Install Material-UI Icons:

   Install Material-UI icons using the following npm command:

npm install @mui/icons-material

2. Import and Use Icons:

Import the desired icons from Material-UI and use them in your React components. Here's an example:

import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

    const MyComponent = () => {
        return (
             <div>
                 <AccessAlarmIcon />
             </div>
        );
    }

    export default MyComponent;

Replace `AccessAlarmIcon` with the icon you want to use. You can explore the full list of Material-UI icons on the Material-UI website.

By following these steps, you can easily add icons to your React.js applications using either Font Awesome or Material-UI icons. Choose the method that best suits your project requirements and design preferences, and enhance your user interfaces with visually appealing icons.

There are many options available other than above for icons for your React app. Some of the popular icon libraries are:

React Feather:

React Feather is a collection of minimalist open source icons for React, based on the Feather Icons library. This icon set emphasizes simplicity, consistency and readability.

React Icons:

It provides a large variety of icons.

Heroicons:

Heroicons was created by the same makers of Tailwind, a popular CSS framework. This library offers a small – but beautiful – collection of SVG icons.

And many more options.

Happy coding!