Get Thousands of Icons for React Project for Free with React Icons

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

• React Icons
• Source code