HTML Emojis

In this tutorial, we will learn about HTML Emojis with the help of examples.

Emoji are small graphical images that are used to represent emotions, objects, and ideas. They can be inserted into HTML documents by using character code. For example,


Browser Output

A Smiling Emoji

Here, &#128512; is the character code for the above emoji.

Ways To Insert Emojis In Html

There are three ways to insert emojis into an HTML document. They are:

  • Hexadecimal code
  • Decimal code
  • Copy and paste from external sources

We will learn about each of them in detail.

Hexadecimal code

We can add emojis to an HTML document by using their hexadecimal code. These code starts with &#x and ends with ; to specify browser that these are hexadecimal codes. For example,

<p>HTML is <span>&#x1F499;</span> </p>

Browser Output
HTML emojis with hexadecimal code

Here, &#x1F499; is the hex code for the blue heart emoji.

Note: Hexadecimal code provides portability and consistency to the document in the long run.

Decimal Code

We can add Emojis to an HTML document by using their decimal code within the required tag. These codes start with &# and end with an ; to inform the browser that the character represented by the decimal code has been displayed. For example,


Browser Output

HTML emojis with decimal code

Here, &#128512; is the decimal character code for the smiling emoji.

Copy and paste from external sources

We can add emojis in an HTML document by copying it from some external sources and pasting it into code. For example,

<p>HTML is <span> πŸ’œ </span> </p>

Browser Output
HTML Emojis By copy-pasting

Here, we have copied the purple heart emoji somewhere from the internet and pasted it to our HTML file.

Emoji Name Code
πŸ˜‚ Face with Tears of Joy &#128514;
❀ Black Heart &#10084;
😍 Smiling Face with Heart-Shaped Eyes &#128525;
πŸ™ Person with Hands Folded &#128591;
🀣 Rolling On The Floor Laughing &#129315;
πŸ’• Two Hearts &#128149;
😭 Loudly Crying Face &#128557;
πŸ”₯ Fire &#128293;
😘 Face Throwing a Kiss &#128536;
πŸ‘ Thumbs Up &#128077;