React Icons is a free source that collect and organize all React icon packages in a simple browsable and searchable directory.

It contains all the popular icon sets that you can include easily in your project by installing and adding react-icons package.

Many of the included icon packages are free and open source. And that means, you can use them freely in your project without worrying about commercial license.

However, some may offer extended packages with more enterprise commercial icons, so you can check their website if you actually need their pro version.

How to install React Icons?

It is a pretty straightforward: 

npm install react-icons --save

If you want to install it on Meteor, or GatsbyJS, then 

npm install @react-icons/all-files --save

How to use it in your React project?

For a normal React project

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

For Meteor, or Gatsbyjs

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

Included icon sets

  1. Ant Design Icons
  2. Bootstrap Icons
  3. BoxIcons
  4. Circum Icons
  5. Devicons
  6. Feather
  7. Flat Color Icons
  8. Font Awesome
  9. Game Icons
  10. Github Octicons icons
  11. Grommet-Icons
  12. Heroicons
  13. Heroicons 2
  14. IcoMoon Free
  15. Ionicons 4
  16. Ionicons 5
  17. Material Design icons
  18. Remix Icon
  19. Simple Icons
  20. Simple Line Icons
  21. Tabler Icons
  22. Themify Icons
  23. Typicons
  24. VS Code Icons
  25. Weather Icons
  26. css.gg

Final thoughts

React Icons is a neat project, that saves react developer a lot of time and effort, by offering a great icon collection to choose from.

However, there are several open-source that are not added yet, but they may find their place in React Icons soon.

Resources