React Icons provides 40,000+ SVG icons from 30+ popular icon packs as React components. It uses ES6 imports, allowing you to include only the icons your project needs.
Choose Your Package Manager npm install react-icons --save
Requirements React Icons requires React 16.3 or higher as a peer dependency.
{ "dependencies" : { "react" : "*" , "react-icons" : "^5.6.0" } }
React Icons version 5.6.0 includes native TypeScript support. No need to install @types/react-icons separately.
Alternative Installation (Meteor, Gatsby) For projects where bundle size optimization is critical, you can use the @react-icons/all-files package, which allows importing individual icon files:
npm install @react-icons/all-files --save
This package has not had a new release recently. See issue #593 for more information. Usage with Individual Files import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ; function Question () { return ( < h3 > Lets go for a < FaBeer /> ? </ h3 > ); }
Verify Installation After installation, verify that React Icons is properly installed:
Import an icon
Try importing an icon from any icon pack: import { FaReact } from "react-icons/fa" ;
Use the icon component
Use it as a regular React component:
Run your project
Start your development server and check that the icon renders correctly.
Next Steps
Quickstart Guide Learn how to use React Icons with complete examples
Icon Packs Explore all available icon packs and libraries