RichStyle: The Angel is in The Detail.
Abstract cover image with disability icons.

Icon Fonts vs. SVGsAn Ultimate Guide to Accessible Web Icons

Preface

Many web designers and developers today are putting SVG as an alternative to font technology used to represent icons in the web world. To what extent is this decision wise and correct?

This is what this article is trying to answer.

First, in this study we proceed from two hypotheses:

Glossary

Accessibility

For icons, it means the ability to express the icon with a semantic string that is significant to the nature of the icon and its function. In Unicode symbols, the semantic text is the description assigned to the character in the official Unicode blocks. In SVG files, it can be the Fragment Identifiers in a Spritesheet, or the <title> tag in a single SVG file.

The accessibility of icon helps users with special needs (visual disability in particular) identify and demonstrate the content of the icon using software called screen readers dedicated for this category of users. This also helps search engines understand the meaning and semantic of the icon, which makes semantic a very important issue —as is known— for webmasters.

You can imagine search engines as a category of users with special needs, but their requirements belong to the category of developer requirements, not the user ones in practice, because a search engine is not a human user, and there is nothing obliges you to meet its requirements other than your keen on attracting real and end users to your site.

Scalability is another aspect of icon accessibility, helping users with special needs (visually impaired people in particular) see icons at a larger size.

A simplified model for Web Accessibility
Web Accessibility Model
[Icons’ credits]
Code Point

Any value in the Unicode codespace; that is, the range of integers from 0 to 10FFFFhex (i.e. in Hexadecimal Numerical System). It’s an atomic unit of a textual string.

Not all code points are assigned to encoded characters necessarily. Rather, there are seven fundamental classes of code points in Unicode standards:

  1. Graphic (the most popular usage): a code point stores a glyph, which is a visual representation of a character (characters like letter, number, punctuation mark, or pictograph).
  2. Format.
  3. Control.
  4. Private-Use.
  5. Surrogate.
  6. Noncharacter.
  7. Reserved.
Glyphs in Code Points: Liberation Sans font vs. Liberation Serif font.
The main different between a font and another: different glyphs in the same code point.
Emoji

A symbol formally encoded (indexed) in Unicode standard. It’s typically colorful. Its plural form could be emoji or emojis. However, Unicode Consortium uses emoji as plural.

An emoji could be an emotional expression, a verb, an object, or even an abstract symbol.

The following table shows a brief history of emoji.

A brief history of emoji
Portmanteau Roots Meaning Description Inventor Year Example
Emoticon emot + icon emotion + icon Vertical emotional symbol typed using a combination of regular keyboard characters. Scott Fahlman 1982 :-)
Kaomoji kao + moji face + character Horizontal emotional symbol typed using a combination of regular keyboard characters. Kim Tong Ho 1986 ^_^
Pictograph Symbol formally encoded (indexed) in Unicode standard. 1993
Emoji e + moji picture + character Colorful version of a pictograph. Shigetaka Kurita 1999 🙂

Additional notes:

  • Emoticons actually originated on the PLATO IV computer system in 1972.
  • Kaomoji: Kim Tong Ho attributed this innovation to himself, but some believe he does not have enough proof of his claim.
  • Pictograph: At the time, i.e. in 1993, there was only a few pictographs when Unicode 1.1 was released.
  • Emoji weren’t encoded (indexed in Unicode tables) at the time. Rather, they have formally encoded as Emoji as of 2010, when Unicode 6.0 was released.
Fragment Identifier

A text string inside an SVG spritesheet, used to uniquely identify a part of the total image (sub-image).

Fragment identifier in SVGs is either the <view> tag or the ID property or both.

Maintainability

In this context, we mean the ability to edit code using a simple text editor or simple image editor, without a need for additional software and tools.

Performance

In this context, we mean fewer HTTP requests when loading icons. In practice, the ideal performance is to limit the process of calling icons to a single HTTP request.

Private Use Area (PUA)

One of the Unicode tables, located in the range U+E000-F8FF. It is intended to allow font developers to insert non-standard characters.

There are also two other tables for the same purpose:

  • Supplementary Private Use Area - A, located in the range U+E0000-FFFFF.
  • Supplementary Private Use Area - B, located in the range U+100000-10FFFF.
Replacement Glyph

A glyph used to render a character that cannot be rendered with the correct appearance in a particular font. It often is shown as an open or black rectangle. Also known as a missing glyph.

Unicode Glossary
Resizibility

In the context of this article, we mean the ability to change an image size by:

  • Nature: i.e. Scalability.
  • Ability to control its size through CSS instructions (mainly width and height).
Scalability

The ability to zoom-in an image without being distorted. It’s one of the aspects of icon accessibility.

Spritesheet

An image file represents a container for a set of images stacked side by side, forming a single image grouped from a set of images.

This image can be bitmap, in PNG, JPG, or GIF format, or vector; in SVG format, but most of the spritesheet images are bitmap.

Screenshot of the old Google icons file as a spritesheet.
The old Google icons grouped into a single image file in PNG format
SVG Container

Any file format allows storing a set of SVG icons and graphics in a single file.

Historical Overview

There are two categories of solutions for representing icons on the web:

The Old Solutions: Raster Images

Some of the most common formats are PNG, JPG, GIF, and recently WebP format. The main disadvantage of this type of image is that it is fixed in size and can not be zoomed-in without deformation. This type of image can be used in two ways:

The Current Solutions: Vector Images

These images are scalable, and have two main formats:

No doubt, we will rule out the category of the old solutions that based on raster (fixed bitmap) images. Our study is limited to the second category of the solutions: the current solutions that better meet accessibility requirements, represented by fonts and SVG containers.

Icon Categories

Before going into the available solutions and balancing between them, let’s try to sort icons and symbols currently circulating in the web world, according to the characteristics and features they have, and the functions they perform.

Functionally, icons can be divided into three categories:

In terms of characteristics and features, we are concerned with two factors:

Consequently, icon categories can be categorized as follows:

Categories of web icons
Standardization Multi-color
UI icons
Commercial logos
Countries’ flags

Commercial logos, contrary to UI icons and the Countries’ flags, are subject to what commercial organizations behind them are subject to, such as change, modify, rise, fall and merge, they should not be included in Unicode blocks.

On the other hand, the first category (UI icons category) remains the only category in which the designer has the freedom to color or not, whilst commercial logos and countries’ flags do not give developer in principle freedom to step in their design or modify any of them, yet he/she stay subject to the will of the original designer of the logo or the flag.

The representation of country flags by Unicode characters is usually done by using ISO-3166 country codes, such as US symbol for the United States, and DE symbol for Germany, etc, but using Regional Indicator Symbol Letters rather than the regular ASCII characters, which is within the range U+1F1E6-1F1FF, so the United States symbol is indicated by 🇺🇸, Germany’s one by 🇩🇪… and so on. As to how these symbols can be turned into Countries’ flags, we will talk about this later.

Screenshot of GNOME Character Map for Regional Indicator Symbol Letters
Regional Indicator Symbol Letters

For a perfect preview of the way flags are displayed in this way, use a recent version of Firefox to browse the following page: Color.TypeKit.com/#Flags.

If Noto Emoji font is installed on your device, you will notice that the United States and Germany symbols have already been converted to the corresponding flag images, but without coloring. If Noto Color Emoji font is installed, the flags will appear colored (using Firefox until the moment of this writing). Noto Emoji and Noto Color Emoji fonts use the ligatures technique that we will discuss later.

Fonts Technique

Critics of the use of fonts to represent icons argue that it is just a trick that does not live up to standard practice, and a sufficient evidence for us here is the propagation of blank-rectangles phenomenon when waiting for a font to load or failure to load it.

Blank-rectangles in Twitter log-in screen.
Blank-rectangles phenomenon before a web-page loading is completed.

They had all the right before Emoji emerged and supported increasingly by Unicode standard. Today, it is enough for a designer to be careful to use the correct characters in the font used, according to Unicode standard, to ensure the match between the icons at the server-side, and their equivalents at the client-side.

A web page uses icons from Noto Emoji and UniFont fonts.
Local icons (before downloading RichStyle font from the server)
The same web page uses icons of RichStyle font.
Server-side icons (RichStyle font)

The client-side environment may involve a font representing these icons even before the font is loaded by the server or when it fails to load.

If a font such as Symbola, Noto Emoji, or Unifont, is pre-installed on user’s device, then the icons installed on his or her device will show to him/her first, pending the download of the required font from the server, just like when showing a web page using a local font pending the loading of the custom font (the site’s font) from the server.

However, modern browsers are preventing —by their default behavior— the emergence of local fonts as fallback fonts in such a case, as some view this behavior as hijacking the user experience and distort —albeit temporarily— the image of the page being loaded, while others —including me— view the emergence of readable text, using any font whatsoever, as better than nothing.

Designers express the first case, which prevents any font from appearing before the custom font is loaded, with the term “Flash of Invisible Text” or FOIT, and express the second case, which shows a fallback font before the custom font is loaded, with the term “Flash of Unstyled Text” or FOUT. The following video shows the difference between the two cases in a live show.

FOIT vs. FOUT

We say “by their default behavior” because CSS standards became allowing you now to modify and override this behavior. You can see the details of font-display property assigned to this task on font-display | CSS-Tricks.

Perhaps the next illustration of Monica Dinculescu is the best representation of the values of font-display property and the behavior of these values across timeline.

A graph showing the values of `font-display` property and the behavior of these values across the timeline.
font-display values

In short, I think the best option to load icon fonts committed to Unicode standards is the value fallback as shown below.

@font-face {
    font-family: 'RichStyle';
    src: …;
    font-display: fallback;
}

The fallback option allows you to temporarily block the fallback font —if any in the user’s computer— in the hope that the custom font will appear directly without going through the temporary deformation phase of the page design that the fallback font may cause, until the custom-font load is complete and appears in the folds of the page.

This option represents a compromise between FOIT and FOUT.

This matching also guarantees excellent accessibility for icons, which means the ability to express and access these icons and symbols and their semantics using meaningful standard characters, rather than the graphical dimensions of spritesheets, which will not allow search engine or screen reader to extract any semantic data out of it.

As we are talking here about a solution that was not allow multicolor until recently, it is an acceptable solution for the first category of icons: UI icons.

Yes; designer does not have to use colors here, i.e. in UI icons, but what about user? What is his or her point of view: Should icons be monochromatic or multicolored?

We may not have a statistical answer to that now, but from our point of view; monochrome icons are better.

In details, these icons became, day by day, and by experience and practice, an alphabet, like any other alphabet, which is meant to be used for practical fleeting reading, not to meditate and enjoy, but it is a picture alphabet, such as hieroglyphic alphabet and other picture-based alphabets, which relied on drawings and images in their codification, which prevailed in ancient times and then destroyed, but what revived it again are two factors:

A photo for a board of symbols in a corridor of an airport.
The language of symbols in airports

Otto Neurath of Vienna from 1920 to 1940 tried to develop a visual language called IsoTypes, in an attempt to revive pictographic symbols again, but it was not popular or successful, and perhaps the reason for its non-commonness at the time is that its use at the level of individuals requires considerable skills in manual drawing, at a time when digital platforms have not yet been emerged. These symbols will only serve then for mass communication, i.e. through traditional mass media of the time, such as road advertising, newspapers, print, television and cinema, since writing down character was then still faster for individuals than drawing.

Today, the attempt is repeated through Emoji, but with great success, because digital environment has turned the equation upside down: printing graphics on screen today is faster than writing words!

Although Unicode Consortium does not see Emoji as a new language, he pictographic alphabet today taught us that:

And so on.

This is about UI icons, but does that apply to commercial logos and countries’ flags as well?

Initially no, this:

However, these two problems can be worked around in commercial logos as follows:

Ligatures

Ligature is a character property within the font that allows that character to be called within a text using a set of other characters.

The simplest example would be to assign the value :) to the Ligatures property of the smiley character (☺ U+263A WHITE SMILING FACE) within a specific font; this will convert that string :), once it is received in the context of a specific text uses that font, to smiley character automatically.

COLON + RIGHT PARENTHESIS + WHITE SMILING FACE
The Ligatures feature can be used to replace the string :) with the smile symbol

Ligatures are usually used to represent the special combinations of certain characters when they meet together, for example, the convergence of f and i characters in serif fonts, where they are connected as you see in the image below.

LATIN SMALL LETTER F + LATIN SMALL LETTER I + LATIN SMALL LIGATURE FI
The character LATIN SMALL LIGATURE FI (its code point is: U+FB01) is used to join the letters f and i in a single glyph
A screenshot of FontForge for the LATIN SMALL LIGATURE FI character (code point: `U+FB01`) in Noto Serif font.
Noto Serif font uses the ligatures feature to join the letters f and i in a single glyph

Arabic fonts are very expansive in using this feature. These are examples of using ligatures in Arabic characters.

This technique is useful for commercial logos as follows:

Then, when using the following CSS code:

.wordpress-blog:before {
    content: 'wordpress';
}

The phrase “wordpress” will not appear on the screen, but rather the WordPress logo.

Thus we have been able to represent a commercial logo that does not have a regular code point in Unicode blocks, without robbing the characters of others and causing a state of conflict between the characters first, and through a semantic string for people with special needs and for search engines secondly.

If the browser fails to load the font, the ligature (the phrase “wordpress” in our example) will appear instead of blank-rectangles.

However, the appearance of ligature phrases can also be circumvented by trying to match the logo and what may be corresponding or express with among symbols in Unicode tables. For example:

And so on.

You will then be able to use the ligature phrase or the original code in the CSS code. Either write:

.twitter:before {
    content: 'twitter';
}

Or write:

.twitter:before {
    content: '🐦';
}

However, using the original code would mean to some extent a loss of the icon’s accessibility. Instead of a screen reader reading —for example— Twitter icon as “Twitter”, it would read it as “Bird”.

Generally, you have now —as a developer— a logo that can be called programmatically using a text that is easily readable and modifiable by the standard QWERTY keyboard instead of dealing with a unicode character that is not common nor accessible through that keyboard, with showing an expressive string (the ligature phrase) or a symbol similar to the original one and is expressive to some extent, as a fallback if the browser fails to load the font.

Finally, there are two very important notes with regard to Ligatures technique:

Flat Design

On the issue of multicolor, It’s noted that many commercial and non-commercial organizations behind these brands have proceeded to adopt the principle of Flat Design, in line with the current trending artistic taste these days, using one single flat (gradient-free) color in their logos, which also serves the interests of traditional-icon-fonts (non-colored) fans.

If there is at least one multicolored logo, there is no escape from using:

SVG Containers: The Theory

SVG containers include the following options:

SVGs in SVG Method

You can see live examples of this method on Icon Methods page.

SVGs in CSS Method (Using DataURL)

Comparison of The Two Methods

We exclude the first two spritesheet options; viewbox and predefined views in the first method, due to the difficulty of maintaining them, which due —in turn— to the difficulty of stacking icons in a single file. The SVG Stack option is worth a try, although the resulting SVG file will not be show-able through regular images viewers.

The main common disadvantage of all options of the first method, SVGs in SVG, is that the icon size can not be controlled using height and width properties through CSS directly, but you must dive into the SVG code for this purpose whenever you want to modify the icon size.

The second method, SVGs in CSS, relies on a technique called DataURL, which involves embedding the actual data of an image directly into the URL field instead of including a link to that image.

The SVG file can be stored in this case as:

There is no doubt that the second format is preferable, because of its maintainability and accessibility.

SVG Containers: The Practice

So, until now, we’ve opted —among SVG containers— the «DataURL as XML» method to be a haven:

Colorful Commercial Logos

First, we point out that, when used, care should be taken to:

We recommend storing these codes in a separate CSS file, as svg-icons.css for example. This procedure has two objectives:

Again, we say: Despite these limitations, «DataURL as XML» method remains, according to our estimation, and looking at the latest table Web Icons Solutions by Available Techniques, the best solution among SVG containers.

Two final points remain:

Mouseover Effects

The color property is typically used for this purpose in the case of fonts as follows:

.wordpress-blog:before {
    content: 'wordpress';
    color: gray;            /* Effect: monochrome. */

}
.wordpress-blog:hover:before {
    color: #464646;         /* Formal color. */
}

But this method will not work with SVG icons and color fonts, so what’s the solution then?

The solution is to use mix-blend-mode property that can be used to disable the colors of any image or object when applied to it. For example:

.wordpress-blog:before {
    content: 'wordpress';
    mix-blend-mode: luminosity; /* Effect: monochrome */

}

.wordpress-blog:hover:before {
    mix-blend-mode: normal;     /* Formal color */
}

Non-Colored Commercial Logos: DataURL as XML or Fonts?

We can say that what distinguishes «DataURL as XML» method is the ease of maintenance and modification comparing to fonts, since the process of generating fonts requires special software —especially if we are talking about color fonts— and involves what can be considered a compiling process, whilst updating icons stored using «DataURL as XML» method only requires copy and paste procedures inside the user’s CSS file with some minor modifications.

The font file is probably smaller in size than the total size of SVG codes stored inside a CSS file. In other words, the size of the resulting font file is usually less than the size of an SVG container uses «DataURL as XML» format.

Countries’ Flags

The list of countries’ flags can be viewed as a stable standard component that is not relatively subject to overnight change and modification like commercial logos. It can easily be linked to ISO-3166 country codes, whether using standard ASCII characters or using Regional Indicator Symbol Letters.

However, the question now is:

The answer is that —as long as we are talking about a component with stable standards— it should be provided, with an automatic-replacement feature, in advance, within browsers.

That is, country flags and their linking to symbols should be a client-side built-in component rather than a server-side one, and «DataURL as XML» method will not be effective here.

Insert the smile symbol ☺ in Input field on Live Preview Box at EmojiOne .

Notice how the icon appears in the Output field as a color image.

What’s required for countries’ flags is to provide such a solution in browsers or operating systems in advance, so that inserting the symbol 🇺🇸 leads to emergence of the United States flag, and inserting the symbol 🇩🇪 leads to emergence of the flag of Germany, etc.

This solution has become available recently in new Linux distributions thanks to the availability of Google’s Noto Color Emoji font, but is, until the moment of writing these lines, limited to just a few flags. It’s also supported and available in modern Firefox versions.

Conclusion

Ideal solutions for different icon categories can be summarized in the following table:

Web icons solutions by icon categories
Standardization Multi-color Ideal solution
UI icons Font emoji
Monochrome logos Font PUA+Ligatures
Colorful logos DataURL as XML
Countries’ flags Client-side (built in browsers or OSs)

The following table shows a simplified comparison between the various solutions of representing icons in web; including both the ideal and no-ideal (excluded from our research) ones:

Web icons solutions by available techniques
Maintainability Accessibility Resizibility Multi-color Performace
Single bitmaps
Spritesheet bitmaps
Traditional fonts (monochrome)
Colored fonts
SVG Spritesheet (viewbox) 50%
SVG Spritesheet (predefined views) 50%
SVG Stack 50% 50%
SVGs in CSS (DataURL as base64)
SVGs in CSS (DataURL as XML)

Final Words

I think that operating systems, over time, and over a few years, will be pre-equipped with emoji color fonts, as an authentic component. If the abundance of this type of fonts is accompanied by the support of different browsers for color fonts, it will most likely mean that, after the exception of commercial logos, web developers are freed from the burden of developing web icons and their problems definitively. It will be enough for developer to be able to use one of the two values: monochrome and polychrome that we propose as new values of the <generic-font-family> within web standards, to choose between the available colored icons (emoji presentation style) and the non-colored one (text presentation style, or pictographs style), as an intermediate solution instead of resorting to manually switch between the two variants selectors responsible for controlling the emoji presentation style (colorful or monochrome):

font-family: [ serif | sans-serif | cursive | fantasy | monospace ] [ monochrome | polychrome ]?

This will allow an emergence of new uses for such symbols, including but not limited to: