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:
