react-icons

Include popular icon packs in your React project with simple ES6 imports.

react-icons

React

Include popular icon packs in your React project with simple ES6 imports.

npm GitHub Docs

Fit

Bundle (gzip)

2.2 kB

7.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Pulling icons from many different sets (Font Awesome, Material, Feather, etc.) usually means managing several dependencies, font files, or SVG sprites, and bundling far more icons than you actually render.

What It Does

react-icons bundles dozens of icon packs behind a single dependency and exposes each icon as a tree-shakeable React component, so you import only the icons you use and style them like any other element.

Installation

bash

npm install react-icons

Usage Example

jsx

import { FaGithub } from "react-icons/fa";
import { MdSettings } from "react-icons/md";

export default function Toolbar() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <FaGithub size={24} />
      <MdSettings size={24} color="#2563eb" />
    </div>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.