What is an Icon Font?

Utah Teapot


An icon font is a font that contains Icon as character.

Using web font to show graphics. It is very convenient from a development perspective.

You can :

  • change the size
  • change the color
  • shadow their shape


Icon Design

Designer designs the icons. Each pictogram has been drawn for pixel perfection at a size of 20 x 20 pixels. The icons are created in a vector format (Svg)

Symbol Mapping

Multiple icons are turned into fonts. Most projects make use of maybe ten, twenty pictograms and a font containing all pictograms is then unnecessary large.

Deciding on which unicode position to use for each glyph is a huge task and also a source of great debate.

Mapping icons:

A important issue occurs when the icon fonts come pre-mapped to letters. So in the worse case, they can be read outloud by screen readers.

Font creation

There are four font formats are required for web:

The eot and woff formats are just containers for ttf



Professional (and open source, free) icon fonts:

  1. Themify (linear icon)
  2. Black Tie Light Icon (delivers also font awesome)
  3. Entypo bg Daniel Bruce
  4. Glyphicons (also bundled within Bootstrap)



Editor are not convenient for automated font processing.


Enhancing a word

<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
[data-icon]:before {
  font-family: icons; /* Icon font,  */
  content: attr(data-icon);
  speak: none; /* ???*/

Stand-Alone Icons

<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;

Documentation / Reference

Discover More
Text - (Rendering) Font

A font is a set of glyphs where each glyph represents a character. See Hack - A typeface designed for source code albert...
Data System Architecture
What is an Emoji and how to use them

This page is all about emoji characters, what they are and how you can use them to add a little bit of emotion in your content
Card Puncher Data Processing
What is an Icon?

This page is icons. They represent symbolic image. Unicode Block Miscellaneous_SymbolsMiscellaneous Symbols From 2600U+2600 to 26FFU+26FF See also: Icon font for special icon font. with the 260ETelephon...

Share this page:
Follow us:
Task Runner