10 open source SVG icon libraries that you can use for your next project
Last week I started a thread on reddit asking fellow developers a simple question: which is your favourite icon library? The post quickly became popular and I found out about a lot of other awesome open source icon libraries that I have never heard of. I decided to create a blog post listing the 10 best open source icon libraries based on the Reddit thread.
Please do be aware that all of the libraries listed below are completely open source as I have checked the licensing terms and conditions. Another condition for the libraries below is that they need to have a modern and up to date design. So let’s begin:
Font Awesome
I believe most of us have used Font Awesome icons at least once until now as they were one of the first highly popular open source icon libraries to be released. As of now they have a total of 1,588 free icons and 7,842 pro icons in their gallery.
Probably one of the main reasons Font Awesome is still being largely used is because of the huge collection of various icons they have to offer. Our website actually uses Font Awesome Pro’s duotone icons and we believe that it makes our website stand out a bit more compared to other similar websites.
Another interesting feature Font Awesome has to offer is a personalized CDN link that you can generate if you create an account. By doing this, you can conditionally exclude regular icons but use only the duotone ones.
Of course you can also choose to only include a couple of icons by copy-pasting the SVG code directly, which I do recommend if you do not use more than 20-30 icons on your website.
In conclusion there are many ways of using Font Awesome, such as copying the SVG source of a single icon, downloading the library or by using a public or their own CDN. They have a great page to help you get started with Font Awesome.
Flowbite Icons
Flowbite Icons is a free and open-source SVG icon library that includes over 430+ outline and solid style icons specially crafted for usage with the Flowbite UI component library and the utility-first Tailwind CSS framework.
The interface that you can use on their website allows you to copy-paste the source code as raw SVG or as React (JSX) format and you can use the range slider controls to customize the size and stroke width of the icons. It's easy to update the size and color of the icons using the utility classes from Tailwind CSS.
One more feature is that all of the icons are also available via their Figma file on the community page so it's easy to collaborate across a team of designers and developers by having the same icons in two differrent tools.
To use the icons is very easy and straightforward by simply copy and pasting the code inside your project because they are simple vectorial SVG icons.
Check out the following links to start using Flowbite Icons inside your project:
Ionicons
Ionicons.io is another open source SVG powered icon library featuring 457 standalone icons with three different styles: outline, filled and sharp. I particularly like how clean and straightforward the design of the outlines and shapes are. I would definitely recommend trying it out for your next project.
Using ionicons is well documented and if you want to use the whole library instead of just standalone SVG’s, you can include the following script in the footer:
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
Afterwards just add the following element in your HTML template and change the name attribute to match the icon that you want to show like this:
<ion-icon name="heart"></ion-icon>
You can read more about the basic usage from their official website.
CSS.gg
If you’re an active member of the dev community on Reddit, perhaps you noticed a new icon library being released which uses only CSS for stylings. Currently it features over 704 standalone icons based on categories such as alerts, arrows, code, design and many more.
There have been some debates about whether it’s better to use CSS or SVG in terms of performance, but the creator of the library @astritmalsija later released SVG, SVG Sprite, Figma and Adobe XD formats for version 2 to offer a wider range of implementations.
Getting started with CSS.gg is as easy as running a npm -i css.gg command and by later including the following stylesheet inside your head tag:
<link href='https://css.gg/css' rel='stylesheet'>
Of course there are CDN alternatives as well, such as using UNPKG or JSDelivr like this:
<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>
<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
You can read more about getting started with CSS.gg on the repo’s official getting started instructions.
Feathericons
Feathericons is another very good looking and clean set library featuring 282 SVG icons. By default it comes only with SVG as the main format, but that’s also ok because it is right now the recommended way of using icons as it is the fastest.
I like that you can configure the sizing, stroke width and color of the icons before you download them. You can also switch dark and light mode by clicking on the moon icon on the upper right side of the website.
Getting started with Feathericons is as easy as downloading a SVG file and including it in your markup by either using a src or by using it as an inline SVG object.
Eva Icons ❤️
Eva Icons is a set of 480 beautifully crafted open source icons served both in SVG and PNG format. There are two main outlined and filled styles and I love the fact that you can select out of the box zooming, pulsing or shaking animations on hover.
Getting started with Eva Icons is straightforward by downloading the SVG or PNG file after selecting the icon of use or by downloading the whole set of icons. You can also include Eva Icons by installing the NPM package like this:
npm i eva-icons
Heroicon
Heroicons is another awesome open source icon library built by the creators of Tailwind CSS. It features over 165 standalone icons with a fill and outline style but also offering a dark and white version of each element. The appearance of the icons is very premium and well crafted.
Getting started with these icons is as easy as clicking on one of the icons and copying the inline SVG code that you can use right away in your projects. I like the fact that they also offer the library in Figma. If you’d like to include all of the icons you can download all SVG files from the public repository.
Bootstrap icons
A few weeks ago I wrote about the new Bootstrap 5 icons by comparing it to Font Awesome. Currently it features over 600 custom SVG powered icons and I think it does stand out in terms of design. If you like using Bootstrap as a CSS Framework, you should really consider using Bootstrap 5 Icons for your next project.
Getting started with Bootstrap 5 icons is as easy as copying the SVG code and then you can use it however you see fit, whether by using it inline, including it as a source for an image or by creating pseudo code classes in CSS. Either way their website clearly explains the implementation methods.
Remix Icon
Remix Icon is a large collection of beautiful 2149 open source icons under the Apache License. There are various categories of icons to choose from such as business, communication, finance, map and many more. It’s definitely worth a look.
Getting started with Remix Icon is quite easy by being able to download SVG or PNG version or by directly copying to the clipboard the inline SVG code. Alternatively you can also choose to download the whole package as single .svg files or as a SVG sprite file.
Octicons
Octicons is a set of over 100 open source icons which Github also uses for their main website. Apparently they are already working on a second version of the library by improving the design and variety of icons.
A huge advantage of Octicons is the fact that you can also get it as a ready-to-use package in React, Ruby, Rails, Jekyll and Javascript. Here’s all the packages that you can use to get started working with Octicons.
Ikonate
Lastly but not least Ikonate is another awesome open source icon library featuring around 100 flat design based premium icons. It is generously licensed under the very permissive MIT License.
You can easily configure the size, border width, border cap & corners and color of the icons before exporting. In the export ZIP file you’ll get a html file with all the selected inline icons, also a folder with separate SVG files and a sprite sheet as well.
Unicons from Iconsout
Another awesome set of SVG icons based on the Apache 2.0 license is the Unicons set from Iconscout. What I particularly like about this icon pack is the way they are organized in categories so it is easy to select an icon based on your needs.
You can download any icon separately as a SVG element and you can also change the color of the icon using the colorpicker in the right sidebar. Another awesome feature is that you can get the code as a font library or for Vue and React.
In conclusion please support these libraries by giving them a Github star and letting them know how awesome of a job they did. Consider sharing this list with your friends or colleagues if you haven’t decided on using a specific icon library for your next project.
Check out some awesome free and premium Bootstrap Themes, Templates and UI Kits from Themesberg.