Best open-source Icon libraries for React (2022)

Last updated on April 2, 2022 Guest Contributor Loading... Post a comment

This article walks you through a list of the best open-source icon libraries for React in 2022. They are rated and ranked based on the number of stars they receive from GitHub users and the weekly downloads on npmjs. Old and infrequently maintained libraries will not appear in this list. Let’s get to the point without further ado (like talking about what React is or how icons are necessary).

react-icons

This comprehensive library contains many different icon sets such as Ant Design Icons, Font Awesome, Grommet Icons, Ionicons, VS Code Icons, Material Design Icons, etc.

The library supports TypeScript out-of-the-box. You can install it by running:

npm i react-icons

Then you can import the icons you need into your code and use them as normal React components. Example:

import { AiFillAccountBook, AiFillAndroid } from "react-icons/ai";

To see the names of available icons, you can check the official docs or go to one of the library’s definition files:

<your project>/node_modules/react-icons/[icon set folder]/index.d.ts

MUI Icons Material

This library provides Google Material icons available in five styles and based on the core Material Design principles and metrics.

You can install MUI icons by running:

npm install @mui/material @mui/icons-material

Then import the icons you need as typical React components:

import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';

These components use the MUI SvgIcon component to render each icon’s SVG path and have a peer dependency on @mui/material. The library supports TypeScript out-of-the-box.

Ant Design Icons

This library provides a set of semantic vector icons. You can use them separately without having to use any other Ant Design stuff.

Install:

yarn add @ant-design

Import what you want:

import { SmileFilled, SmileTwoTone } from '@ant-design/icons';

You can see the detailed guide on using Ant Design icons in this article.

React Font Awesome

Font Awesome is a well-known set of icons and toolkits for frontend developers. The latest version of the library includes five icon styles: solid, regular, light, duotone, and the new THIN style.

You can see detailed instructions on using Font Awesome in React here.

Bootstrap Icon

This one provides more than 1600 high-quality SVG icons.

You can add Bootstrap icons to your project by performing the following command:

npm i bootstrap-icons

Detailed guides:

Feather React Icons

  • GitHub stars: 1.6k+
  • NPM weekly downloads: 170k – 190k
  • License: MIT
  • Written in: Javascript, TypeScript
  • Links: GitHub repo | NPM page | Icon list

This package brings a collection of simple, beautiful, open-source icons for React.js. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency, and readability.

Install:

npm i react-feather

Sample usage:

import { Camera } from 'react-feather';
 
const App = () => {
  return <Camera />
};
 
export default App;

Styled Icons

This handsome library provides over 20,000 icons from the following icon packs as Styled Components, fully supporting TypeScript types and tree-shaking/ES modules.

Install:

npm i styled-icons

Sample usage:

import React from 'react'
import {Lock} from '@styled-icons/material'

const App = () => {
   return <Lock size="48" title="Hello" />;
}

Carbon Icon React

This package provides React components for icons in digital and software products using the Carbon Design System (Carbon is IBM’s open-source design system for products and digital experiences).

Install:

npm i @carbon/icons-react

Sample usage:

import { Add } from '@carbon/icons-react';

function ExampleComponent() {
  return <Add size={32} />;
}

Blueprint Icons

  • GitHub stars: 18.7k+ (include stars for things other than icons)
  • NPM weekly downloads: 160k – 180k
  • License: Apache 2.0
  • Links: GitHub repo | NPM page | Official docs

This package contains a collection of React components for displaying icons.

Install:

npm i @blueprintjs/icons

Iconify React

Iconify is a universal icon framework. It helps you use almost every open-source icon set with a single syntax (100+ icon sets, 100,000+ icons, including FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji), and you can mix icons from multiple icon sets on the same page.

Install:

npm i @iconify/react @iconify-icons/mdi

Sample usage:

import { Icon } from '@iconify/react';
import home from '@iconify-icons/mdi-light/home';

function renderHomeIcon() {
	return <Icon icon={home} />;
}

Wrapping Up

We’ve covered the most well-known free icon packs that you can use to build intuitive and attractive user interfaces. If you’d like to explore more new and interesting stuff about React and modern frontend development, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles