Like to insert some emoticons/emoji inside your article? Yeah, emoji is a good way to show the reader your feeling through a simple 16x16 image 😘. But instead doing the old fashioned way inserting <­img src="http://example.com/emoticon-smile.jpg" /­>, we are live in era where the web and devices can sync the support of native emojis! 🤩

Indotechboy — So what is unicode emoji? Well, it is an emoji which are written in it's unicode format :v . Just, kidding 😀 . Well, unicode in my understanding is like some kind of legal structurial of all script characters human ever know.

Every script characters we use like alphabeths [a-Z], number [0-9], symbols like comma [,], dot [.], etc. are having it's own unicode id.

Emoji - emojis
"Emoji Smilie". Credit: Pixaline@pixabay

Here are some examples of very common characters each with their unicode id:

Character Unicode Character Unicode
a U+0061 Z U+005A
8 U+0038 " U+0022
» U+00BB ^ U+005E
< U+003C . U+002E


To use a character using its unicode in a webpage, we can just write its unicode (without the "U+") preceeded with &­#­x and ended with ;. Example to write the ʒ character using its ASCII unicode in a webpage: &#­x0292;

Of course we don't need all the pain above to write a unicode emoji if you are using a device which has emojis key on your keyboard, for example your smartphone, just hit the emoji keys to insert your emoticons to your text.

But how about in your computer keyboard, just how big your keyboard will be if it must also includes all emoji keys 😵? The solution is to write it by its unicode format instead!

And today, the emojis are also have it's own unicode name for its character 😀 😁 😂. Here are some emojis examples with their unicode id:

Emoji Unicode Emoji Unicode
😀 U+1F600 😷 U+1F637
🤡 U+1F921 👻 U+1F47B
🎂 U+1F382 🍔 U+1F354
🚑 U+1F691 U+26C5


So to write the examples emoji above in a web page, you can write it like these:

  • 😀 = &­#x1F600;
  • 😷 = &­#x1F637;
  • 🤡 = &­#x1F921;

No download, no additional HTTP request, all the emoji we write using the unicode format are natively rendered from the visitor's device system font 🎆

Styling unicode emoji using CSS

Another great benefit of using unicode emojis are because the emojis are actually rendered from the device emoji font, we can applying basic style to them using CSS! Some examples:

<style>
    .big {
        font-size:80px;
    }
    .medium {
        font-size:50px;
    }
    .shadow-red {
        text-shadow: 2px 2px 2px red;
    }
    .shadow-blue {
        text-shadow: 2px 2px 2px blue;
    }
    .pink {
        color: pink;
    }
</style>

<p><span class="big">&#x1F47B;</span> Booo... I'm a big ghost emoji, and I'll always look good no matter how much you're going to stretch me</p>
<p><span class="medium shadow-red">&#x26C5;</span> <span class="medium shadow-blue">&#x26C5;</span> Bored with your everyday cloud? How about red-shadowed cloud or blue-shadowed cloud.</p>
<p><span class="medium">&#x2708;</span> <span class="medium pink">&#x2708;</span> If the emoji is plain, we can even styling the color using CSS! But this trick might have inconsistency as different device are applying its own native emoji font, which could led to this emoji are not plain on the device. </p>

👻 Booo... I'm a big ghost emoji, and I'll always look good no matter how much you're going to stretch me

Bored with your everyday cloud? How about red-shadowed cloud or blue-shadowed cloud.

If the emoji is plain, we can even styling the color using CSS! But this trick might have inconsistency as different device are applying its own native emoji font, which could led to this emoji are not plain on the device.