A single, elegantly designed icon can talk advanced 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 group of ready-to-use SVG icons that may be instantly imported into your React undertaking. These libraries provide 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), top-of-the-line 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 are 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 manner simply by putting in a single package deal. Its reputation is on the rise as individuals convert from different libraries to this undertaking. At present, 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 all the time discover what you’re in search of. It additionally comprises libraries which are specialised for sure use circumstances, like an utility.
To present you an concept of its libraries, some common ones that you simply may acknowledge are listed beneath 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 when you’re utilizing icons from totally different icon libraries — might be concern of inconsistency, so that you’d want to check completely on your use case. Nonetheless, React Icons can be utilized to import common icons from one library if that’s all you want on your React undertaking, and you may’t actually go fallacious 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 scale, because it feels like an enormous package deal that would have an effect on your utility or web site’s efficiency. However the good factor is, React Icons makes use of ES6 imports.
As an alternative of including your complete set of icons to your undertaking (which might be very massive), you’ll be able to import simply those you want. This selective importing helps to maintain your undertaking measurement smaller and extra environment friendly. Moreover, React Icons solely makes use of SVGs, that are thought-about the very best icon format these days attributable to 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. 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 web page.
Utilizing React Icons
The very best a part of React Icons is its simplicity and ease of use. All you should 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 beneath.
Tip: when you want to seek for extra icons from a selected library, then add its prefix upfront. Looking “fa Alarm” would prioritize displaying icons from the Font Superior library.
The primary command you see is the one you should 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 wish to sort 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 part, which makes it very straightforward 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 potential to change the colour and measurement 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 straightforward implementation, React Icons will be the solely icon library you want on your React initiatives.
5 Helpful React Icon Libraries Not in React Icons Library
That stated, when you can’t discover your excellent icons or wish to strive different choices, the next are some icon libraries that aren’t included in React Icons (not less than for now).
1. MUI Materials Icons
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 fast growth and deployment of initiatives.
MUI Materials icons get pleasure from longstanding help 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 authentic Materials Icons, MUI’s implementation seems barely extra intuitive.
An instance is proven beneath, so make your personal judgment. (Ignore the colours, as they are often modified).
Google’s Materials Icon and MUI’s implementation respectively
In case you’re prepared to provide MUI a strive, you’ll be able to confer with its documentation relating to putting in the React package deal and importing icons. It additionally helps configure measurement and coloration.
2. Font Superior Professional
Font Superior is a vastly common library and the second most used font script expertise on the Web simply behind Google Fonts. It presents a variety of icons overlaying 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 part, AngularJS, Vue, and naturally React.
At present, it presents 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.
In case 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 few of the paid plan options embrace:
- simpler customizability for measurement, coloration, 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 initiatives utilizing 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 undertaking with a couple of instructions. Font Superior’s documentation on utilization is kind of detailed and greater than sufficient to get began.
Looking and navigating by way of icons is seamless and contains numerous classes when you’d favor navigating manually slightly than looking out 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 is just not solely an incredible React icon library however top-of-the-line 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 may 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 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 help if you wish to do it that manner. Making modifications on IconPark is kind of straightforward — 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 undertaking.
At present, it holds practically 8k GitHub stars however solely 3k weekly npm downloads for now. In case you’d like to provide 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 provide ready-to-use copyable codes, you may wish to strive it when 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 method to divide icons into semantic icons and ornamental icons and embrace 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 Phase’s Icons
Evergreen Phase 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 Phase presents over 500 icons with a singular fashion that will suit your wants.
Though it doesn’t embrace model icons, its icons for primary performance aren’t to be disregarded. It presently holds over 12k GitHub stars, however they’re principally 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 in all probability go up from right here.
Directions on set up and utilization might be present in its documentation. Curiously, 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 common React icon libraries, is actively maintained, and is straightforward to make use of, it could in all probability be the only option for you as a React developer. Its massive arsenal of icon units is sufficient to sort out any use case you could want.
However when 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 could assist you 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.
