I see a great future for emojis as icons on the web. In this post I will try to explain what I see, why I think that vision will be what the future holds, and how you can take advantage of that idea today.

A short history of icons on the web

Before we can look at the future, we must understand the past. Because I think the future of icons on the web will be a place where two separate paths intersect, I will be discussing these two separate paths here so we can get a feeling of where they came from, where they are heading and where we can see them intersect. Let’s first look at icons on web pages.

Icons on web pages

As soon as it became possible to display images on web pages, web designers started to include small pictures to represent icons. For the company logo, as a favourite icon, for navigation links etc.

Initially, we just created small (partially transparent) images, usually gifs or later pngs, which we displayed in the correct position on the web page. The problem with this approach is that when we use lots of icons, because each icon is in a separate file, the browser has to perform a lot of network requests to load them all, resulting in a bad user experience.

One solution we came up with was image sprites. With this technique, we place multiple icons in a single file and then use some CSS magic to only show the right part of the image, so that one image file could be used for dozens or even hundreds of different icons.

^{Image sprites place many icons in a single file}

Image sprites solved our performance issue. However, managing these sprite files is challenging. Whenever an icon changes, new icons are added or icons are removed, these image sprites have to be updated as well and we need some way of knowing where each icon is in the larger file. Entire eco systems arose to deal with this complexity.

What we needed was a file type specialized in dealing with small images… and even though it may seem unexpected, it turns out that Font files, intended to render text, are actually perfectly suitable for icons as well. Because think about it. What is a font really, but a collection of icons where each icon represents a character or symbol? And indeed it turned out that placing icons in font files works really well for the web. So these days we can find many examples of icon sets that are distributed in the form of a Font file.

^{Material Symbols is an icon font distributed by Google}

Which leads us to the second short history. That of icons in text.

Icons in text

The history of digital text is a long and winded one that I will very crudely summarize as, first, there was ASCII, then, after a short period of a royal mess of incompatible encodings, there was Unicode.

The history of icons in text is about as long as that of digital text itself. ASCII contains symbols such as ampersand, asterisk and at-symbol that are not really text, but definitely useful. And extended ASCII encodings would often add symbols that could be combined to ‘draw’ with text, such as corners etc. Or symbols to represent card faces, or chess pieces etc. As newer encodings allowed for more characters in the set, more and more characters were added that were more icons that letters.

^{ASCII art is the art of drawing with text. TAAG is an ascii art generator to draw text in many ‘fonts;, in ASCII!}

And then, emojis exploded onto the scene. Today, almost every input device supports emojis in some way. Whether through some selection menu or through some part of the on-screen keyboard, modern apps and devices make it easy for users to insert an ever bigger set of standardized icons right into their text.

And this really is text as far as computers are concerned. They will be stored with text in the same database columns. They will be sorted according to the same rules. They will be transferred over networks as text, not as images. Only at the moment when the text needs to actually be made visible on a screen does it get translated into emoji images, coming from… a font file.

Emojicons

Both the history of icons on the web and that of icons in text end up in the same place. Font files. Icon fonts are basically specialised fonts where instead of letters, the font files contain the icons we want to use. But what if the icon we use is a standard emoji? What if, to represent the icon for our big product launch event, we choose the rocket emoji: 🚀

What if we place the ‘rocket icon’ for our page in an icon font in the position of the rocket emoji? Now we have an icon set where we can have text based fallbacks for our icons, because the emoji we used for the icon *is* (a version of) that icon.

Suddenly I can just write text:

🚀 Product Launch Event

And by picking the right font I get the icon in stead of the standard emoji.

And boom! We have progressive enhancement for icons!

I would like to suggest the term ’emojicon’ to mean ‘an icon based on an emoji’ and I suggest that we as web developers start to think about mapping the icons we use in our products onto the Unicode emoji stack, so that we can work towards a uniform standard way of working with icons that gives them graceful degradation and makes them portable.

I want my Zen

As a young developer, I was inspired by the CSS Zen Garden. In a time where HTML pages were littered with font tags and changing some style meant changing every page of the website, CSS Zen Garden showed us what it could be like. Changing the entire look and feel of your website without having to make any change to the HTML at all. Just by swapping out one CSS style sheet for the other.

What if we could do the same for icons?

Today we have many different icon sets we can choose from for the web. But mostly, when we switch from one icon set to another, we also have to change our HTML to match. For example, when you use Font Awesome, you render an icon like this:

<i class="fa-solid fa-user"></i>

The fa-solid class here selects the solid category of Font Awesome icons and the fa-user class selects the User icon.

This completely destroys the dream of the Zen Garden! Now, whenever I switch from Font Awesome to some other icon set, I have to rewrite all these HTML fragments to some other convention! Is there no better way?

What if, instead, we could just write this?

<i>👤</i>

Yeah, that is Bust In Silhouette emoji… Which fits much more naturally actually and is a perfect fallback for its icon that works not only in the web page but even in the source code itself! In fact, this will work everywhere Unicode is supported… Which is basically everywhere! This emoji will work in your Word document, in your e-mail, on Reddit, in games, even in Notepad. How is that for graceful degradation?!?

Now we couldn’t actually use the HTML above, because that <i> tag simply means ‘make this text italic’ and that is not unique enough. We only want to replace characters with icons when the author of the document intended to do so. Font Awesome lets the author communicate that intent by making them specifically add the class fa-user to the markup. Unfortunately, that also makes that markup completely unportable, destroying our Zen! We need a portable solution that is short and sweet, supported by most editors that are out there, but that clearly communicates intent and has a small likelihood of already occurring in the wild for some other purpose. Ideally, the solution should be class-less, because many editors don’t allow adding classes to the markup. Class-less is the next frontier in CSS in my humble opinion. Because it revitalizes CSS Zen instead of destroying it.

So, a class-less solution. A simple one. Not likely to be encountered in the wild. Using an i tag is an established practice, so let’s start from there. What if we nest an <i> inside another <i> like this?

<i><i>👤</i></i>

This will display the emoji character in italics, which is not bad, because it gives just that little visual cue that this is, in fact, an icon and not just an emoji.

However, I did find that nesting an <i> inside another <i> can be tricky in languages like markdown, where italics is made by writing an underscore or an asterisk and bold is made by writing two underscores or asterisks. So trying to nest an i within an i by writing two underscores then your emoji and then two more underscores would actually give you bold in stead of italics. So I settled for this idea:

<i><b><i>👤</i></b></i>

An <i> nested inside a <b>, nested inside an <i>. Still pretty short and unlikely to be encountered in the wild. And in Markdown, you write this as:

_**_👤_**_

or

*__*👤*__*

Nice!

So now we have a class-less, cross-platform way to express our desire to display an icon in the position of a character that is supported in all editors that support generating markup that nests like that.

And that is basically it! The ingredients for an icon set that revitalises the dream of the CSS Zen Garden of being able to switch the look and feel of a webpage by just switching a stylesheet, but this time, also for icons! And if we then look at the most recent developments in font files, I can clearly see a bright future ahead!

^{Noto Emoji is an emoji font, specifically intended to be used for icons}