Using Emoji's 😀 in HTML

How to make your articles more readable and engaging using Emoji's?

Posted Jan 11, 2025 Updated Jan 12, 2025

By Sakharam Shinde

1 min read

Using Emoji's 😀 in HTML

Emoji’s 😆 in HTML

There are mainly two ways to display emojis on your web page, but first:

HTML charset

To show the correct symbols, inform the web browser of the character set used on your page.
Although the UFT-8 is the default character set, it’s better to declare it explicitly to ensure the correct information is displayed.
So, in the HTML <head> tags, put:

  
<meta charset="UTF-8>

First mode: using the emoji Unicode

First, go to this Unicode site page with the full emoji list.
Find the emoji that you want to use.
For example, I’ll choose the smiley upside-down face with the code U+1F643.

Now replace the U+ for &#x, adding and ; at the end, and put it on your HTML code:

  
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
  </head>
  <body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>&#x1F643;</p>
  </body>
</html>

And the result will be: Page example

2. Second mode: Copy and Paste (Everyone’s Favorite)

You can copy and paste the emoji. Your code will be:

  
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
  </head>
  <body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>🙃</p>
  </body>
</html>

And you will have the same result.

Emojis by Category

Faces

😀 😀 🤣 🫠 🙃 😇 😊 😍 🤩 😘 😘 🤑 😰 😡 😭 😴 🧔‍♂️ 🇮🇳 🤷‍♂️ 🤦‍♂️👍👎 👆 🫵 🤙👊 ✌ 👌 💯 💥 👽 💀 🤖

Daily

✅ ❌ ❗❓➡ ⛔ ⚠ 🔗 ⚙ 📌 📉 📈 📅 📁 💼 📝 ✒ ✉ 💰 🌠 ⭐ 🕖 🚀 ⚓ 🚗 🏡 🌍 🍻 🎂 💐 🐞 🐌 🐋 👤 🚴 🕺 💃 🚶 🕵🏿‍♂️ 🔜 💾 💳 🔎 ▶ 🛠

Animals

🦖 🦢 🐓 🐛 🐧 🐞🐳 🐍

Numbers

#️⃣ *️⃣ 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟

Technology

🛜 📴 🔆 🎦 ⏯ ☸️ ☸ 🐳 🖧 👨🏻‍💻 🔄 ♾️ 🛡️ 🔎

Good luck with your html emotions !!!

website, jekyll

Website Jekyll

This post is licensed under CC BY 4.0 by the author.