Where Icons Are Headed on the Web

Oak Studios just released Symbolset, an icon set that creates a significant step forward in a long-running trend for iconography on the web. In their words, Symbolsets are “semantic symbol fonts”, which act as replacements for full words in your HTML. This has a clear advantage for accessibility and indexing. Symbolset uses font files as the delivery system and map the icons to standard Unicode values.

In only a few years, we have seen iconography move from flat, meaningless images to embedding the icons in fonts to assigning icons to appropriate values in a font and now they are replacing entire words. These steps are showing a progression of web iconography icons becoming an extension (and at times a replacement) of traditional language. I don’t see this trend declining anytime soon and here’s why.

Our screens are getting smaller, our resolutions are getting denser and our audience becoming more diverse. Iconography represents an space-efficient and universal communication method. An icon may not be worth a thousand words, but it can often be worth 3 or 4. With limited screen real-estate, that is definitely worth it. With the inevitable step of Retina displays on all of our devices, vector imagery begins to have a significant advantage to their raster counterparts. This will just accelerate the move to font-based or SVG-based web iconography.

I love what Oak has done with Symbolset. It makes the web more visual for people and more semantic for computers. It was the next logical step of web iconography that I never even considered.

3 thoughts on “Where Icons Are Headed on the Web”

  1. I still believe using fonts to show icons is a hack and has some problems with flexibility (what if you need 500 icons?) and usability (e.g. it can be difficult to replace single icons in a font) for many types of use-cases.
    I belive the future of icons will be dominated by the SVG format with a seperate file for each icon. SVG looks like it will become the future of vector graphics for the web and using fonts will be temporary solution until SVG (or something similar) is supported by all mayor browsers.

  2. Nice article, I can see advantage of using fonts for flat colored symbols. But what do you mean with ‘flat meaningless images’? What is the difference (in meaning) between an icon in a font and an image with an icon?

Leave a Reply

Your email address will not be published. Required fields are marked *