Wednesday, March 6, 2024

Why React Icons Could Be the Solely Icon Library You Want — SitePoint

Must read


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 consumer 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 mission. These libraries supply npm, pnpm, or Yarn package deal set up, after which you’ll be able to import any icon from them with just some instructions.

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

Desk of Contents

React Icons and Its Options

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

It consists of solely high-quality, well-known libraries that collectively make over 45,000 icons, so there’s an opportunity that you just’ll all the time discover what you’re searching for. It additionally comprises libraries which are specialised for sure use circumstances, like an software.

To offer you an concept of its libraries, some standard ones that you just would possibly acknowledge are listed under in no explicit 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 should you’re utilizing icons from totally different icon libraries — could possibly be worry of inconsistency, so that you’d want to check completely on your use case. Nonetheless, React Icons can be utilized to import standard icons from one library if that’s all you want on your React mission, and you may’t actually go mistaken with any of the above choices talked about.

However React Icons has important benefits too. One query in your thoughts could possibly be associated to the scale, because it seems like a giant package deal that might 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 your complete set of icons to your mission (which might be very massive), you’ll be able to import simply those you want. This selective importing helps to maintain your mission dimension smaller and extra environment friendly. Moreover, React Icons solely makes use of SVGs, that are thought-about the very best icon format these days resulting from 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 business use, some require attribution just like the Artistic Commons licenses. You’ll be able to verify what library makes use of which license from the React Icons web site or its npm web page.

Viewing a library on React Icons

Utilizing React Icons

The very best a part of React Icons is its simplicity and ease of use. All it’s good to do is set up the package deal by way of 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 seems like what’s pictured under.

Selecting an icon on React Icons

Tip: should you want to seek for extra icons from a particular library, then add its prefix upfront. Looking out “fa Alarm” would prioritize displaying icons from the Font Superior library.

The primary command you see is the one it’s good to enter to import this particular icon into your mission. The second isn’t a command however the element identify, which is beneficial to repeat, as you wouldn’t wish to kind it each time you wish 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";

The very best half about all that is that every icon is a React element, which makes it very simple to make use of them wherever you wish to:

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

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

It’s additionally attainable to change the colour and dimension of those icons utilizing IconContext. Extra details about configuration and utilization might be discovered right here.

With over 45k icons from 30 totally different icon libraries plus simple implementation, React Icons could be the solely icon library you want on your React tasks.

5 Helpful React Icon Libraries Not in React Icons Library

That stated, should you can’t discover your supreme icons or wish 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

MUI's Icons page

Materials UI (MUI) is an open-source library that gives React parts based mostly on Google’s Materials Design. It’s not simply an icon library however a complete suite of UI instruments designed to help within the speedy growth and deployment of tasks.

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 embody Google’s unique Materials Icons, MUI’s implementation seems barely extra intuitive.

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

Google's Material Icon and MUI's implementation respectively

Google’s Materials Icon and MUI’s implementation respectively

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

2. Font Superior Professional

Font Awesome home page

Font Superior is a vastly standard library and the second most used font script expertise on the Web simply behind Google Fonts. It gives a variety of icons masking numerous classes, together with social media, net, enterprise, and extra.

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

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

For those who’re a developer that creates web sites usually and has a facet curiosity in designing, then Font Superior Professional could also be price contemplating. A few of the paid plan options embody:

  • simpler customizability for dimension, shade, and main modifications of the icon itself
  • better-optimized implementation utilizing Font Superior Kits
  • potential to add your personal icons in Equipment to make use of alongside Font Superior
  • Non-public registry bandwidth on your tasks utilizing npm, Ruby, and Python personal registries

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

Looking out and navigating via icons is seamless and consists of numerous classes should you’d want navigating manually moderately than looking key phrases.

Font Awesome icons library

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

Customizing icon using Font Awesome

General, Font Superior is just not solely an important React icon library however probably the greatest 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 join the free plan to see if upgrading would improve your expertise.

3. IconPark

IconPark's icon library

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

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

At present, it holds practically 8k GitHub stars however solely 3k weekly npm downloads for now. For those who’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's icons library

CoreUI is thought for its open-source admin dashboard templates, however 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 wish to attempt it should you’re constructing admin dashboards.

One beauty of 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 embody a line of code that indicators display readers to disregard it or not. Extra particulars about this implementation in addition to the entire package deal’s set up might be present in its documentation.

5. Evergreen Section’s Icons

Evergreen Segment's icons library

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

Though it doesn’t embody model icons, its icons for fundamental performance aren’t to be dismissed. It at present holds over 12k GitHub stars, however they’re largely due to the success of its dad or mum 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 might be present in its documentation. Apparently, 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 consists of many standard React icon libraries, is actively maintained, and is straightforward to make use of, it will most likely be the only option for you as a React developer. Its massive arsenal of icon units is sufficient to sort out any use case it’s possible you’ll want.

However should you’re not a fan of it, MUI’s Materials Icons or Font Superior are wonderful all-around icon libraries. Libraries for Icon Park, CoreUI, and Evergreen Section might show you how to in area of interest circumstances the place your commonplace ones don’t work out.

Nonetheless, open-source React icon libraries are a blessing and a large 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.



Supply hyperlink

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article