Introduction to Emoji
Emoji are small graphic icons used to express emotions, situations, ideas, and more.
While they are sometimes referred to as emoticons, emoji are distinct in that they are visual characters encoded in Unicode, not simple text-based symbols.
You'll often see emoji used in text messages, social media posts, and emails to make communication more expressive and engaging. For example, 😃 (smiling face), 🎉 (party popper), and ❤️ (heart) are some of the most commonly used emoji.
Emoji come in many forms and can carry a wide range of meanings. Their appearance may vary depending on the platform or operating system, as each vendor (like Apple, Google, or Microsoft) renders them in its own style.
How to Insert Emoji into a Web Page
- Just Copy and Paste
- Use Unicode Character Codes
Just Copy and Paste
As the name suggests, simply copy the emoji you want and paste it wherever you need it.
It even works in plain text editors like Notepad.
You can paste it directly into your HTML or CSS code.
Code Explanation
The ::before pseudo-element inserts a virtual element before the actual content of the selected element.
It behaves like the first child and can be styled using CSS.
Code Explanation
The <button> tag represents a button labeled by its content.
Insert the Unicode for an Emoji Icon into HTML
f you have a basic understanding of HTML, you can insert Unicode values directly into your content. When you add the Unicode character directly into the HTML document’s text, most browsers and operating systems will correctly display the emoji.
Here's a simple example of how to insert an emoji into an HTML document using its Unicode
| Emoji | Unicode Value |
|---|---|
| 😃 | 😃 |
| 🧡 | 🧡 |
Code Explanation
The font-size property defines the size of the text.
😃: Inserts the Unicode value for the smiling face emoji.🧡: Inserts the Unicode value for the heart emoji. The emoji is styled to appear twice as large usingfont-size: 2em;in CSS.- When you insert emoji using their Unicode values in HTML, you can apply limited styling with CSS.
Note:
Emoji appearance may vary depending on the browser or operating system.
Emoji Unicode Reference Table
There are countless types of emoji, and more are being added all the time.
The table below lists some useful emoji along with their Unicode values for easy reference.
| Emoji | Unicode Value |
|---|---|
| 😃 | 😃 |
| 😂 | 😂 |
| 😅 | 😅 |
| 🤣 | 🤣 |
| 😥 | 😥 |
| 😆 | 😆 |
| 😍 | 😍 |
| 😱 | 😱 |
| 😴 | 😴 |
| 😵 | 😵 |
| 😷 | 😷 |
| 🤥 | 🤥 |
| 😝 | 😝 |
| 🤫 | 🤫 |
| 🤭 | 🤭 |
| ⌚ | ⌚ |
| ⏰ | ⏰ |
| ⏱ | ⏱ |
| ⚽ | ⚽ |
| ⚾ | ⚾ |
| 🏐 | 🏐 |
| 🏀 | 🏀 |
| 🏈 | 🏈 |
| 🏓 | 🏓 |
| ☝ | ☝ |
| ✌ | ✌ |
| ✋ | ✋ |
| 👆 | 👆 |
| 👇 | 👇 |
| 👈 | 👈 |
| 👉 | 👉 |
| 👍 | 👍 |
| 👎 | 👎 |
| 👌 | 👌 |
| 🤟 | 🤟 |
| 🌭 | 🌭 |
| 🍔 | 🍔 |
| 🌮 | 🌮 |
| 🍕 | 🍕 |
| 🍞 | 🍞 |
| 🍩 | 🍩 |
| 🥞 | 🥞 |
| 🥣 | 🥣 |
| ☕ | ☕ |
| 🥛 | 🥛 |
| 🌷 | 🌷 |
| 🌻 | 🌻 |
| 🌼 | 🌼 |
| 🌽 | 🌽 |
| 🍅 | 🍅 |
| 🍆 | 🍆 |
| 🍇 | 🍇 |
| 🍉 | 🍉 |
| 🍊 | 🍊 |
| 🍍 | 🍍 |
| 🍎 | 🍎 |
| 🍒 | 🍒 |
| 🍓 | 🍓 |
| 🥝 | 🥝 |
| 🌂 | 🌂 |
| 🎉 | 🎉 |
| 🎨 | 🎨 |
| 💊 | 💊 |
| 📗 | 📗 |
| 📘 | 📘 |
| 📕 | 📕 |
| 🔊 | 🔊 |
| 🎸 | 🎸 |
| 🎹 | 🎹 |
| 🎺 | 🎺 |
| 🎻 | 🎻 |
| 🐤 | 🐤 |
| 🦅 | 🦅 |
| 🦉 | 🦉 |
| 🐵 | 🐵 |
| 🐶 | 🐶 |
| 🐹 | 🐹 |
| 🦁 | 🦁 |
| 👀 | 👀 |
| 👂 | 👂 |
| 👃 | 👃 |
| 🙏 | 🙏 |
| 🙅 | 🙅 |
| 🙆 | 🙆 |
| 🤦 | 🤦 |
| 👄 | 👄 |
| 💋 | 💋 |
| 👅 | 👅 |
| 🧡 | 🧡 |
| 💖 | 💖 |
| 💘 | 💘 |
| 💕 | 💕 |
| 💏 | 💏 |
| 💑 | 💑 |
| 🚁 | 🚁 |
| 🚊 | 🚊 |
| 🚑 | 🚑 |
| 🚕 | 🚕 |
| 🚚 | 🚚 |
| 🚛 | 🚛 |
| ✨ | ✨ |
Exploring Additional Emoji Resources and Libraries
So far, we've covered two main methods for using emoji in your web pages:
Copying and pasting emoji directly, and
Inserting Unicode values into your HTML.
These approaches rely on the browser’s built-in support for emoji, which is typically rendered using the operating system’s default emoji font.
However, you can also use third-party libraries or resources to display emoji as images or in other formats. These tools operate independently of the system emoji fonts and often require additional setup or installation.
Using such libraries can provide more stylistic control and ensure consistent rendering across different platforms. But keep in mind that they may introduce additional load times and potential compatibility or performance issues in certain environments.
Whether or not to use these resources depends on your project’s specific requirements, including visual consistency, performance, and browser support.
In most cases, relying on the browser’s native Unicode emoji support is the simplest and most compatible approach.
That said, if you're looking for greater control or customization, the following emoji libraries and tools might be worth exploring.
| Emoji CSS | Emoji CSS is a library that lets you easily use emoji icons as CSS classes. Simply add the relevant class to your HTML element to display the emoji. |
|---|---|
| Twemoji | Developed by Twitter, Twemoji provides emoji as images. You can integrate them into your web page using CSS or JavaScript. It ensures consistent emoji appearance across platforms. |
| FontAwesome | Font Awesome is a widely used icon library that includes a selection of emoji-style icons. It allows you to easily add scalable emoji-like icons to your site with minimal setup. |
| Emojipedia | Emojipedia is a comprehensive online resource for emoji-related information. It provides meanings, Unicode values, platform variations, and more. |
These are some of the most popular emoji resources and libraries. Each offers different features and use cases, so you can choose the one that best fits your needs.
Keep in mind that other libraries and tools are also available, so it's a good idea to explore and select based on your specific project requirements.
Curious About How to Use Special Characters in HTML?
HTML special characters are used to display symbols that would otherwise be interpreted as code. Learn how they work and why they matter in web development.