How to Use Emoji in HTML

Nowadays, Emojis 😇 have become an integral part of our text communication, we use emojis to express our feelings, emotions, and reactions on different platforms like WhatsApp, Telegram, Facebook, etc.

Emojis can also add a great user experience to your website, and it can also help you to convey your message in a better way.

So, in this article, we will learn how to use emoji in HTML.

Table of Contents

1. What is Emoji?
2. How to Use Emoji in HTML?
   1. Using Emoji with HTML Entities
   2. Using Emoji with Unicode Characters
   3. Using Emoji Directly
   4. Using Emoji with CSS
3. Conclusion

What is Emoji?

Emoji is a small digital image or icon used to express an idea or emotion in electronic communication.

It exists in various genres and categories including facial expressions, common objects, places, types of weather, animals, food, activities, sports, and so on.

The table below shows some categories and examples of emojis.

How to Add Emoji in HTML

Above we have seen what is emoji and why we should use it on our website, now let's see how to add emoji in HTML.

There are 4 different ways by which you can add emojis in HTML.

1. Using HTML Entities
2. Using Unicode Characters
3. Directly using Emoji
4. Using Emoji with CSS

Let's see each of them in detail.

Using HTML Entities

HTML entities are used to represent special characters in HTML. It starts with &# or just & and ends with ;.

For example, to show the copyright symbol (©) in HTML, we can use the © or © HTML entity.

Note: Not all HTML entities have names, some of them are just numbers.

Just like that, we have HTML entities for emojis, for example, to show the smiley emoji (😀) in HTML, you can use the 😀 HTML entity.

Here are some of the HTML entities for emojis.

Here is an example of using HTML entities to add emojis in HTML.

<p>She is happy &#128512; </p>
<p>Tree grows &#127794; </p>
<p>Fruits are Juicy &#127818; </p>

Using Unicode Characters

Unicode is a standard for encoding, representing, and processing text in different languages and scripts. It is a character set that includes letters, numbers, and symbols.

Each symbol in Unicode has a unique number, called a code point. For example, the code point for the smiley emoji is U+1F600.

To use Unicode characters in HTML, you need to use the &#x before the code point.

For example, to show the smiley emoji (😀) in HTML, you can use the 😀 Unicode character.

Here is an example of using Unicode characters to add emojis in HTML.

<p>She is happy &#x1F600; </p>
<p>Tree grows &#x1F332; </p>
<p>Fruits are Juicy &#x1F34A; </p>

Directly using Emoji

Emoji are supported in HTML5. You can directly copy and paste emojis in HTML without using any HTML entities or Unicode characters.

Here is an example of using emojis in HTML directly.

<p>She is happy 😀 </p>
<p>Tree grows 🌲 </p>
<p>Fruits are Juicy 🍊 </p>

Using Emoji with CSS

CSS is another way to embed emoji in HTML. For this you can use the content property with the ::before and ::after pseudo-elements.

Within the content property either you can use the Unicode character or emojis directly.

Here is an example of using emoji with CSS.

Using unicode

.happy::before {
  content: "\1F600";
}

.tree::before {
  content: "\1F333";
}

.fruit::before {
  content: "\1F34D";
}

<p>She is happy <span class="happy"></span> </p>
<p>Tree grows <span class="tree"></span> </p>
<p>Fruits are Juicy <span class="fruit"></span> </p>

Using emoji

.happy::before {
  content: "😀";
}

.tree::before {
  content: "🌲";
}

.fruit::before {
  content: "🍊";
}

<p>She is happy <span class="happy"></span> </p>
<p>Tree grows <span class="tree"></span> </p>
<p>Fruits are Juicy <span class="fruit"></span> </p>

Conclusion

There are many ways to use emoji in HTML. You can use HTML entities, Unicode characters, directly use emoji or use CSS to embed emoji in HTML.

We have seen all the ways to use emoji in HTML. You can use any of the above methods to embed emoji in HTML as per your requirement.

Hope you have enjoyed learning.

Happy Coding!😇