SofTeCode Blogs

One Place for all Tech News and Support

Top 10 SVG icons library

6 min read
Annotation 2020 05 02 120208 Top 10 SVG icons library
0
(0)

Last week I started a thread on Reddit asking fellow developers an easy question: which is your favorite icon library? The post quickly became popular and that I acknowledged a few lot of other awesome open-source icon libraries that I even have never heard of. I made a decision to make a blog post listing the ten best open-source icon libraries supported the Reddit thread.

Please do remember that each one of the libraries listed below is completely open-source as I even have checked the licensing terms and conditions. Another condition for the libraries below is that they have to possess a contemporary and up so far design. So let’s begin:

Font Awesome

I believe most folks have used Font Awesome icons a minimum of once so far as they were one among the primary highly popular open-source icon libraries to be released. As of now they need a complete of 1,588 free icons and seven,842 pro icons in their gallery.

Probably one among the most reasons Font Awesome remains being largely used is due to the large collection of varied icons they need to supply. Our website actually uses Font Awesome Pro’s duotone icons and that we believe that it makes our website stand out a touch more compared to other similar websites.

Another interesting feature Font Awesome has got to offer maybe a personalized CDN link that you simply can generate if you create an account. By doing this, you’ll conditionally exclude regular icons but use only the duotone ones.

Of course, you’ll also prefer to only include a few icons by copy-pasting the SVG code directly, which I do recommend if you are doing not use quite 20-30 icons on your website.
In conclusion there are some ways of using Font Awesome, like copying the SVG source of one icon, downloading the library or by employing a public or their own CDN. they need an excellent page to assist you to start with Font Awesome.

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 easy the planning of the outlines and shapes are. i might definitely recommend trying it out for your next project.

Using ionicons is well documented and if you would like to use the entire library rather than just standalone SVG’s, you’ll include the subsequent script within the footer:


<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

Afterward just add the subsequent element in your HTML template and alter the name attribute to match the icon that you simply want to point out like this:


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

You can read more about the essential usage from their official website.

CSS.gg

If you’re a lively member of the dev community on Reddit, perhaps you noticed a replacement icon library being released which uses only CSS for stylings. Currently, it features over 704 standalone icons supported categories like alerts, arrows, code, design and lots of more.

Annotation 2020 05 02 120908 Top 10 SVG icons library

There are 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 supply a wider range of implementations.

Getting started with CSS.gg is as easy as running an npm -i css.gg command and by later including the subsequent stylesheet inside your head tag:


<link href='https://css.gg/css' rel='stylesheet'>

Of course, there are CDN alternatives also, like using UNPKG or JSDelivr like this: You can read more about getting started with CSS.gg on the repo’s official getting started instructions.


<!-- 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'>

Feathericons

Feathericons is another excellent looking and clean set library featuring 282 SVG icons. By default, it comes only with SVG because the main format, but that’s also ok because it’s immediately the recommended way of using icons because it is that the fastest.

Annotation 2020 05 02 121056 Top 10 SVG icons library

I like that you simply can configure the sizing, stroke width, and color of the icons before you download them. you’ll also switch dark and lightweight mode by clicking on the moon icon on the upper right side of the web site.

Getting started with Feathericons is as easy as downloading an SVG file and including it in your markup by either employing an src or by using it as an inline SVG object.

Eva Icons ❤️

Eva Icons may be 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 that i love the very fact that you simply can select out of the box zooming, pulsing or shaking animations on hover.

eva open source icon library Top 10 SVG icons library
Getting started with Eva Icons is simple by downloading the SVG or PNG file after selecting the icon of use or by downloading the entire set of icons. you’ll 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 description style but also offering a dark and white version of every element. the looks of the icons is extremely premium and well crafted.

heroicons svg open source icons Top 10 SVG icons library
Getting started with these icons is as easy as clicking on one among the icons and copying the inline SVG code that you simply can use directly in your projects. i prefer the very fact that they also offer the library in Figma. If you’d wish to include all of the icons you’ll download all SVG files from the general 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 that i think it does stand call in terms of design. If you wish to use Bootstrap as a CSS Framework, you ought to really think about using Bootstrap 5 Icons for your next project.

bootstrap 5 svg icons preview Top 10 SVG icons library
Getting started with Bootstrap 5 icons is as easy as copying the SVG code then you’ll use it however you see fit, whether by using it inline, including it as a source for a picture or by creating pseudo code classes in CSS. Either way, their website clearly explains the implementation methods.

Remix Icon

Remix Icon may be a large collection of lovely 2149 open source icons under the Apache License. There are various categories of icons to settle on from like business, communication, finance, map, and lots of more. It’s definitely worth a glance.

Getting started with Remix Icon is sort of easy by having the ability to download SVG or PNG version or by directly copying to the clipboard the inline SVG code. Alternatively, you’ll also prefer to download the entire package as single .svg files or as an SVG sprite file.

Octicons

Octicons may be a set of over 100 open source icons that Github also uses for his or her main website. Apparently, they’re already performing on a second version of the library by improving the planning and sort of icons.

A huge advantage of Octicons is that the incontrovertible fact that you’ll also catch on as a ready-to-use package in React, Ruby, Rails, Jekyll, and Javascript. Here are all the packages that you simply can use to urge started working with Octicons.

Ikonate

Last but not least Ikonate is another awesome open source icon library featuring around 100 flat design based premium icons. it’s generously licensed under the very permissive MIT License.

You can easily configure the dimensions, border width, border cap & corners, and color of the icons before exporting. within the export ZIP file you’ll get a HTML file with all the chosen inline icons, also a folder with separate SVG files and a sprite sheet also. In conclusion please support these libraries by giving them a Github star and letting them skills awesome of employment they did. Consider sharing this list together with your friends or colleagues if you haven’t selected employing a specific icon library for your next project.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

1 thought on “Top 10 SVG icons library

Give your views

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search

Social Love – Follow US