15 Useful Icon Fonts

Icon Fonts are much similar with the common Wingdings or Dingbat fonts, but icon fonts are specially designed for web user interface. In CSS, icon fonts use the CSS @font-face rule to display icons in web browsers. Here are 15 Useful Icon Fonts that you can use not just for your web design but as icon sets for all your design needs.



If you like icon design, you’ll love our favorite icon designs, check them out here on Envato Market. They are fully licensed and ready for client work!

AUTICONS

Auticons is an icon font and CSS set that harnesses the awesome power of attribute selectors.

icon-fonts-16

IconVault

icon-fonts-17

Font Awesome

the iconic font designed for use with Twitter Bootstrap.

icon-fonts-2

Symbolsets

Symbolsets are semantic symbol fonts. They work in modern browsers and anywhere OpenType features are supported.

SSSocial-Set-1

Typicons

Typicons are free-to-use vector icons embedded in a webfont kit for easy use in your UI, whether it be on the web or in a native application.

typeicon-3

Modern Pictograms

Modern Pictograms is a free open type front that contains common images used in web interfaces.It can be used by designers or to create wire frames and is also compatible with @font-face.

modern-picto-4

Fontello

This tool lets you combine iconic webfonts for your own project. With fontello you can: shrink glyph collections, minimizing font size, merge symbols from several fonts into a single file, access large sets of professional-grade open source icons.

fontello-5

Fico

Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face.

fico-6

Social Media Icons Pack

Socialico is a package of 74 social media icons, combined within a single wieght font and designed by Jelio Dimitrov a.k.a. Arsek.

socialico-8

OpenWeb Icons

The OpenWeb Icons are a set of icons to show the support for the Open Web!

openweb-7

IcoMoon

IcoMoon is a free icon set of 300 superb icons, also available as Web Font. Use the @font‑face method to have your icons in vector and in any size or color. You may basically add any CSS effect you wish. IcoMoon is fully accessible and compatible with screen readers.

icomoon-9

Arrow

Never design an arrow again. Arrrows is a fully scalable icon font for your design.

arrow-10

Foundation Icon Fonts 2

Custom icon sets that are stored in a handy web font and are coded to be more accessible. A couple lines of CSS and the right markup will get you going in no time.

zurb-11

Pictos

Pictos is a set of icons made by Drew Wilson. The icons are beautifully made and so easy to use in any design.

pictos-13

Sosa

Sosa includes the 120+ icons I have found most useful. The download includes the .ttf .eot .svg & .woff files need to use this icon font via @font-face.

sosa-12

Ligature Symbols

Ligature Symbols is to display the symbol with a ligature features.

ligature-14

StateFace

A font you can use in your web apps when you want tiny state shapes as a design element. It’s designed to be used at small sizes, and the shapes have been highly simplified to make for a really small font. All 50 states plus D.C. and a wee continental U.S. map fit in about 22k, and they look great on Retina displays.

state-15

0 Comments

  1. Tobiassays:

    Hi, great article!
    I will use these icons in my project =). These webdev icons are also good – https://mobiriseicons.com/ free and open source icon font and svg vector.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.