Free Icons for Everyone

What I find when designing and building websites, is there will inevitably be a point where you come across the need for icons. What do you do? Crank up Illustrator and craft your own? Why not use some of these free, open source, icon sets with a nice bit of CSS styling instead?

Below you will find a list of free icon sets with options for SVG, PNG and other formats for download and many delivering their icon sets via content delivery network as web fonts. Take a look at their Github readme, if it’s available for the icon sets, for full instructions and extra information. A great resource and time saver:

IconMoon 

Free Pack of 490 vector icons https://icomoon.io/preview-free.html

Github – https://github.com/Keyamoon/IcoMoon-Free

Download these icons to use as SVG, PNG or use their app to produce a set of web fonts you can use with CSS https://icomoon.io/app/#/select

IconScout – Unicons

Free Pack of 1000+ vector icons https://iconscout.com/unicons

Github – https://github.com/iconscout/unicons

Download these icons to use as SVG or use them as web fonts straight away by inserting the following code in the head of your document:

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v0.0.2/css/unicons.css">

Put this into the body where you want the icon:

<i class='uil uil-comments'></i>


Ikonate

Ikonate icons are customisable and highly optimised out of the box SVG sprites. https://www.ikonate.com/#content

Github – https://github.com/mikolajdobrucki/ikonate

CSS-tricks has a great article on how to use SVGs in your projects

Flat Icon

Here you will find a massive collection of free icons to download in PNG, SVG, EPS, PSD and BASE 64 formats. https://www.flaticon.com

They have a nice tool that lets you create your own custom @font-face from any icon set you like, as long as you have permission https://www.flaticon.com/font-face

Bytesize – Tiny styel-controlled SVG iconset

On this website, each icon is hand-coded along a 32×32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square.  https://danklammer.com/bytesize-icons

GitHub – https://github.com/danklammer/bytesize-icons

Material Designs

Material designs have a nice selection of open source, sharp icons that you can use as web fonts Each symbol is available in five themes and a range of downloadable sizes and densities. https://material.io/tools/icons/?style=baseline

Github – https://github.com/google/material-design-icons

These icons have great developer documentation https://google.github.io/material-design-icons and you can easily set them up to use as google web fonts by placing the code in the head of your document:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

Then using them in the body with:

<i class="material-icons">face</i>


Icons 8

The Icons 8 site host free sets of icons among a large number of other icons that require author attribution https://icons8.com/icons/set/free

These icons can be downloaded as SVGs or embeded from icon8 in the form of images with the following code:

<img src="https://img.icons8.com/ios-glyphs/30/000000/boy.png">


Eva Icons

Eva Icons is an icon pack of more than 480 beautifully crafted open source icons for common actions and items. You can download the set on desktop to use them in your digital products for Web, iOS and Android. They have options to apply animations or filled and outline. https://akveo.github.io/eva-icons/#/

Github – https://github.com/akveo/eva-icons

Eva Icons offer a CDN option you can load in your project with the following code:

<script src="https://unpkg.com/eva-icons"></script>

For the full animation implementation these icons will need to use a bit of javascript. Pop the code in the body of your document:

<i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>

Then call the script in the foot of the document before the closing </html> tag:

<script>
eva.replace()
</script>


Feather Icons

This set has 274 free, open source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and usability. You can download each icon or use them in your project via CDN or grab the files from Github. https://feathericons.com/

Github – https://github.com/feathericons/feather

Get started easily with this icon set, just like Eva icons, put the following in the <head> of your document:

<script src="https://unpkg.com/feather-icons"></script>

Then use them in the body with the following:

<i data-feather="circle"></i>

Finally call the script in the foot of your document

<script>
feather.replace()
</script>


Feather Icons React

This icon set is also available as a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and readability.

Github – https://github.com/feathericons/react-feather

Icon Monstr

Discover 4420+ free icons in 306 collections. Icon Monstr offers loads of icons for you to download as SVG, PNG, EPS and PSD, all for free. https://iconmonstr.com/ It also has icons as web fonts. https://iconmonstr.com/iconicfont/

Add this script to the head of your document:

<script src="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css"></script>

Then use the fonts with the following in the body:

<i class="im im-plus-circle"></i>


Clarity Design Icons

Clarity designs has a nice website with clear instructions for use in your project. They are scalable SVG-based icons with a system that gives you control over icon color, orientation, and size.

Additionally, you can access and customise any SVG graphic elements inside the icon through standard CSS. They are a little more complicated to use, but that’s the cost for so many options. https://clarity.design/icons

Github – https://github.com/vmware/clarity/

Game-icons.net

Originally meant for video games, these icon sets have many other applications and are certainly different. https://game-icons.net/ They have an icon editor that lets you fully customise the icon before exporting it as an SVG or PNG https://game-icons.net/studio.html

Github – https://github.com/game-icons/icons

UXWing

Free, open source, vector icon collection including 538+ scalable icon pack https://uxwing.com/

Github – https://github.com/UXWing/vector-icons

These icons are available to download individually or as the whole set of font icons

The Final Word

In conclusion, there are many more icon sets available, some not so free, others offering some free options. Fontawesome is a well known resource for icons, as too is SVGrepo where you can download a wide choice of vector graphics. The most useful icon sets are the ones you can use as web fonts and download too. Designers can put them in the website designs and developers can use them straight on the website without uploading individual images for each. A particularly useful tool is the @font-face creator by Flaticon. Whichever you choose to use, there is surely a set that will suit your needs.

Press Ctrl + D to bookmark this page

Share to: