Home / HTML / Emojis

HTML Emojis

What are Emojis?

Emojis are pictorial symbols used in digital communication. They represent emotions, objects, people, animals, and more. Emojis are Unicode characters and can be displayed in HTML using UTF-8 encoding. Modern browsers support emojis natively.

Displaying Emojis in HTML

To display emojis in HTML, you need to use UTF-8 encoding (UTF-8 is the default in HTML5):

Using UTF-8 Encoding

Ensure your HTML document uses UTF-8 encoding:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Emojis</title>
</head>
<body>
    <p>Happy: 😀 Sad: 😢 Love: ❤️</p>
</body>
</html>

Common Emojis

Here are some common emojis you can use:

Example

<p>Faces: 😀 😂 😊 😍 😎 😢 😭 😮</p>
<p>Hands: 👍 👎 👏 🙌 👋 👌 ✌️ 🤞</p>
<p>Animals: 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼</p>
<p>Food: 🍎 🍌 🍇 🍓 🍔 🍕 🍰 🍩</p>
<p>Objects: ⚽ 🏀 🏈 ⚾ 🎾 🎮 🎯 🎲</p>
<p>Symbols: ❤️ 💛 💚 💙 💜 🖤 ⭐ ✨</p>

Using Emoji Unicode

You can also use emojis using their Unicode code points in decimal or hexadecimal:

Decimal Unicode

Example

<p>Smiley: &#128512;</p>
<p>Heart: &#10084;&#65039;</p>
<p>Thumbs up: &#128077;</p>

Hexadecimal Unicode

Example

<p>Smiley: &#x1F600;</p>
<p>Heart: &#x2764;&#xFE0F;</p>
<p>Thumbs up: &#x1F44D;</p>

Emoji in Different Contexts

In Text

Example

<p>Welcome! 😊 We're happy to have you here! 🎉</p>
<p>Great job! 👍 Keep up the good work! 💪</p>

In Buttons

Example

<button>👍 Like</button>
<button>❤️ Love</button>
<button>😊 Happy</button>

In Lists

Example

<ul>
    <li>🍎 Apple</li>
    <li>🍌 Banana</li>
    <li>🍇 Grape</li>
    <li>🍓 Strawberry</li>
</ul>

Styling Emojis

You can style emojis with CSS:

Example

<style>
    .large-emoji {
        font-size: 48px;
    }
    .emoji-list {
        list-style: none;
        font-size: 24px;
    }
</style>
<p class="large-emoji">🎉 Welcome! 🎉</p>
<ul class="emoji-list">
    <li>✅ Item 1</li>
    <li>✅ Item 2</li>
    <li>✅ Item 3</li>
</ul>

Emoji Categories

Common emoji categories:

Smileys & People: 😀 😊 😍 😎 😢 😭 😮 😴
Animals & Nature: 🐶 🐱 🦊 🐻 🦁 🐯 🌲 🌳
Food & Drink: 🍎 🍌 🍕 🍔 🍰 🍩 ☕ 🍷
Travel & Places: ✈️ 🚗 🏠 🏖️ 🌍 🗺️
Activities: ⚽ 🏀 🎮 🎯 🎲 🎸 🎨
Objects: 💻 📱 ⌚ 🔔 💡 🔑
Symbols: ❤️ 💛 ⭐ ✨ ✅ ❌ 🎉

Best Practices

Use UTF-8 encoding: Essential for emoji display
Use emojis sparingly: Too many emojis can be distracting
Test display: Ensure emojis display correctly across browsers
Consider accessibility: Emojis may not be accessible to all users
Use Unicode for compatibility: Unicode code points work in all browsers
Be aware of browser support: Some older browsers may not support all emojis

Browser Support

Modern browsers support emojis natively when using UTF-8 encoding. Some older browsers may not display all emojis correctly. Using Unicode code points ensures better compatibility across browsers.

← HTML Symbols HTML Charsets →