Question 180700 in Html Question posted in
Some basic documentation can be found here.

Html – How to add icons in React.js

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

Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search