IcoFont Gives You 2100+ Free Icons in a Single Font File

By Jake Rocheleau. in Graphics. Updated on June 15, 2017.

With the rise of web fonts and embeddable CSS fonts, it’s much easier nowadays to create truly unique websites from scratch.

The newest trend is icon fonts that are usually smaller than images, much easier to scale, and they’re crystal clear on all screen sizes (including retina). You can find plenty of these icon fonts online but IcoFont really takes the cake.

This free icon typeface comes with over 2,100 icons, all bundled up into a single font file.

Read Also: 3 Free Web Font Services Compared

You can download the raw source with all icons or only certain icon “families” such as currency, business, social, or mobile UI (among many others).

The website acts like an online documentation for all these icons, so you can copy/paste the codes into your site quickly. IcoFont icons work much like FontAwesome icons which, for instance, are used by default in the Bootstrap framework.

Everything works through the <i> element that requires two CSS classes:

the default IcoFont class
a class for each type of icon

For example, to add a castle icon to your document you’d add something like this to your layout:

<i class="icofont icofont-castle"></i>

You can technically add these icons to any element you like but the default code from IcoFont relies on <i> elements.

Note this library should not be confused with a program called Icofont which is not a library at all but an interface for managing icon fonts inside your RoR applications. Since this program has the same name as the IcoFont library it can be tough Googling for more info.

This library is still very new and I can’t find it on GitHub or anywhere else on the web. But, if you’re looking for more info I highly encourage visiting the website and downloading a copy. You’ll find all the proper source code right there and you can even browse all icons by category to see what’s in the set.