7 popular icon libraries you can use for free
Tags: javascript
Published: 2020-07-31 13:17:45

---
title: 7 popular icon libraries you can use for free
published: true
date: 2020-07-24 13:00:16 UTC
tags: javascript
canonical_url: https://blog.logrocket.com/7-popular-icon-libraries-you-can-use-for-free/
---
**Written by [Nathan Sebhastian](https://blog.logrocket.com/author/nathansebhastian/)**✏️

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.

![Google Mic Icon](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/google-mic-icon.png?resize=720%2C249&ssl=1)

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.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## 1. Feather

![Feather Logo](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/feather-logo.png?resize=200%2C200&ssl=1)

[Feather](https://github.com/feathericons/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.

![Feather Icon Collection](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/feather-icon-collection.png?resize=720%2C351&ssl=1)

At the time of this writing, [Feather has a collection of 282 icons](https://feathericons.com/) that you can tweak in terms of size, stroke width, and color.

To use a Feather icon, install its package.

```jsx
npm install feather-icons
#or
yarn add feather-icons
```

You can also fetch it from a CDN.

```jsx
<!-- 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](https://github.com/feathericons/feather#related-projects) that make it easier to use icons inside modern popular frameworks such as Angular, Vue, and React with little hassle.

## 2. Font Awesome

![Font Awesome Logo](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/font-awesome-logo.png?resize=200%2C200&ssl=1)

Developed in 2012 by Dave Gandy, [Font Awesome](https://fontawesome.com/) 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](https://fontawesome.com/plans) that includes 6,000 more icons with faster icon loading, more kits, more icons, more tools, and actual human technical support.

![Font Awesome Icon Collection](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/font-awesome-icon-collection.png?resize=720%2C394&ssl=1)

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

![Bootstrap Logo](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/bootstrap-logo.png?resize=200%2C200&ssl=1)

The most popular CSS framework now has its own [icon library](https://icons.getbootstrap.com/) 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](https://icons.getbootstrap.com/#install) 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 Logo](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/ionicon-logo.png?resize=200%2C200&ssl=1)

[Ionicons](https://ionicons.com/) 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.

![Ionicons Homepage](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/ionicons-homepage.png?resize=720%2C553&ssl=1)

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.

```jsx
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
```

Then, use the special `ion-icon` component to render the icons.

```jsx
<ion-icon name="heart"></ion-icon>
```

## 5. css.gg

![css.gg Logo](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/cssgg-logo.png?resize=200%2C200&ssl=1)

[css.gg](http://css.gg) is a unique icon library that was written entirely in CSS. It includes more than 700 UI icons and it’s completely free.

One of the most noteworthy things about css.gg is that each individual icon page displays the source code of how the icon was built. Check out this [Git Pull icon](https://css.gg/git-pull), for example.

Because the icons were made using pure CSS, they’ll render super quickly because they don’t require any other resource.

![css.gg Homepage](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/cssgg-homepage.png?resize=720%2C355&ssl=1)

css.gg was [created by Astrid Malsija](https://dev.to/godspowercuche/why-how-i-built-css-gg-a-life-story-1o6f-temp-slug-1878767) as a personal project, but it caught the attention of the community and several designers have contributed to add an SVG version, a designer pack for [Figma](https://www.figma.com/community/file/834587122842084475) and [Adobe XD](https://xd.adobe.com/view/258f1c41-07d1-4036-7c67-f9f75a375f91-53be/), and web components for [React](https://github.com/astrit/css.gg#react).

![Playing With css.gg Icons](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/playing-with-cssgg-icons.png?resize=720%2C353&ssl=1)

These icons also scale well because they’re retina-ready by default. You can scale the icon size easily by defining the `--ggs` to multiply the icon size. If you want to [use css.gg icons for your project](https://github.com/astrit/css.gg#table-of-contents), you can install the package, use the CDN link, download the SVG, or use React’s components.

## 6. Tabler Icons

![Tabler Icons Logo](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/tabler-icons-logo.png?resize=200%2C200&ssl=1)

Tabler Icons is a set of over 550 free, MIT-licensed SVG icons. Each icon is designed on a 24×24 grid and a 2px stroke.

To use Tabler Icons, install the library from npm or simply download it from GitHub.

Just like Feather, Tabler also includes the `stroke-width` CSS attribute to enable you to produce different icon variants.

![Tabler Icons Stroke and Width Properties](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/tabler-icons-stroke-width-properties.png?resize=480%2C152&ssl=1)

You can place Tabler Icons as `<img>`, `background-image`, and inline in HTML code. To learn more about this package and see full installation instructions, visit the source code on [GitHub](https://github.com/tabler/tabler-icons).

## 7. React Icons

![React Icons Logo](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/react-icons-logo.png?resize=200%2C200&ssl=1)

Unlike the aforementioned icon libraries, [React Icons](https://react-icons.github.io/react-icons/) is an icon compilation library that enables you to add icons from various libraries into your React project as an SVG element.

To add an icon, install the package and import it into your components file.

```jsx
# Install the package
npm install react-icons
# or
yarn add react-icons


// FaBeer component will be rendered as an SVG..
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}
```

![React Icons Homepage](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/react-icons-homepage.png?resize=720%2C333&ssl=1)

React Icons includes icons from the following libraries.

- [Ant Design Icons](https://react-icons.github.io/react-icons/icons?name=ai)
- [Bootstrap Icons](https://react-icons.github.io/react-icons/icons?name=bs)
- [Devicons](https://react-icons.github.io/react-icons/icons?name=di)
- [Feather](https://react-icons.github.io/react-icons/icons?name=fi)
- [Flat Color Icons](https://react-icons.github.io/react-icons/icons?name=fc)
- [Font Awesome](https://react-icons.github.io/react-icons/icons?name=fa)
- [Game Icons](https://react-icons.github.io/react-icons/icons?name=gi)
- [Github Octicons icons](https://react-icons.github.io/react-icons/icons?name=go)
- [Grommet-Icons](https://react-icons.github.io/react-icons/icons?name=gr)
- [Ionicons](https://react-icons.github.io/react-icons/icons?name=io)
- [Material Design icons](https://react-icons.github.io/react-icons/icons?name=md)
- [Remix Icon](https://react-icons.github.io/react-icons/icons?name=ri)
- [Typicons](https://react-icons.github.io/react-icons/icons?name=ti)
- [Weather Icons](https://react-icons.github.io/react-icons/icons?name=wi)

Only imported icons are included in your build to prevent bloating your bundle with unused icons.

## Conclusion

No matter what kind of application you create, it’s nice to have a set of icons to help users navigate and interact with your interface. Generic icons that are universally recognized will help users feel more comfortable and engaged when using your application. Since most icons used for application development are free anyway, there’s no reason not to include them in your project.

When choosing an icon library for your application, be sure to check out each library’s website and search for the icons that are essential for your application.

* * *
## [LogRocket](https://logrocket.com/devto): Debug JavaScript errors easier by understanding the context 

Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them. 

[LogRocket](https://logrocket.com/devto) allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exavtly what the user did that led to an error. 

![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/06/reproduce-javascript-errors.gif?ssl=1)

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier. 

[Try it for free.](https://logrocket.com/signup/) 
* * *

The post [7 popular icon libraries you can use for free](https://blog.logrocket.com/7-popular-icon-libraries-you-can-use-for-free/) appeared first on [LogRocket Blog](https://blog.logrocket.com).