react-icons vs @radix-ui/react-icons vs heroicons
React Icon Libraries Comparison
Search packages..
1 Year
react-icons@radix-ui/react-iconsheroiconsSimilar Packages:
What's React Icon Libraries?

Icon libraries in React provide a collection of scalable vector icons that can be easily integrated into web applications. They enhance user interfaces by offering a visual representation of actions, objects, or ideas, making applications more intuitive and engaging. Each library has its unique design philosophy, customization options, and ease of use, catering to different project requirements and developer preferences.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-icons3,181,72711,89586.2 MB20010 days agoMIT
@radix-ui/react-icons1,094,357-3.44 MB-4 months agoMIT
heroicons40,83322,077700 kB43 months agoMIT
Feature Comparison: react-icons vs @radix-ui/react-icons vs heroicons

Design Style

  • react-icons:

    React Icons provides a wide variety of icon styles from different libraries, allowing developers to choose icons that best fit their application's design. The flexibility in design makes it suitable for diverse projects, from minimalistic to more elaborate interfaces.

  • @radix-ui/react-icons:

    Radix UI icons are designed with a focus on accessibility and usability, ensuring that they integrate well with Radix UI components. They maintain a consistent visual style that aligns with modern UI design principles, making them suitable for applications that prioritize user experience.

  • heroicons:

    Heroicons offers a clean and modern aesthetic, with both outline and solid styles available. The design is minimalist, making it a great choice for applications that aim for a contemporary look and feel, especially when used alongside Tailwind CSS.

Customization

  • react-icons:

    React Icons allows for extensive customization since it provides icons in SVG format. Developers can easily adjust size, color, and other properties, making it a highly flexible option for various design needs.

  • @radix-ui/react-icons:

    Customization options are limited to ensure consistency with Radix UI components. However, they can be styled using CSS-in-JS solutions or traditional CSS, allowing for some degree of customization while maintaining a cohesive design.

  • heroicons:

    Heroicons can be easily customized through CSS, allowing developers to change colors, sizes, and other properties. The icons are SVG-based, which means they can be manipulated without losing quality, providing flexibility in design.

Integration

  • react-icons:

    React Icons is highly versatile and can be integrated into any React project regardless of the styling framework being used. Its compatibility with various icon sets allows developers to mix and match icons as needed.

  • @radix-ui/react-icons:

    Designed to work seamlessly with Radix UI components, making integration straightforward for projects using this design system. This package is particularly beneficial for developers already invested in the Radix ecosystem.

  • heroicons:

    Heroicons integrates well with Tailwind CSS, making it a natural choice for developers using this utility-first CSS framework. The icons can be easily styled using Tailwind's utility classes, enhancing the development experience.

Accessibility

  • react-icons:

    React Icons does not enforce accessibility standards but allows developers to implement ARIA attributes and other accessibility features as needed. It is the developer's responsibility to ensure that icons are accessible in their applications.

  • @radix-ui/react-icons:

    Accessibility is a core principle of Radix UI, and its icons are designed with this in mind. They include appropriate ARIA attributes, ensuring that screen readers can interpret them correctly, which is essential for inclusive design.

  • heroicons:

    Heroicons are designed to be accessible, with proper semantic markup and ARIA attributes. This ensures that users relying on assistive technologies can effectively interact with the icons, enhancing overall usability.

Community and Support

  • react-icons:

    React Icons has a large user base and is well-documented, making it easy for developers to find support and resources. Its popularity ensures that many developers are familiar with its usage and can provide assistance.

  • @radix-ui/react-icons:

    Radix UI has a growing community, and while the icon library is relatively new, it benefits from the broader Radix ecosystem's support and documentation. Developers can find resources and community support as the library evolves.

  • heroicons:

    Heroicons is widely used within the Tailwind CSS community, which provides extensive documentation and community support. Developers can easily find resources, examples, and help from fellow users.

How to Choose: react-icons vs @radix-ui/react-icons vs heroicons
  • react-icons:

    Opt for React Icons if you need a versatile library that aggregates icons from various popular icon sets, allowing for easy integration and flexibility. This package is excellent for projects that require a diverse range of icons without being tied to a specific design system.

  • @radix-ui/react-icons:

    Choose @radix-ui/react-icons if you are looking for a set of icons that are specifically designed to work seamlessly with Radix UI components, ensuring consistent styling and accessibility. This package is ideal for projects that prioritize design consistency and accessibility in their UI components.

  • heroicons:

    Select Heroicons if you prefer a modern, minimalist design aesthetic that aligns well with Tailwind CSS. Heroicons provides both outline and solid styles, making it suitable for projects that require a clean and contemporary look. It's particularly useful for developers working within the Tailwind ecosystem.

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 @radix-ui/react-icons

@radix-ui/react-icons is a library that provides a collection of customizable icons for React applications. It is part of the Radix UI component library, which focuses on building accessible and high-quality UI components. The icons in this library are designed to be simple, clean, and easy to use, making them a great choice for developers looking to enhance their user interfaces with visually appealing icons. The library allows for easy integration with existing projects and supports customization to fit various design needs.

While @radix-ui/react-icons offers a solid selection of icons, there are other libraries available that provide similar functionality. Here are a couple of alternatives:

  • heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. Designed by the creators of Tailwind CSS, Heroicons offers both outline and solid styles, making it versatile for different design contexts. The icons are easy to customize and integrate into React applications, making them a popular choice among developers who want to maintain a consistent design language throughout their projects.
  • react-icons is another popular library that provides a comprehensive set of icons from various icon libraries, all in one package. It includes icons from Font Awesome, Material Design, and many others, allowing developers to choose from a vast selection of icons. React Icons is designed to be lightweight and easy to use, making it a great option for projects where you need a diverse range of icons without the overhead of multiple libraries.

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

Similar Npm Packages to heroicons

heroicons is a popular set of free, open-source icons designed specifically for use with Tailwind CSS. These icons are crafted in a minimalist style, making them suitable for modern web applications. Heroicons provides both outline and solid styles, allowing developers to choose the best fit for their design needs. With a focus on simplicity and usability, Heroicons is an excellent choice for those looking to enhance their user interfaces with high-quality icons.

While Heroicons is a fantastic option, there are several alternatives available that cater to different design preferences and requirements. Here are a few notable alternatives:

  • bootstrap-icons is the official icon set for Bootstrap, featuring a wide range of icons that are designed to work seamlessly with the Bootstrap framework. These icons are vector-based and can be easily customized with CSS. If you're already using Bootstrap in your project, bootstrap-icons is a natural choice for maintaining consistency in your design.

  • feather-icons offers a collection of open-source icons that are designed with a focus on simplicity and readability. Feather icons are lightweight and can be easily customized, making them a great choice for developers looking for a clean and modern aesthetic. Their versatility allows them to be used in a variety of projects, regardless of the framework or library being used.

  • font-awesome is one of the most widely used icon libraries, featuring a vast collection of icons and social logos. Font Awesome provides both free and premium icons, along with a robust set of tools for customizing and managing icons in your projects. If you need a comprehensive icon library with a wide range of options, Font Awesome is a solid choice.

  • ionicons is an icon set designed for use with Ionic Framework, but it can be used in any web project. Ionicons provides a variety of icons that are particularly suited for mobile applications, offering a modern and clean design. If you're developing a mobile-first application, Ionicons may be the best fit for your needs.

  • material-icons is a set of icons created by Google as part of the Material Design guidelines. These icons are designed to be simple, consistent, and easy to use across various platforms. If you're building a project that adheres to Material Design principles, using Material Icons will help maintain a cohesive design language.

  • react-icons is a library that provides a collection of popular icon sets as React components. This allows developers to easily integrate icons into their React applications without the need for additional dependencies. If you're working on a React project and want the flexibility of using various icon sets, react-icons is an excellent choice.

To see how Heroicons compares with these alternatives, check out the comparison: Comparing bootstrap-icons vs feather-icons vs font-awesome vs heroicons vs ionicons vs material-icons vs react-icons.

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.