react-icons vs @heroicons/react vs react-feather vs react-bootstrap-icons
React Icon Libraries Comparison
Search packages..
1 Year
react-icons@heroicons/reactreact-featherreact-bootstrap-iconsSimilar Packages:
What's React Icon Libraries?

These libraries provide a collection of icons designed specifically for use in React applications. They offer various styles and functionalities, making it easier for developers to integrate scalable and customizable icons into their projects. Each library has its own unique design philosophy and usage patterns, catering to different aesthetic preferences and project requirements.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-icons3,181,03411,88386.2 MB2006 days agoMIT
@heroicons/react1,178,14622,0623.69 MB43 months agoMIT
react-feather272,5331,9381 MB38-MIT
react-bootstrap-icons71,6161858.78 MB93 months agoMIT
Feature Comparison: react-icons vs @heroicons/react vs react-feather vs react-bootstrap-icons

Design Style

  • react-icons:

    react-icons aggregates various icon styles, allowing you to choose from a wide variety of designs. This flexibility means you can select icons that best fit your project's unique style.

  • @heroicons/react:

    @heroicons/react offers a modern and clean design aesthetic, focusing on simplicity and clarity. The icons are designed to work well with Tailwind CSS, providing a consistent look and feel across your application.

  • react-feather:

    react-feather provides a minimalist design with a focus on simplicity. The icons are lightweight and have a hand-drawn feel, making them ideal for projects that require a clean and unobtrusive design.

  • react-bootstrap-icons:

    react-bootstrap-icons features icons that are designed to match the Bootstrap framework, ensuring a cohesive design language. The icons are more traditional and are styled to fit seamlessly within Bootstrap components.

Customization

  • react-icons:

    react-icons provides customization options depending on the underlying icon set. Since it aggregates multiple libraries, the level of customization may vary, but it generally supports size and color adjustments.

  • @heroicons/react:

    @heroicons/react icons are SVG-based, allowing for easy customization of size, color, and stroke width. This makes it simple to adapt the icons to fit your application's branding and design requirements.

  • react-feather:

    react-feather icons are highly customizable, as they are also SVG-based. You can easily change their size, color, and stroke properties, making them versatile for various design needs.

  • react-bootstrap-icons:

    react-bootstrap-icons allows for basic customization, but it is primarily designed to maintain consistency with Bootstrap's styling. Customization options may be limited compared to more flexible libraries.

Performance

  • react-icons:

    react-icons can impact performance depending on the number of icon sets imported. To optimize performance, it's recommended to only import the icons you need rather than the entire library.

  • @heroicons/react:

    @heroicons/react is optimized for performance, as it uses SVG icons that are lightweight and scalable. This ensures that your application remains responsive and fast, even with many icons.

  • react-feather:

    react-feather is known for its lightweight nature, making it a great choice for performance-sensitive applications. The minimalist design contributes to faster load times and better overall performance.

  • react-bootstrap-icons:

    react-bootstrap-icons is designed to work efficiently within Bootstrap applications. However, it may not be as lightweight as other libraries, depending on the number of icons used in your project.

Community and Support

  • react-icons:

    react-icons has a large user base due to its versatility and integration of multiple icon sets. The community is active, and there are many resources available for troubleshooting and customization.

  • @heroicons/react:

    @heroicons/react has a growing community, particularly among developers using Tailwind CSS. The library is actively maintained and has good documentation, making it easy to find support and resources.

  • react-feather:

    react-feather has a supportive community and is well-documented, making it easy for developers to find help. Its open-source nature encourages contributions and improvements from users.

  • react-bootstrap-icons:

    react-bootstrap-icons benefits from the large Bootstrap community, ensuring ample resources and support. However, the library is less frequently updated compared to others, which may impact long-term viability.

Ease of Use

  • react-icons:

    react-icons is versatile and easy to use, but the need to manage multiple icon sets may add complexity for some developers. However, once set up, it offers great flexibility.

  • @heroicons/react:

    @heroicons/react is straightforward to use, especially for developers familiar with React and Tailwind CSS. The API is intuitive, allowing for quick integration into projects.

  • react-feather:

    react-feather is user-friendly, with a simple API that allows for quick implementation of icons. Its minimalist approach makes it easy to integrate without overwhelming the UI.

  • react-bootstrap-icons:

    react-bootstrap-icons is easy to use for developers already familiar with Bootstrap, as it follows Bootstrap's conventions. However, it may require additional effort for those not using Bootstrap.

How to Choose: react-icons vs @heroicons/react vs react-feather vs react-bootstrap-icons
  • react-icons:

    Choose react-icons if you want a comprehensive library that aggregates icons from various sources, including Font Awesome, Material Design, and more. This library is versatile and allows you to easily switch between different icon sets, making it suitable for projects that require a diverse range of icons.

  • @heroicons/react:

    Choose @heroicons/react if you are looking for a set of beautifully crafted icons that align with Tailwind CSS design principles. This library is ideal for projects that prioritize a modern aesthetic and require SVG icons that are easily customizable and responsive.

  • react-feather:

    Select react-feather if you prefer a minimalist design approach and need lightweight icons that are easy to customize. This library offers a collection of open-source icons that are simple yet elegant, perfect for projects that require a clean and modern look without unnecessary complexity.

  • react-bootstrap-icons:

    Opt for react-bootstrap-icons if you are developing a project that utilizes Bootstrap and you want to maintain consistency with Bootstrap's design language. This library provides a wide range of icons that seamlessly integrate with Bootstrap components, making it a great choice for Bootstrap-based applications.

Similar Npm Packages to react-icons

react-icons is a popular library that provides a comprehensive collection of customizable icons for React applications. It allows developers to easily integrate icons from various icon sets, such as Font Awesome, Material Design, and more, into their projects. With a simple and intuitive API, react-icons makes it easy to import and use icons as React components, enabling seamless styling and customization. This library is particularly useful for developers looking to enhance their user interfaces with visually appealing icons without the hassle of managing multiple icon libraries.

An alternative to react-icons is react-feather. This library offers a collection of open-source icons that are designed with a minimalistic approach. Each icon in react-feather is built using SVG, ensuring that they are lightweight and easily scalable. The icons are designed to be simple and clean, making them a great choice for applications that prioritize a modern aesthetic. react-feather provides a straightforward API for integrating icons into your React components, allowing for easy customization and styling.

For a detailed comparison of these two libraries, check out the following link: Comparing react-feather vs react-icons.

Similar Npm Packages to @heroicons/react

@heroicons/react is a popular icon library for React applications, providing a set of beautifully designed, customizable SVG icons. Developed by the creators of Tailwind CSS, Heroicons offers both outline and solid styles, making it easy for developers to integrate high-quality icons into their projects. The library is designed to be simple and intuitive, allowing for easy customization and use in various UI components.

While @heroicons/react is an excellent choice for many projects, there are several alternatives available that also provide icon sets for React applications. Here are a few noteworthy options:

  • react-bootstrap-icons is a React wrapper for the Bootstrap Icons library. It offers a comprehensive collection of icons that are specifically designed to work seamlessly with Bootstrap components. If you are already using Bootstrap in your project and want to maintain a consistent design language, react-bootstrap-icons is a great choice. It allows you to easily incorporate Bootstrap-styled icons into your application without any hassle.

  • react-feather is a collection of open-source icons that are designed to be simple and minimalistic. Based on the Feather icon set, react-feather provides a lightweight and customizable solution for adding icons to your React applications. The icons are built with a focus on simplicity and clarity, making them suitable for various design styles. If you prefer a more minimalist aesthetic and want to keep your bundle size small, react-feather is an excellent option.

  • react-icons is a versatile library that provides a wide range of icons from various icon sets, including Font Awesome, Material Design Icons, and many others. With react-icons, you can easily import and use icons from different libraries in your React applications without needing to install each library separately. This flexibility makes react-icons a popular choice for developers who want access to a diverse set of icons while keeping their codebase clean and organized.

To see how @heroicons/react compares with react-bootstrap-icons, react-feather, and react-icons, check out the comparison: Comparing @heroicons/react vs react-bootstrap-icons vs react-feather vs react-icons.

Similar Npm Packages to react-feather

react-feather is a popular React library that provides a collection of beautifully crafted, open-source SVG icons. Designed with simplicity and ease of use in mind, react-feather allows developers to easily integrate icons into their React applications without the overhead of larger icon libraries. The icons are lightweight and customizable, making them a great choice for modern web applications that prioritize performance and aesthetics.

While react-feather is a solid choice for SVG icons, there are several alternatives in the React ecosystem that also provide icon solutions. Here are a few notable ones:

  • react-fontawesome is a React component library for Font Awesome, one of the most popular icon sets available. It allows developers to easily integrate Font Awesome icons into their React applications, providing a vast library of icons to choose from. With features like tree-shaking and the ability to customize icon styles, react-fontawesome is an excellent option for those who prefer the Font Awesome ecosystem and require a wide variety of icons for their projects.

  • react-icons is another versatile library that provides a comprehensive collection of icons from various icon sets, including Font Awesome, Material Icons, and more. This library allows developers to use icons from different sources within a single project, making it a flexible choice for those who want to mix and match icons. With a simple API and support for tree-shaking, react-icons is ideal for projects that require a diverse range of icons without the need to include multiple libraries.

  • react-svg is a library that focuses on rendering SVG images in React applications. While it is not strictly an icon library, it allows developers to import and use SVG files directly as React components. This can be particularly useful for projects that require custom SVG icons or illustrations. If you have specific SVG assets that you want to use in your application, react-svg provides a straightforward way to integrate them seamlessly.

For a detailed comparison of these libraries, check out the following link: Comparing react-feather vs react-fontawesome vs react-icons vs react-svg.

README for react-icons
React Icons

React Icons

npm

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation (for standard modern project)

yarn add react-icons
# or
npm install react-icons --save

example usage

import { FaBeer } from "react-icons/fa";

function Question() {
  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';

Installation (for meteorjs, gatsbyjs, etc)

Note This option has not had a new release for some time. More info https://github.com/react-icons/react-icons/issues/593

If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.

yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save

example usage

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

Icons

| Icon Library | License | Version | Count | | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: | | Circum Icons | MPL-2.0 license | 1.0.0 | 288 | | Font Awesome 5 | CC BY 4.0 License | 5.15.4-3-gafecf2a | 1612 | | Font Awesome 6 | CC BY 4.0 License | 6.5.2 | 2045 | | Ionicons 4 | MIT | 4.6.3 | 696 | | Ionicons 5 | MIT | 5.5.4 | 1332 | | Material Design icons | Apache License Version 2.0 | 4.0.0-98-g9beae745bb | 4341 | | Typicons | CC BY-SA 3.0 | 2.1.2 | 336 | | Github Octicons icons | MIT | 18.3.0 | 264 | | Feather | MIT | 4.29.1 | 287 | | Lucide | ISC | v5.1.0-6-g438f572e | 1215 | | Game Icons | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 | | Weather Icons | SIL OFL 1.1 | 2.0.12 | 219 | | Devicons | MIT | 1.8.0 | 192 | | Ant Design Icons | MIT | 4.4.2 | 831 | | Bootstrap Icons | MIT | 1.11.3 | 2716 | | Remix Icon | Apache License Version 2.0 | 4.2.0 | 2860 | | Flat Color Icons | MIT | 1.0.2 | 329 | | Grommet-Icons | Apache License Version 2.0 | 4.12.1 | 635 | | Heroicons | MIT | 1.0.6 | 460 | | Heroicons 2 | MIT | 2.1.3 | 888 | | Simple Icons | CC0 1.0 Universal | 12.14.0 | 3209 | | Simple Line Icons | MIT | 2.5.5 | 189 | | IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | BoxIcons | MIT | 2.1.4 | 1634 | | css.gg | MIT | 2.1.1 | 704 | | VS Code Icons | CC BY 4.0 | 0.0.35 | 461 | | Tabler Icons | MIT | 3.2.0 | 5237 | | Themify Icons | MIT | v0.1.2-2-g9600186 | 352 | | Radix Icons | MIT | @radix-ui/react-icons@1.3.0-1-g94b3fcf | 318 | | Phosphor Icons | MIT | 2.1.1 | 9072 | | Icons8 Line Awesome | MIT | 1.3.1 | 1544 |

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure react-icons props using React Context API.

Requires React 16.3 or higher.

import { IconContext } from "react-icons";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

| Key | Default | Notes | | ----------- | --------------------- | ---------------------------------- | | color | undefined (inherit) | | | size | 1em | | | className | undefined | | | style | undefined | Can overwrite size and color | | attr | undefined | Overwritten by other attributes | | title | undefined | Icon description for accessibility |

Migrating from version 2 -> 3

Change import style

Import path has changed. You need to rewrite from the old style.

// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

// NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

Ending up with a large JS bundle? Check out this issue.

Adjustment CSS

From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.

Global Inline Styling

<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>

Global className Styling

Component

<IconContext.Provider value={{ className: 'react-icons' }}>

CSS

.react-icons {
  vertical-align: middle;
}

TypeScript native support

Dependencies on @types/react-icons can be deleted.

Yarn

yarn remove @types/react-icons

NPM

npm remove @types/react-icons

Contributing

./build-script.sh will build the whole project. See also CI scripts for more information.

Development

yarn
cd packages/react-icons
yarn fetch  # fetch icon sources
yarn build

Add/Update icon set

First, check the discussion to see if anyone would like to add an icon set.

https://github.com/react-icons/react-icons/discussions/categories/new-icon-set

The SVG files to be fetched are managed in this file. Edit this file and run yarn fetch && yarn check && yarn build.

https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts

Preview

Note The project is not actively accepting PR for the preview site at this time.

The preview site is the react-icons website, built in Astro+React.

cd packages/react-icons
yarn fetch
yarn build

cd ../preview-astro
yarn start

Demo

The demo is a Create React App boilerplate with react-icons added as a dependency for easy testing.

cd packages/react-icons
yarn fetch
yarn build

cd ../demo
yarn start

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.

Related Projects

Licence

MIT

  • Icons are taken from the other projects so please check each project licences accordingly.
npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.