As great as images are, we can’t use them anywhere when we design a website. They add file weight, require http request, and they don’t scale well. In general, they add to the websites load speed, which is bad.

That’s why if we want to add icons to our navigation menus, or anywhere on our web page, we use icon fonts.  Icon fonts are fonts that doesn’t use the alphabet, instead it replaces the letters with icons. Also icon fonts doesn’t add any weight, nor they require https requites. They also scale well, don’t lose quality when scaled, easy to change color and more.

The Features of Icon Fonts

  • Easy Color Change
  • Include Shadows easily
  • Have Good Browser Support
  • Can use text based css
  • Have smaller file sizes
  • Can do anything images can
  • Easily Scaleable
  • Can be design on the fly, by making changes on :hover etc..
  • And a ton more.

A list of Free Icon Fonts

Now that we know what icon fonts are, and why are they better to use then image icons, here are some icon fonts you should check out and maybe use in your future projects.

The Elegant Icon Font

The Elegant Icon Font

Linecons Free – Free Line-Styled Icons

Linecons Free - Free Line-Styled Icons

Icons V.3 by Hüseyin Yilmaz

Icons V.3 by Hüseyin Yilmaz

Elusive Icons

Elusive Icons

Font Awesome Free Icon Font

Font Awesome Free Icon Font

Open Iconic – A Highly Legible Icon Font

Open Iconic – A Highly Legible Icon Font

Outlined Icons by Dario Ferrando

Outlined Icons by Dario Ferrando

Minimal – A Minimally Designed Icon Font

Minimal – A Minimally Designed Icon Font

Feather Icon Set – A Beautifully Simple Icon Font

Feather Icon Set – A Beautifully Simple Icon FontIcon Shock Icon Font

Icon Shock Icon Font Stackicons Social Icon Font

 Stackicons Social Icon Font

Goodies Icon Font

Goodies Icon Font

Socialicious – A Social Media Icon Library

Socialicious – A Social Media Icon Library

Infinity Space Icon Font

Infinity Space Icon Font

Mono Social – An Icon Font Based on the Mono Social Icon Set

Mono Social – An Icon Font Based on the Mono Social Icon Set

Map Icons – An Icon Font for Use with Google Maps

Map Icons – An Icon Font for Use with Google Maps

Weather Icon Font – A Weather Themed Icon Font

Weather Icon Font – A Weather Themed Icon Font The Icony Icon Font

 The Icony Icon Font

Ionicons – The Huge Icon Font for the Ionic Framework

Ionicons – The Huge Icon Font for the Ionic Framework

Icon Pack – A Line-Styled Icon Font from Petras Nargela

Icon Pack – A Line-Styled Icon Font from Petras Nargela

Metrize Icons – A Metro-Style Icon Font

Metrize Icons – A Metro-Style Icon Font

Iconia – An Icon Font With Three Styles: Regular, Circle and Cut

Iconia – An Icon Font With Three Styles: Regular, Circle and Cut

Dripicons – A Completely Free, Vector Line-Icon Font

Dripicons – A Completely Free, Vector Line-Icon Font

Linea Iconset

Linea Iconset

Stroke 7 Icon Font

Stroke 7 Icon Font

Icon-Works

Icon-Works

Tonicons Outline Icons

Tonicons Outline Icons

Batch Icons

Batch Icons

MFG Labs Web Icon Set

MFG Labs Web Icon Set

Premium Pixels Mini Icons

Premium Pixels Mini Icons

Social Media Icons

Social Media Icons

Social Media Glyph Set

Social Media Glyph Set

 

Foundation Icons Fonts

Foundation Icons Fonts

Raphaël Icon-Set

Raphaël Icon-Set

Entypo

Entypo

Heydings Icons

Heydings Icons

Signify Lite

Signify Lite

ikoo

ikoo

WebAgency Free Icon Set

WebAgency Free Icon Set

Rondo Social Icon Font

Rondo Social Icon Font

MFG Labs Icon set

MFG Labs Icon set