During the design of your website you have undoubtedly needed them: icons, also called icon fonts. They come in all shapes and sizes, and are often available for free. In order to meet the demand of minimalist website design, the large supply has become more or less a necessity.
In this blog we present an overview of the icon fonts where a distinction is made between free and paid options. On certain websites you will be asked to refer to the icon font source when putting it on your website. And this is mainly the case with free variants.
Most of the time this is not considered convenient by web developers as it gives an amateuristic appearance on a webpage. Therefore we mentioned in this whether it is the case you have to give a reference when using the icon font.
The follow-up of this blog will be about how you can best implement the icon fonts in your website and how to determine which icons are suitable.
Our top 10 icon fonts websites and tools
Option 1: Font-awesome (free and paid option)
Font-Awesome is one of the most widely used icon sets and toolkits for developers. The biggest advantages of Font-Awesome are that you can choose out of more than 7.000 icons! The icons are very customizable as they are very css friendly. In addition, their library made it super easy to add the icon to your website and the tool is easy to use as well.
Moreover, It is also possible to add your own created icons to Font-Awesome.
Option 2: IconMoon (free and paid option)
IcoMoon has over 5000 open source icons available in their library. All IcoMoon icons are designed on a precise pixel grid, making the icons look attractive on any website.
With the extra feature ‘IcoMoon app’ you can create your own icon packages and use them in many different formats, including SVG, polymer, PDF, XAML, CSH, icon font with ligatures or good old PNG / CSS-sprites. IcoMoon offers both free and paid variants.
Option 3: Dashicons (free)
Dashicons is the official icon font of the WordPress administrator from 3.8 onwards. Since 2018, no new icons have been created but there is a whole list (more than 300 icons) to choose from. The icons are very compatible with Gutenberg, which is the standard pagebuilder of WordPress.
Option 4: Bytesize (free)
Each Bytesize icon is hand coded along a 32×32 grid and uses a SVG line for maximum style flexibility; meaning you can adjust the weight, color, size and shape of the icons.
If your goal is to build an uber lightweight website, then Bytesize is definitely a good option. All their 84 icons weigh only 9kb in minified form and 2kB in SVGZ or Gzipped.
Option 5: Flaticon (free)
A good option for unique and fun icons is Flaticon. With the free version you can download up to 10 icons per day. The icons weigh around 16 kb each. However, the disadvantage is that if you use the free version, you will have to reference the source of the icon on your webpage.
Option 6: Fontello (free)
Fontello is a free icon font generator, where you can discover and build new icons. There are standard icons available but it is also possible to convert vector images into an icon font. You can also upload your own images and have them converted.
Option 7: Free Icon Shop (free)
Just like Free Icon Shop, this is a good (free) option for unique and good looking icons. The advantage of this website is that there is no need to mention the source. The disadvantage is that the website does use advertising which hinders you from downloading the icons.
Option 8: Iconfinder (free)
On Iconfinder you can choose from more than five million icons! Approximately 319 thousand of them are free. Via the search function you can set whether you are looking for free or paid icons. You can also indicate if you are willing to put a backlink on your website for the icon packs where this is obligated. So you can filter in such a way that the website only shows the icons that you can use completely for free.
Option 9: Envato (often paid)
In addition to many other images, Envato also offers icons. Most icon packages are paid for but you have so much choice on this platform that it is not difficult for you to find a unique set of icons.
Option 10: Emojipedia (free)
Of course you can also just use classic icons: emojis. These are very easy to integrate into your website and are all freely accessible. They also weigh almost nothing.
So plenty of options to choose from..
As you now know, there are a lot of options that can help you in finding your ideal set of icons. Let us know what your favorite website/tool for icons is, in a comment at the bottom of this blog.