Emojicons - Emojis as an ultra lightweight icon set
Published: 2020-09-28 21:22:19

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:

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

```css
.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*
{% codepen https://codepen.io/noahblon/pen/abNxqra  %}
___



You can totally get fancy with this. 

## Backgrounds

Throw a gradient in there - why the heck not?



___
*Figure 2. Emojicon with a gradient fill*
{% codepen https://codepen.io/noahblon/pen/dyMLmwG %}
___




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*
{% codepen https://codepen.io/noahblon/pen/vYGMRjG %}
___

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:

```css 
.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*
{% codepen https://codepen.io/noahblon/pen/MWyRGYx %}
___




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.

```css
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*
{% codepen https://codepen.io/noahblon/pen/MWyRGYx %}
___



## 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.

```css
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*
{% codepen https://codepen.io/noahblon/pen/WNwWJKW %}
___




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

```css
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*
{% codepen https://codepen.io/noahblon/pen/ZEWZoBg %}
___



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*
{% codepen https://codepen.io/noahblon/pen/poyBKrE %}
___


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*
{% codepen https://codepen.io/noahblon/pen/BaKEPgm %}
___

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


There are a ton more.  You can check out [Get Emoji](https://getemoji.com/), the [Emojipedia](https://emojipedia.org/), or one of the ton of emoji websites out there to get a list of emojis.

Thanks for reading. Peace.

{% codepen https://codepen.io/noahblon/pen/RwaOeNY %}