Why React Icons May Be the Only Icon Library You Need

A single, elegantly designed icon can talk complicated actions and concepts in a common language understood at a look, proving how essential icons are in elevating the general person expertise. However the place are you able to procure such icons as a React developer?

The reply is icon libraries — or, to go a step additional, React icon libraries. A React icon library is basically a set of ready-to-use SVG icons that may be straight imported into your React undertaking. These libraries supply npm, pnpm, or Yarn package deal set up, after which you’ll be able to import any icon from them with only a few instructions.

This text presents numerous options of React Icons (react-icons), among the best and hottest icon libraries utilized in React. It additionally contains a number of icon libraries that aren’t included within the React Icons library however which can be price contemplating.

React Icons and Its Options

React Icons is an open-source undertaking that lets you use greater than 30 icon units in a unified method simply by putting in a single package deal. Its recognition is on the rise as individuals convert from different libraries to this undertaking. Presently, it averages over 1.5m weekly npm downloads and practically 11k GitHub stars as of writing this text.

It contains solely high-quality, well-known libraries that collectively make over 45,000 icons, so there’s an opportunity that you simply’ll at all times discover what you’re in search of. It additionally comprises libraries which can be specialised for sure use instances, like an software.

To provide you an concept of its libraries, some in style ones that you simply would possibly acknowledge are listed under in no specific order:

• Font Superior (free ones)
• Tabler Icons
• Phosphor Icons
• BoxIcons
• Line Superior
• Ant Design Icons
• Remix Icons
• Bootstrap Icons
• Materials Design icons
• Hero Icons
• Radix Icons

One con of utilizing React Icons — particularly in the event you’re utilizing icons from totally different icon libraries — might be worry of inconsistency, so that you’d want to check 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 undertaking, and you may’t actually go mistaken with any of the above choices talked about.

However React Icons has vital benefits too. One query in your thoughts might be associated to the dimensions, because it feels like an enormous package deal that would have an effect on your software or web site’s efficiency. However the good factor is, React Icons makes use of ES6 imports.

As a substitute of including the complete set of icons to your undertaking (which will be very massive), you’ll be able to import simply those you want. This selective importing helps to maintain your undertaking dimension smaller and extra environment friendly. Moreover, React Icons solely makes use of SVGs, that are thought-about the perfect icon format these days on account of fewer community requests and smaller sizes.

The very last thing to bear in mind earlier than we transfer to utilization is that every icon library in React Icons makes use of its specified license. Whereas all icon libraries are open supply and permit industrial use, some require attribution just like the Inventive Commons licenses. You may verify what library makes use of which license from the React Icons web site or its npm page.

Utilizing React Icons

One of the best a part of React Icons is its simplicity and ease of use. All it’s worthwhile to do is set up the package deal through npm or Yarn, import your involved library, and now you’re prepared to make use of its icons.

Begin by putting in the package deal in your terminal:

npm set up react-icons --save

Alternatively, you are able to do this:

yarn add react-icons

Now seek for your key phrase and choose any icon you want. In our case, it appears to be like like what’s pictured under.

Tip: in the event you want to seek for extra icons from a selected library, then add its prefix upfront. Looking “fa Alarm” would prioritize exhibiting icons from the Font Superior library.

The primary command you see is the one it’s worthwhile to enter to import this particular icon into your undertaking. The second isn’t a command however the part identify, which is helpful to repeat, as you wouldn’t need to sort it each time you need to use it.

Coming again to importing the icons:

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

And to import a number of icons from the identical library:

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

One of the best half about all that is that every icon is a React part, which makes it very straightforward to make use of them wherever you need to:

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

class Alarm extends React.Part {
  render() {
    return <h3> <CiAlarmOff /> You must get up! <CiAlarmOn /> </h3>
  }
}

It’s additionally attainable to switch the colour and dimension of those icons utilizing IconContext. Extra details about configuration and utilization can be found here.

With over 45k icons from 30 totally different icon libraries plus straightforward implementation, React Icons stands out as the solely icon library you want on your React initiatives.

5 Helpful React Icon Libraries Not in React Icons Library

That stated, in the event you can’t discover your best icons or need to attempt different choices, the next are some icon libraries that aren’t included in React Icons (no less than for now).

1. MUI Materials Icons

Material UI (MUI) is an open-source library that gives React elements primarily based on Google’s Materials Design. It’s not simply an icon library however a complete suite of UI instruments designed to help within the fast improvement and deployment of initiatives.

MUI Materials icons get pleasure from longstanding assist and acknowledgment amongst builders because it boasts over 2.5m weekly npm downloads and over 90k GitHub stars as of writing this text. Builders followers of Google’s Materials Icons design will love this open-source library because it consists of over 2000 modern and modern-looking icons. Whereas React Icons does embrace Google’s original Material Icons, MUI’s implementation appears to be like barely extra intuitive.

An instance is proven under, so make your individual judgment. (Ignore the colours, as they are often modified).

Google’s Materials Icon and MUI’s implementation respectively

When you’re prepared to offer MUI a attempt, you’ll be able to consult with its documentation concerning putting in the React package deal and importing icons. It additionally helps configure dimension and colour.

2. Font Superior Professional

Font Awesome is a vastly in style library and the second most used font script technology on the Web simply behind Google Fonts. It gives a variety of icons overlaying numerous classes, together with social media, internet, enterprise, and extra.

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

Presently, it gives over 4000 free icons (v5, v6) whereas paid plan takes this to over 30,000 icons. However the primary focus of this part is Font Superior Professional, as free icons are already accessible in React Icons.

When you’re a developer that creates web sites typically and has a aspect curiosity in designing, then Font Superior Professional could also be price contemplating. A number of the paid plan options embrace:

• simpler customizability for dimension, colour, and main modifications of the icon itself
• better-optimized implementation utilizing Font Awesome Kits
• skill to add your individual icons in Package to make use of alongside Font Superior
• Personal registry bandwidth on your initiatives utilizing npm, Ruby, and Python personal 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 undertaking with a number of instructions. Font Superior’s documentation on usage is sort of detailed and greater than sufficient to get began.

Looking and navigating via icons is seamless and contains numerous classes in the event you’d favor navigating manually fairly than looking key phrases.

Clicking on any icon brings up an intuitive interface that enables numerous modifications and even applies these to code — not like React Icons, the place you’d have to do that manually.

General, Font Superior will not be solely a terrific React icon library however among the best icon libraries that accommodates builders from numerous backgrounds in addition to designers. If React Icons didn’t fit your style, a paid plan for Font Superior would possibly do it. Earlier than buying, you’ll be able to sign up for the free plan to see if upgrading would improve your expertise.

3. IconPark

IconPark is an open-source icon library providing over 2500 customizable icons for engineers and designers alike. Its icons have a refreshingly distinctive but fashionable design and permit versatile utilization eventualities.

It helps seamless React and Vue integration in addition to SVG assist if you wish to do it that method. Making modifications on IconPark is sort of straightforward — even for a developer, as proven within the picture above. All adjustments are mirrored in copyable code that’s able to be carried out in your undertaking.

Presently, it holds practically 8k GitHub stars however solely 3k weekly npm downloads for now. When you’d like to offer it a shot, an in depth information to putting in it’s listed in its documentation.

4. CoreUI React Icons

CoreUI is thought for its open-source admin dashboard templates, nevertheless it’s additionally providing a React icons library now consisting of 1500+ icons. Though it doesn’t supply ready-to-use copyable codes, you would possibly need to attempt it in the event you’re constructing admin dashboards.

One wonderful thing about this package deal is its emphasis on accessibility for individuals with visible impairments. It suggests an strategy to divide icons into semantic icons and ornamental icons and embrace a line of code that indicators display screen readers to disregard it or not. Extra particulars about this implementation in addition to the entire package deal’s set up will be present in its documentation.

5. Evergreen Phase’s Icons

Evergreen Phase is a React UI framework that consists of quite a few React elements that work out of the field. Certainly one of these elements is its custom-designed icons. Evergreen Phase gives over 500 icons with a singular type which will suit your wants.

Though it doesn’t embrace model icons, its icons for fundamental performance aren’t to be disregarded. It presently holds over 12k GitHub stars, however they’re largely due to the success 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 most likely go up from right here.

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

Conclusion

Since React Icons contains many in style React icon libraries, is actively maintained, and is simple to make use of, it could most likely be the only option for you as a React developer. Its massive arsenal of icon units is sufficient to deal with any use case it’s possible you’ll want.

However in the event you’re not a fan of it, MUI’s Materials Icons or Font Superior are glorious all-around icon libraries. Libraries for Icon Park, CoreUI, and Evergreen Phase might allow you to in area of interest instances the place your normal ones don’t work out.

Nonetheless, open-source React icon libraries are a blessing and an enormous enchancment over previous implementations — the place you needed to obtain a big set of icons, pay for quite a few libraries, solely to not discover the icon you want.