HTML Emojis – Emoji Characters in HTML

Emojis are digital icons or characters used to express specific feelings or emotions. They have become the medium of subtle communication in the past decade, and thus, HTML5 has new features of including them on our websites. HTML Emojis are not merely images but characters from the UTF-8(Unicode) character set.

Emojis in HTML
The first prerequisite of displaying emojis is to add the character set of the HTML document. This is defined in the meta tag of the head.

<meta charset="UTF-8">

UTF-8 is the default character set of HTML and covers all the characters and symbols.

There are two ways of specifying emojis in an HTML document-

Keeping you updated with latest technology trends, Join DataFlair on Telegram

1. Direct Specification in HTML

Emojis can be directly copied and pasted in an HTML document.
You can use https://emojipedia.org/ to get emojis.

<!DOCTYPE html>
<html>
<head>
  <title>Emojis</title>
  <style>
    div{
      height: 150px;
      width: 100px;
      border-style: solid; 
    }
  </style>
</head>
<body>
  <div>
<p id="emoji" style="font-size: 40px;">🍈</p>
  </div>
</body>
</html>

Output-

using HTML emoji directly

2. Numerical Representation of UTF-8 Character in HTML

In the UTF-8 character set A is 65, B is 66, C is 67, and so on. These characters are displayed like entities, starting with #&.
Here is an example of displaying characters of UTF-8 charset.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Display A B and C</p>
<p>A B and C</p>
</body>
</html>

Output-

HTML UTF 8

The codes for A, B, and C are 65, 66, and 67. Here the browsers understand these codes with the entity and renders it correctly.

HTML Emoji Characters

Emojis can also be displayed using the UTF-8 charset. For example,
😍 is 128525
💗 is 128151
😄 is 128516

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My Emoji</h1>
<p>😀</p>
</body>
</html>

Output-

HTML emojis character

As we know, emojis are characters. Let us try to style them using CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emojis</h1>
<p style="font-size:48px">
 😄 💗 😀  😍
</p>
</body>

Output-

HTML Emojis styled using CSS

Following is a list of some HTML Emoji Symbols-

CharDecHexName
😀1285121F600Grinning Face
😁1285131F601Grinning Face With Smiling Eyes
😂1285141F602Face With Tears Of Joy
😃1285151F603Smiling Face With Open Mouth
😄1285161F604Smiling Face With Open Mouth And Smiling Eyes
😅1285171F605Smiling Face With Open Mouth And Cold Sweat
😆1285181F606Smiling Face With Open Mouth And Tightly-Closed Eyes
😇1285191F607Smiling Face with Halo
😈1285201F608Smiling Face With Horns
😉1285211F609Winking Face
😊1285221F60ASmiling Face With Smiling Eyes
😋1285231F60BFace Savouring Delicious Food
😌1285241F60CRelieved Face
😍1285251F60DSmiling Face With Heart-Shaped Eyes
😎1285261F60ESmiling Face With Sunglasses
😏1285271F60FSmirking Face
😐1285281F610Neutral Face
😑1285291F611Expressionless Face
😒1285301F612Unamused Face
😓1285311F613Face With Cold Sweat
😔1285321F614Pensive Face
😕1285331F615Confused Face
😖1285341F616Confounded Face
😗1285351F617Kissing Face
😘1285361F618Face Throwing A Kiss
😙1285371F619Kissing Face With Smiling Eyes
😚1285381F61AKissing Face With Closed Eyes
😛1285391F61BFace With Stuck-Out Tongue
😜1285401F61CFace With Stuck-Out Tongue And Winking Eye
😝1285411F61DFace With Stuck-Out Tongue And Tightly-Closed Eyes
😞1285421F61EDisappointed Face
😟1285431F61FWorried Face
😠1285441F620Angry Face
😡1285451F621Pouting Face
😢1285461F622Crying Face
😣1285471F623Persevering Face
😤1285481F624Face With Look Of Triumph
😥1285491F625Disappointed But Relieved Face
😦1285501F626Frowning Face With Open Mouth
😧1285511F627Anguished Face
😨1285521F628Fearful Face
😩1285531F629Weary Face
😪1285541F62ASleepy Face
😫1285551F62BTired Face
😬1285561F62CGrimacing Face
😭1285571F62DLoudly Crying Face
😮1285581F62EFace With Open Mouth
😯1285591F62FHushed Face
😰1285601F630Face With Open Mouth And Cold Sweat
😱1285611F631Face Screaming In Fear
😲1285621F632Astonished Face
😳1285631F633Flushed Face
😴1285641F634Sleeping Face
😵1285651F635Dizzy Face
😶1285661F636Face Without Mouth
😷1285671F637Face With Medical Mask
🙁1285771F641
🙂1285781F642
🙃1285791F643
🙄1285801F644
🤐1292961F910
🤑1292971F911
🤒1292981F912
🤓1292991F913
🤔1293001F914
🤕1293011F915
🤠1293121F920
🤡1293131F921
🤢1293141F922
🤣1293151F923
🤤1293161F924
🤥1293171F925
🤧1293191F927
🤨1293201F928
🤩1293211F929
🤪1293221F92A
🤫1293231F92B
🤬1293241F92C
🤭1293251F92D
🤮1293261F92E
🤯1293271F92F
🧐1294881F9D0

Summary

Emojis have become a prevailing mode of communication in recent times, so incorporating them into our web-page has become important. HTML 5, along with its UTF-8 charset, is used to display emojis in an HTML web-page. In this article, we’ve discussed the ways of inserting emojis and looked at some common codes for them. Emojis can be inserted in two ways, by directly copy-pasting and using the numerical representation of UTF-8 charset.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.