React Icons

About React Icons

React Icons is a library that bundles popular icon sets into React components for use in web projects. It aggregates icons from sources including Ant Design Icons, Bootstrap Icons, BoxIcons, Circum Icons, css.gg, Devicons, Feather, Flat Color Icons, Font Awesome 5 and 6, Game Icons, Github Octicons, Grommet-Icons, Heroicons, IcoMoon Free, Icons8 Line Awesome, Ionicons, Lucide, Material Design icons, Phosphor Icons, Radix Icons, Remix Icon, Simple Icons, Simple Line Icons, Tabler Icons, Themify Icons, Typicons, VS Code Icons, and Weather Icons, totaling thousands of individual icons across these sets.

The library uses ES6 imports so that only the specific icons used in a project are included in the build. It is installed via npm as react-icons for standard modern projects, and icons are used by importing individual components, such as FaBeer from react-icons/fa, and rendering them as JSX elements.

An alternative package, @react-icons/all-files, is provided for projects using build tools such as MeteorJS or Gatsby, where it offers a different installation and import structure. This alternative trades off a longer install time. The project is intended for React developers who need access to a range of icon sets without managing multiple separate icon libraries.

Key features

• Uses ES6 imports so only the icons actually used are included in the bundle
• Simple installation via npm install react-icons
• Alternative @react-icons/all-files package for per-icon imports, suited to MeteorJS, Gatsby, etc.
• Icons imported and used directly as React components (e.g. import { FaBeer } from 'react-icons/fa')

Frequently asked questions