Install React Icons
Add popular icons to your React projects. Include only the icons that your project is using.
7th July 2022
Time to read: 1 min
Install
npm install react-icons --saveExample Usage
import { FaBeer } from "react-icons/fa";
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />?</h3>
}
}View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under react-icons you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';
Icons
| Icon Library | License | Version | Count |
|---|---|---|---|
| Font Awesome | CC BY 4.0 License | 5.15.4 | 1612 |
| Ionicons 4 | MIT | 4.6.3 | 696 |
| Ionicons 5 | MIT | 5.5.0 | 1332 |
| Material Design icons | Apache License Version 2.0 | 4.0.0 | 3650 |
| Typicons | CC BY-SA 3.0 | 2.1.2 | 336 |
| Github Octicons icons | MIT | 8.5.0 | 184 |
| Feather | MIT | 4.28.0 | 286 |
| Game Icons | CC BY 3.0 | 3.0 | 4040 |
| Weather Icons | SIL OFL 1.1 | 2.0.12 | 219 |
| Devicons | MIT | 1.8.0 | 192 |
| Ant Design Icons | MIT | 4.2.1 | 789 |
| Bootstrap Icons | MIT | 1.5.0 | 1846 |
| Remix Icon | Apache License Version 2.0 | 2.5.0 | 2271 |
| Flat Color Icons | MIT | 1.0.2 | 329 |
| Grommet-Icons | Apache License Version 2.0 | 4.6.2 | 615 |
| Heroicons | MIT | 1.0.4 | 460 |
| Simple Icons | CC0 1.0 Universal | 5.16.0 | 2024 |
| IcoMoon Free | CC BY 4.0 | 4.0 | 491 |
| BoxIcons | CC BY 4.0 | 2.0.9 | 757 |
| css.gg | MIT | 2.0.0 | 704 |
| VS Code Icons | CC BY 4.0 | 0.0.23 | 383 |
| Tabler Icons | MIT | 1.68.0 | 1978 |
Why React SVG components instead of fonts?
SVG is supported by all major browsers. With react-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.