As web developers, we use icons to make our websites and apps more visually appealing, navigable, and engaging. Icons are recognized patterns that the vast majority of users are familiar with. For instance, a microphone icon in a web or mobile application almost always indicates some kind of voice command or recording functionality.
Icons are useful precisely because they are universal symbols. In many cases, icons can even replace text entirely.
In this tutorial, we’ll explore and compare some of the most popular icon libraries you can use in your next JavaScript project. These icon libraries are very simple to set up and they all allow you to import just the icon you need instead of the entire collection. Best of all, they don’t cost a thing.
Below are the top 7 icon libraries you can use for free:
- Feather
- Font Awesome
- Bootstrap Icons
- Ionicons
- css.gg
- Tabler Icons
- React Icons
1. Feather
Feather is a collection of clean, beautiful open-source icons that are generally used to help users navigate and operate applications. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency, and flexibility.
All the icons in Feather are SVG-based, meaning you can use them inside most HTML and CSS attributes, such as img, background-image, inline, object, embed, iframe, etc.
At the time of this writing, Feather has a collection of 282 icons that you can tweak in terms of size, stroke width, and color.
To use a Feather icon, install its package.
npm install feather-icons
#or
yarn add feather-icons
You can also fetch it from a CDN.
<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
Feather has third-party libraries that make it easier to use icons inside modern popular frameworks such as Angular, Vue, and React with little hassle.
2. Font Awesome
Developed in 2012 by Dave Gandy, Font Awesome is one of the oldest and most popular icon collections available. It was originally designed for Bootstrap and later grew to become its own independent icon set. Font Awesome 5 set a record as the most funded software Kickstarter ever.
The library includes a collection of more than 1,500 icons you can use for free. It supports popular web development frameworks such as React, Angular, and Vue as well popular design tools such as Sketch and Adobe apps.
Font Awesome also has a paid premium plan that includes 6,000 more icons with faster icon loading, more kits, more icons, more tools, and actual human technical support.
Despite its huge collection, you probably won’t need more than a few icons for your application. If you’re worried about the size of your app, make sure to use the search bar on the homepage to find your icons individually instead of importing the entire library.
3. Bootstrap Icons
The most popular CSS framework now has its own icon library as of version 4. Obviously, Bootstrap Icons are designed for Bootstrap’s components and documentations. Bootstrap opted to use SVG-based icons at a time when Font Awesome was font-based.
Bootstrap Icons is currently in its alpha version with over 1,000 icons ready for use.
You can install Bootstrap Icons via npm or downloaded it manually.
Depending on your setup, you can include Bootstrap Icons in a handful of ways:
- Copy/paste SVGs as embedded HTML
- Reference via
<img>element - Use the SVG sprite
- Include via CSS
4. Ionicons
Ionicons is a high-quality icon library designed for use in web, iOS, Android, and desktop apps with support for SVG and web fonts. It comes in two versions: material design and iOS.
Although it was built for the Ionic framework, the icons are completely open-source and MIT-licensed, meaning you can use them as you see fit for any kind of project, personal or commercial.
To use Ionicons, include its CDN link in your project.
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
Then, use the special ion-icon component to render the icons.
<ion-icon name="heart"></ion-icon>
#javascript #developer
