A unmarried, elegantly designed icon can keep in touch complicated movements and concepts in a common language understood at a look, proving how an important icons are in raising the full person revel in. However the place are you able to procure such icons as a React developer?

The solution is icon libraries — or, to move a step additional, React icon libraries. A React icon library is largely a selection of ready-to-use SVG icons that may be immediately imported into your React mission. Those libraries be offering npm, pnpm, or Yarn package deal set up, and then you’ll be able to import any icon from them with only some instructions.

This text items quite a lot of options of React Icons (react-icons), one of the vital very best and most well liked icon libraries utilized in React. It additionally comprises a number of icon libraries that aren’t integrated within the React Icons library however which might be value taking into consideration.

React Icons and Its Options

React Icons is an open-source mission that lets you use greater than 30 icon units in a unified means simply by putting in a unmarried package deal. Its recognition is on the upward push as other people convert from different libraries to this mission. These days, it averages over 1.5m weekly npm downloads and just about 11k GitHub stars as of writing this text.

It comprises best top of the range, well known libraries that jointly make over 45,000 icons, so there’s an opportunity that you just’ll at all times to find what you’re searching for. It additionally comprises libraries which might be specialised for sure use circumstances, like an utility.

To come up with an concept of its libraries, some in style ones that you may acknowledge are indexed beneath in no explicit order:

• Font Superior (unfastened ones)
• Tabler Icons
• Phosphor Icons
• BoxIcons
• Line Superior
• Ant Design Icons
• Remix Icons
• Bootstrap Icons
• Subject material Design icons
• Hero Icons
• Radix Icons

One con of the usage of React Icons — particularly in the event you’re the usage of icons from other icon libraries — may well be worry of inconsistency, so that you’d wish to take a look at completely on your use case. Nonetheless, React Icons can be utilized to import in style icons from one library if that’s all you want on your React mission, and you’ll be able to’t actually pass fallacious with any of the above choices discussed.

However React Icons has important benefits too. One query on your thoughts may well be associated with the scale, because it seems like a large package deal that would have an effect on your utility or web site’s efficiency. However the just right factor is, React Icons makes use of ES6 imports.

As a substitute of including all the set of icons in your mission (which can also be very huge), you’ll be able to import simply those you want. This selective uploading keeps your mission dimension smaller and extra environment friendly. Moreover, React Icons best makes use of SVGs, which can be thought to be the most productive icon structure at the moment because of fewer community requests and smaller sizes.

The very last thing to remember earlier than we transfer to utilization is that every icon library in React Icons makes use of its specified license. Whilst all icon libraries are open supply and make allowance business use, some require attribution just like the Ingenious Commons licenses. You’ll be able to take a look at what library makes use of which license from the React Icons web site or its npm web page.

The use of React Icons

The most productive a part of React Icons is its simplicity and simplicity of use. All you want to do is set up the package deal by the use of npm or Yarn, import your involved library, and now you’re waiting to make use of its icons.

Get started via putting in the package deal on your terminal:

npm set up react-icons --save

On the other hand, you’ll be able to do that:

yarn upload react-icons

Now seek for your key phrase and make a choice any icon you favor. In our case, it looks as if what’s pictured beneath.

Tip: if you want to seek for extra icons from a particular library, then upload its prefix in advance. Looking out “fa Alarm” would prioritize appearing icons from the Font Superior library.

The primary command you notice is the only you want to enter to import this explicit icon into your mission. The second isn’t a command however the part title, which turns out to be useful to replicate, as you wouldn’t wish to kind it each time you wish to have to make use of it.

Coming again to uploading the icons:

import { CiAlarmOn } from "react-icons/ci";

And to import a couple of icons from the similar library:

import { CiAlarmOn, CiAlarmOff } from "react-icons/ci";

The most productive phase about all that is that every icon is a React part, which makes it really easy to make use of them anyplace you wish to have to:

import { CiAlarmOn, CiAlarmOff } from "react-icons/ci";

magnificence Alarm extends React.Element {
  render() {
    go back <h3> <CiAlarmOff /> You wish to get up! <CiAlarmOn /> </h3>
  }
}

It’s additionally imaginable to change the colour and dimension of those icons the usage of IconContext. Extra details about configuration and utilization can also be discovered right here.

With over 45k icons from 30 other icon libraries plus simple implementation, React Icons is also the one icon library you want on your React tasks.

5 Helpful React Icon Libraries Now not in React Icons Library

That stated, if you’ll be able to’t to find your ultimate icons or need to check out different choices, the next are some icon libraries that aren’t integrated in React Icons (no less than for now).

1. MUI Subject material Icons

Subject material UI (MUI) is an open-source library that gives React parts in accordance with Google’s Subject material Design. It’s now not simply an icon library however a complete suite of UI gear designed to lend a hand within the fast building and deployment of tasks.

MUI Subject material icons experience longstanding strengthen and acknowledgment amongst builders because it boasts over 2.5m weekly npm downloads and over 90k GitHub stars as of writing this text. Builders enthusiasts of Google’s Subject material Icons design will love this open-source library because it is composed of over 2000 graceful and modern-looking icons. Whilst React Icons does come with Google’s authentic Subject material Icons, MUI’s implementation appears moderately extra intuitive.

An instance is proven beneath, so make your individual judgment. (Forget about the colours, as they are able to be modified).

Google’s Subject material Icon and MUI’s implementation respectively

If you happen to’re waiting to provide MUI a take a look at, you’ll be able to confer with its documentation relating to putting in the React package deal and uploading icons. It additionally is helping configure dimension and colour.

2. Font Superior Professional

Font Superior is a massively in style library and the 2nd maximum used font script era at the Web simply at the back of Google Fonts. It provides quite a lot of icons protecting quite a lot of classes, together with social media, internet, industry, and extra.

It additionally comes with a number of integrations so that you can use those icons together with its personal Figma part, AngularJS, Vue, and naturally React.

These days, it provides over 4000 unfastened icons (v5, v6) whilst paid plan takes this to over 30,000 icons. However the principle center of attention of this segment is Font Superior Professional, as unfastened icons are already to be had in React Icons.

If you happen to’re a developer that creates web sites frequently and has an aspect hobby in designing, then Font Superior Professional is also value taking into consideration. One of the most paid plan options come with:

• more uncomplicated customizability for dimension, colour, and primary changes of the icon itself
• better-optimized implementation the usage of Font Superior Kits
• skill to add your individual icons in Package to make use of along Font Superior
• Non-public registry bandwidth on your tasks the usage of npm, Ruby, and Python non-public registries

Font Superior additionally has its personal React part, so identical to React Icons, you’ll be able to simply combine its icons into your mission with a couple of instructions. Font Superior’s documentation on utilization is fairly detailed and greater than sufficient to get began.

Looking out and navigating thru icons is seamless and comprises quite a lot of classes in the event you’d choose navigating manually relatively than looking key phrases.

Clicking on any icon brings up an intuitive interface that permits quite a lot of changes or even applies the ones to code — in contrast to React Icons, the place you’d have to do that manually.

General, Font Superior isn’t just an excellent React icon library however one of the vital very best icon libraries that contains builders from quite a lot of backgrounds in addition to designers. If React Icons didn’t fit your style, a paid plan for Font Superior would possibly do it. Ahead of buying, you’ll be able to join the unfastened plan to look if upgrading would make stronger your revel in.

3. IconPark

IconPark is an open-source icon library providing over 2500 customizable icons for engineers and architects alike. Its icons have a refreshingly distinctive but leading-edge design and make allowance versatile utilization eventualities.

It helps seamless React and Vue integration in addition to SVG strengthen if you wish to do it that means. Making changes on IconPark is fairly simple — even for a developer, as proven within the symbol above. All adjustments are mirrored in copyable code that’s waiting to be carried out on your mission.

These days, it holds just about 8k GitHub stars however best 3k weekly npm downloads for now. If you happen to’d like to provide it a shot, an in depth information to putting in it’s indexed in its documentation.

4. CoreUI React Icons

CoreUI is understood for its open-source admin dashboard templates, but it surely’s additionally providing a React icons library now consisting of 1500+ icons. Even supposing it doesn’t be offering ready-to-use copyable codes, you may want to check out it in the event you’re construction admin dashboards.

One beauty of this package deal is its emphasis on accessibility for other people with visible impairments. It suggests an option to divide icons into semantic icons and ornamental icons and come with a line of code that indicators display screen readers to forget about it or now not. Extra information about this implementation in addition to the entire package deal’s set up can also be present in its documentation.

5. Evergreen Phase’s Icons

Evergreen Phase is a React UI framework that is composed of a large number of React parts that determine of the field. This kind of parts is its custom-designed icons. Evergreen Phase provides over 500 icons with a novel taste that can suit your wishes.

Even supposing it doesn’t come with emblem icons, its icons for elementary capability aren’t to be disregarded. It lately holds over 12k GitHub stars, however they’re most commonly due to the luck of its mother or father framework. That stated, the npm package deal for its icons holds over 10k weekly downloads as of now and can almost certainly pass up from right here.

Directions on set up and utilization can also be present in its documentation. Curiously, it features a reside editor on examples too, so you’ll be able to see the impact of making use of props to icons.

Conclusion

Since React Icons comprises many in style React icon libraries, is actively maintained, and is simple to make use of, it might almost certainly be your best choice for you as a React developer. Its huge arsenal of icon units is sufficient to take on any use case you might want.

However in the event you’re now not partial to it, MUI’s Subject material Icons or Font Superior are very good all-around icon libraries. Libraries for Icon Park, CoreUI, and Evergreen Phase would possibly will let you in area of interest circumstances the place your same old ones don’t determine.

Nevertheless, open-source React icon libraries are a blessing and an enormous growth over previous implementations — the place you needed to obtain a big set of icons, pay for a large number of libraries, best not to to find the icon you want.