Emoji Codes for HTML, Unicode & CSS (Copy & Paste)

Full list of emoji codes for developers. Copy HTML entities, Unicode values, and CSS emoji references. Learn how to add emojis in HTML & style them with CSS.

Emojis aren't just for chats and social media—they're a powerful way to bring personality and clarity into websites, apps, and code projects. Developers use emojis to:

Add visual context to buttons, menus, and links (example: 🛒 for cart, 📧 for email)
Improve UX in dashboards, checklists, and alerts
Create more engaging interfaces (🔥 trending, ✅ success, ❌ error)
Add branding and fun touches to static HTML pages

But many developers struggle with how to properly include emojis in code: should you paste them directly, use Unicode, or HTML entities?

This guide provides a full list of emoji codes (with Unicode, HTML entity, and CSS reference) plus examples to copy & paste directly into your projects.

🔡 Understanding Emoji Codes

Unicode

Each emoji is defined in the Unicode standard with a unique code (like U+1F60D for 😍).

HTML Entities

In HTML, emojis can also be represented by numeric codes:

Decimal (e.g., 😍)
Hexadecimal (e.g., 😍)

Direct Copy

You can also directly copy-paste emojis into HTML, as long as your file encoding is set to UTF-8.

CSS

Emojis can be added using CSS content with Unicode:

.button::before {
  content: "\1F680"; /* 🚀 */
}

👉 Each method works, but developers often prefer Unicode/HTML entities for compatibility.

📋 Emoji Code Table

Emoji	Name	Unicode	HTML (Dec)	HTML (Hex)	CSS
😀	Grinning Face	U+1F600	😀	😀	\1F600
😍	Heart Eyes	U+1F60D	😍	😍	\1F60D
😂	Tears of Joy	U+1F602	😂	😂	\1F602
🔥	Fire	U+1F525	🔥	🔥	\1F525
❤️	Red Heart	U+2764	❤	❤	\2764
🚀	Rocket	U+1F680	🚀	🚀	\1F680
🎶	Music Notes	U+1F3B6	🎶	🎶	\1F3B6
✅	Check Mark	U+2705	✅	✅	\2705
❌	Cross Mark	U+274C	❌	❌	\274C
⚠️	Warning	U+26A0	⚠	⚠	\26A0
🛒	Shopping Cart	U+1F6D2	🛒	🛒	\1F6D2
📧	Email	U+1F4E7	📧	📧	\1F4E7
🎉	Party Popper	U+1F389	🎉	🎉	\1F389
💡	Light Bulb	U+1F4A1	💡	💡	\1F4A1
⭐	Star	U+2B50	⭐	⭐	\2B50
🏠	House	U+1F3E0	🏠	🏠	\1F3E0
ℹ️	Information	U+2139	ℹ	ℹ	\2139
🔔	Bell	U+1F514	🔔	🔔	\1F514
📱	Mobile Phone	U+1F4F1	📱	📱	\1F4F1
💻	Laptop	U+1F4BB	💻	💻	\1F4BB
🎨	Artist Palette	U+1F3A8	🎨	🎨	\1F3A8
📊	Bar Chart	U+1F4CA	📊	📊	\1F4CA
🔒	Lock	U+1F512	🔒	🔒	\1F512
🔓	Unlock	U+1F513	🔓	🔓	\1F513
👍	Thumbs Up	U+1F44D	👍	👍	\1F44D
👎	Thumbs Down	U+1F44E	👎	👎	\1F44E
💰	Money Bag	U+1F4B0	💰	💰	\1F4B0
🎯	Direct Hit	U+1F3AF	🎯	🎯	\1F3AF
📈	Chart Increasing	U+1F4C8	📈	📈	\1F4C8
📉	Chart Decreasing	U+1F4C9	📉	📉	\1F4C9

💻 How to Add Emojis in HTML

Method 1: Direct Copy

<p>Welcome to my site 😍🔥🚀</p>

Make sure <meta charset="UTF-8"> is in your <head>:

<meta charset="UTF-8">

Method 2: Using HTML Entities

<p>I ❤️ coding! &#128640;</p>

Method 3: Using Unicode Escape Sequences

<p>Unicode Example: \1F3B6 🎶</p>

✅ Best practice: Use direct copy for speed, but HTML entities when compatibility is critical.

🎨 How to Style Emojis with CSS

Emojis are text, so you can style them with CSS like normal characters.

Changing Size

.emoji {
  font-size: 2rem;
}

Changing Color (limited to monochrome emojis)

.emoji {
  color: red; /* works for ♥, ★, ☂, etc. */
}

Adding Emojis with ::before or ::after

button::before {
  content: "🚀 ";
}

Animated Emojis (CSS spin example)

.spin {
  display: inline-block;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

📂 Code Examples Developers Can Copy

Example 1: Emoji Checklist

<ul>
  <li>✅ Task completed</li>
  <li>❌ Task pending</li>
  <li>⚠️ Warning needed</li>
</ul>

Example 2: Emoji Buttons

<button>🛒 Add to Cart</button>
<button>📧 Contact Us</button>

Example 3: Emoji in CSS Navigation

nav a.home::before {
  content: "🏠 ";
}
nav a.about::before {
  content: "ℹ️ ";
}

Example 4: Emoji in Notifications

<p>🔥 Hot Deal! Limited stock available.</p>
<p>🎉 Congratulations! You earned a bonus.</p>

Frequently Asked Questions

Q1: Do all browsers support emojis in HTML?

Yes, all modern browsers support Unicode emojis. Older versions may not display new emojis correctly.

Q2: What's the difference between HTML entities and Unicode?

Unicode is the standard code point, while HTML entities are representations that ensure compatibility in HTML documents.

Q3: Can I style all emojis with CSS?

Not fully—colored emojis (like 😍 or 🚀) follow OS/font rendering. Monochrome ones (♥, ☂, ☑) respond to CSS color.

Q4: Do emojis slow down websites?

No—emojis are lightweight text characters, not images.

Adding emojis to your website or code project is simple, fun, and user-friendly. Whether you paste them directly, use Unicode, or HTML entities, emojis enhance UX and make your content more engaging.

From hearts ❤️ to rockets 🚀 to music 🎶, emojis let you express ideas instantly. Developers use them in buttons, lists, dashboards, and notifications.

👉 Bookmark this page, use our copy-paste table, and try out the example code snippets in your own projects!