How to add icons in React.js

Question

The package : material-ui/core has been depracted .What should I do inorder to add the icons in my App.jsx . https://www.npmjs.com/package/@material-ui/core I am running it on the code sand box where we directly to serach for the name and the drop it directyky into the dependencies folder.

To add icons in react APP.jsx

Answer 1

You can use react-icons.

https://react-icons.github.io/react-icons/

npm install react-icons --save

Official sample:

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}
//functional
function Question() {
return <FaBeer />
}

Adjust size:

<FaBeer size={20} />

ps. You can install mui by

npm install @mui/material @emotion/react @emotion/styled

Answer 2

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

1. Font Awesome:
   Font Awesome is a popular icon library, with over 2,000 free and open-source icons. It also offers a pro subscription starting at $79 a year, which gives you access to almost 20,000 icons. These icons can be customized with different sizes and colors.

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

3. Material UI:
   It gives you access to the Material Icons library, which was created by Google in line with the Material Design system.

4. React Icons:
   It provides a large variety of icons.

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