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