Emojicons - Emojis as an ultra lightweight icon set

Noah Blon — Mon, 28 Sep 2020 21:22:19 +0000

With a tiny bit of CSS, you can turn emojis into a ultra lightweight and nice looking icon set. Sure, they look different between OSes, but I think thats part of the charm.

The trick is to set the following CSS on the HTML element containing the emoji:

<span class="icon">👍🏽</span>

.icon {
  background-color: cadetblue;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Put an emoji in the container you're selecting and it takes on the background color.

Figure 1. Emojicon with a solid fill color

You can totally get fancy with this.

Backgrounds

Throw a gradient in there - why the heck not?

Figure 2. Emojicon with a gradient fill

Or maybe you need a fire icon with Grumpy Cat's face in it - I don't know your life.

Figure 3. Emojicon with an image fill

Note: this doesn't look great on Windows due to the fact that only the outlines are used for the knockout effect.

Drop Shadows

There are a couple ways you can do a drop shadow.

If you wanna have a fancy background like above, you can use a filter:

.icon {
  background: linear-gradient( #d6ff7f, #003bcc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(30px 10px 4px #4444dd);
}

Figure 4. Emojicon with a drop shadow using a filter

But be warned - if you're using a ton of filters on your website, it may effect the rendering performance.

You could also use the text-shadow CSS property. The weird thing about this is that the text shadow fills the inside of the icon - it becomes the background color. So, if you add a text shadow with no spread or offset, this can be the background. Additional text shadows are painted underneath this first one, and so you can add the text shadow then.

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0 cadetblue, 2px 2px 0 black;
}

Figure 5. Emojicon with a drop shadow using text-shadows

Outlines

An emojicon with an outline is a little trickier. Unfortunately, the webkit-text-stroke CSS property doesn't seem to work on emojis in... webkit browsers. 🤷 It does work in Edge. However, you can use a ring of drop shadows to do so.

div {
  background: linear-gradient( #d6ff7f, #003bcc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: 
    drop-shadow(0px -1px 0 black) 
    drop-shadow(1px -1px 0 black) 
    drop-shadow(-1px 0 0 black) 
    drop-shadow(1px 0 0 black) 
    drop-shadow(-1px 1px 0 black) 
    drop-shadow(0 1px 0 black) 
    drop-shadow(1px 1px 0 black)

Figure 6. Emojicon with an outline using a drop-shadow filter

Or again with the text-shadows - the first of which provides the background color:

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
    0 0 0 white,
    -2px -2px 0 black,
    0px -2px 0 black,
    2px -2px 0 black,
    -2px 0 0 black,
    2px 0 0 black,
    -2px 2px 0 black,
    0 2px 0 black,
    2px 2px 0 black;
 }

Figure 7. Emojicon with an outline using text-shadows

Shadows paint a little bit strangely on emojis, so you may need to experiment for the outline to look good.

Accessibility

Emojis are pretty accessible right out of the box. Voiceover, for example, will read the name of the emoji when it encounters it, like built-in alt text.

Figure 8. Emojicon Accessibility Test

You could add an aria-label such as aria-label="tweet icon" to the icon element if you want to override what the screenreader says, or you could hide the icon using aria-hidden="true" if surrounding text describes the icon's purpose an the icon provides no semantic value.

Browser Support

I tried these demos out in Safari, Chrome, Firefox and Edge and they all worked great. If you need to support IE11, first of all, I'm sorry. Not even Microsoft wants to support that anymore. But really, you probably can't use this technique in that case. Windows emojis are an interesting case because when you use background-clip and text-fill-color, only the outlines are knocked out. I think this looks pretty cool, but if you want a solid color

Wrapping Up

Here's a few emojis styled this way that I think are pretty useful for web development or that looked cool:

Figure 9. Emojicon List

Some may be better than others depending on the OS you're using.

There are a ton more. You can check out Get Emoji, the Emojipedia, or one of the ton of emoji websites out there to get a list of emojis.

Thanks for reading. Peace.