Free Icon Sets for Your Website – Web Fonts, SVGs, PNGs, Free Downloads, Open Source

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:




Free Pack of 490 vector icons

Github –

Download these icons to use as SVG, PNG or use their app to produce a set of web fonts you can use with CSS


IconScout – Unicons


Free Pack of 1000+ vector icons

Github –

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="">

Put this into the body where you want the icon:

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



Ikonate icons are customisable and highly optimised out of the box SVG sprites.

Github –

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.

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


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.

GitHub –



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.

Github –


These icons have great developer documentation 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=""

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

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

<img src="">


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.

Github –

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

<script src=""></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:


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.

Github –

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

<script src=""></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



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 –



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. It also has icons as web fonts.

Add this script to the head of your document:

<script src=""></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.

Github –


Originally meant for video games, these icon sets have many other applications and are certainly different. They have an icon editor that lets you fully customise the icon before exporting it as an SVG or PNG

Github –






Free, open source, vector icon collection including 538+ scalable icon pack

Github –

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

Can we help you offer more to your clients?
Speak to our team to find out how our services can compliment your creative work

Get in touch