Resources ⮞ Fonts ⮞ Icon Fonts

This page offers information about fonts which contain icons; this includes fonts which contain emoji icons:

Using Icon Fonts

Fonts containing icons may be used in two ways:

  1. Icons can be converted to images to be used on a site. For example, the following is an image created from an icon in the Segoe UI Emoji font … which will appear whether or not you have the font:

    Shamrock

    The above image was generated using this HTML:

    <img src="img/ex_shamrock.png" width="38" height="37" alt="Shamrock" />

    The big advantage of converting icons to images is that the images will appear whether or not the user has the font.

    Another advantage is that, if the icon is a chromatic icon, it will appear in colours to all users.

    Other advantages are that the images can be edited, for example to customize them; and the images can be incor­po­rated into image sets in which some images in the set are purpose-created for the site. For example, in the following list of icons, the first was made by converting an icon to an image, and the others were made by editing the first:

    Colour-coded folders

    The big disadvantage is that images are not scalable: for example, if the user sets their browser to use larger fonts, the images will not grow proportionately larger.

  2. Icons can be selecting by using a character entity for code points within fonts. For example, the following is a glyph from the Segoe UI Emoji font … which will appear only if the user has a font with that glyph.

    The above icon was generated using this HTML and CSS:

    <span style="font-family:'Segoe UI Emoji', sans-serif; font-size:2em;">&#x2618;</span>

    The big advantage of specifying code points from fonts is that icons can be scalable: for example, if the user sets their browser to use 20px fonts instead of the standard 16px fonts — 25% larger — the icons can also be 25% larger.

    The big disadvantage is that a font with the icon must either be installed on the user’s device, or embedded on a server. And note: embedding a font on a server will only be an option if the font is not copyrighted, or if the font’s copyright license allows it to be embedded.

    A second disadvantage is that chromatic icons will not appear in colour if the user’s browser or operating system does not support chromatic fonts.

    A third disadvantage is that many chromatic fonts do not work on many operating systems: for example, Google’s Noto Color Emoji font will not work with either MacOS or Windows.

Using icons as images is best if the site must work on a wide variety of devices, e.g. on devices running both old and new versions of Linux, MacOS, and Windows, or on devices running both old and new versions of Android or iOS.

Using icons with character entities for code points within fonts is best if the icons are very common, or if the site need only work on a specific set of devices with modern operating systems, or if the fonts can be embedded.

Types of Icons

There are three basic types of icons:

Note: this information matters only if you use the second method above, i.e. if you specify code points within fonts.

  1. Unicode Icons: these are icons whose code points are defined in the Unicode Standard. For example, there is an icon of a heart — ♥ — with the defined code 9829 (decimal) or 2665 (hexadecimal) in the Unicode Standard. The Unicode code for the heart icon is the same for all Unicode fonts, though some fonts may lack the icon, and some may have additional heart icons with different code points.
  2. Unicode PUA Icons: these are icons whose code points appear in one of the Unicode Private Use Areas. For example there is an icon of an anchor in the Font Awesome font with the code 61757 (decimal) or f13d (hexadecimal). The Uni­code PUA code for an anchor icon — if this icon exists in a font — may be different in other fonts.
  3. Non-Unicode Icons: these are icons whose code points are neither defined in the Unicode Standard, nor appear in one of the Unicode Private Use Areas. For example, there is an icon of a pencil in the Microsoft Wingdings font at code point 33 (decimal) or 21 (hexadecimal), which the Unicode Standard says should be an exclamation mark.

It is possible for a font to contain several types of icons: for example, a font which contains both Unicode Icons and Unicode PUA Icons.

Some icons are quite common — for example the ♥ icon — and therefore will typically appear in many fonts in font stacks. You can specify such icons simply by entering character entities within the HTML: e.g. &hearts; or &#9829;.

Other icons are much rarer — for example the shamrock icon depicted above — and therefore you must take care to ensure that the font stack includes a font which contains that icon, and you must take care that the font is either installed or em­bedded.

Free Icon Fonts

Many icon fonts are free. Some free icon fonts have a for-pay version with more icons. For example, the font named Font Awesome 5 comes in two versions: a free version with 1109 icons, and a for-pay version with 1,877 more icons.

These are icon fonts for which free versions are available — though some are free only because they are included with an operating system which is not free:

Making Icon Fonts

One problem with using icon fonts is that the standard fonts are large, and therefore increase the page load times. One solution for this problem is to create custom icon fonts which contain only those glyphs which are used on a site. There are various services for creating custom icon fonts, though unfortunately they are not free.

Icon fonts can be created using:

Be sure to check the licensing terms for any glyphs you use: a font’s glyphs are copyrighted if their font is copyrighted.

 

 Top of Page         Legal Notices