- How to Use Emoji in HTML
- What is Emoji?
- How to Add Emoji in HTML
- Using HTML Entities
- Using Unicode Characters
- Directly using Emoji
- Using Emoji with CSS
- Conclusion
- Using Emojis in HTML
- The HTML charset Attribute
- UTF-8 Characters
- Example
- Example Explained
- Emoji Characters
- Example
- My First Emoji
- Example
- Sized Emojis
- Some Emoji Symbols in UTF-8
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Smiley Emoji
- Example
- Will display as:
- How To Use Emoji In HTML and CSS
- Video Tutorial:
- How To Add Emoji In HTML:
- How To Add Emoji In CSS:
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.
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.
| Category | Examples |
|---|---|
| Smileys | 😀 😃 😄 😁 😆 😊 |
| People | 👨 👩 👴 👵 👶 👱 👲 👮 👷 💂 🕵️♂️ |
| Nature | 🌲 🌳 🌴 🌵 🌷 |
| Food | 🍔 🍟 🍉 🍊 🍋 🍱 |
| Activities | ⛷ 🏂 🏋️♀️ 🏋️ 🤼♀️ 🤼♂️ 🤸♀️ 🤸♂️ ⛹️♀️ ⛹️ 🤺 🏌️♀️ |
| Travel | 🚗 🚕 🚙 🚌 🛴 🛵 🚲 🛹 🛴 🚁 🛩 |
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.
- Using HTML Entities
- Using Unicode Characters
- Directly using Emoji
- 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.
She is happy 😀
Tree grows 🌲
Fruits are Juicy 🍊
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.
She is happy 😀
Tree grows 🌲
Fruits are Juicy 🍊
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.
She is happy 😀
Tree grows 🌲
Fruits are Juicy 🍊
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.
.happy::before < content: "\1F600"; >.tree::before < content: "\1F333"; >.fruit::before
She is happy Tree grows Fruits are Juicy .happy::before < content: "😀"; >.tree::before < content: "🌲"; >.fruit::before
She is happy Tree grows Fruits are Juicy 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.
Using Emojis in HTML
They are letters (characters) from the UTF-8 (Unicode) character set.
UTF-8 covers almost all of the characters and symbols in the world.
The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the tag:
If not specified, UTF-8 is the default character set in HTML.
UTF-8 Characters
Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):
Example
I will display A B C
I will display A B C
Example Explained
The element defines the character set.
The characters A, B, and C, are displayed by the numbers 65, 66, and 67.
To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).
Emoji Characters
Emojis are also characters from the UTF-8 alphabet:
Example
My First Emoji
Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.
Example
Sized Emojis
Some Emoji Symbols in UTF-8
For a full list, please go to our HTML Emoji Reference.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Smiley Emoji
If you want any of these emojis displayed in HTML, you can use the decimal (dec) or hexadecimal (hex) reference found in the table below.
Example
Will display as:
| Char | Dec | Hex | Entity | Name |
|---|---|---|---|---|
| 😀 | 128512 | 1F600 | GRINNING FACE | |
| 😁 | 128513 | 1F601 | GRINNING FACE WITH SMILING EYES | |
| 😂 | 128514 | 1F602 | FACE WITH TEARS OF JOY | |
| 😃 | 128515 | 1F603 | SMILING FACE WITH OPEN MOUTH | |
| 😄 | 128516 | 1F604 | SMILING FACE WITH OPEN MOUTH AND SMILING EYES | |
| 😅 | 128517 | 1F605 | SMILING FACE WITH OPEN MOUTH AND COLD SWEAT | |
| 😆 | 128518 | 1F606 | SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES | |
| 😇 | 128519 | 1F607 | SMILING FACE WITH HALO | |
| 😈 | 128520 | 1F608 | SMILING FACE WITH HORNS | |
| 😉 | 128521 | 1F609 | WINKING FACE | |
| 😊 | 128522 | 1F60A | SMILING FACE WITH SMILING EYES | |
| 😋 | 128523 | 1F60B | FACE SAVOURING DELICIOUS FOOD | |
| 😌 | 128524 | 1F60C | RELIEVED FACE | |
| 😍 | 128525 | 1F60D | SMILING FACE WITH HEART-SHAPED EYES | |
| 😎 | 128526 | 1F60E | SMILING FACE WITH SUNGLASSES | |
| 😏 | 128527 | 1F60F | SMIRKING FACE | |
| 😐 | 128528 | 1F610 | NEUTRAL FACE | |
| 😑 | 128529 | 1F611 | EXPRESSIONLESS FACE | |
| 😒 | 128530 | 1F612 | UNAMUSED FACE | |
| 😓 | 128531 | 1F613 | FACE WITH COLD SWEAT | |
| 😔 | 128532 | 1F614 | PENSIVE FACE | |
| 😕 | 128533 | 1F615 | CONFUSED FACE | |
| 😖 | 128534 | 1F616 | CONFOUNDED FACE | |
| 😗 | 128535 | 1F617 | KISSING FACE | |
| 😘 | 128536 | 1F618 | FACE THROWING A KISS | |
| 😙 | 128537 | 1F619 | KISSING FACE WITH SMILING EYES | |
| 😚 | 128538 | 1F61A | KISSING FACE WITH CLOSED EYES | |
| 😛 | 128539 | 1F61B | FACE WITH STUCK-OUT TONGUE | |
| 😜 | 128540 | 1F61C | FACE WITH STUCK-OUT TONGUE AND WINKING EYE | |
| 😝 | 128541 | 1F61D | FACE WITH STUCK-OUT TONGUE AND TIGHTLY-CLOSED EYES | |
| 😞 | 128542 | 1F61E | DISAPPOINTED FACE | |
| 😟 | 128543 | 1F61F | WORRIED FACE | |
| 😠 | 128544 | 1F620 | ANGRY FACE | |
| 😡 | 128545 | 1F621 | POUTING FACE | |
| 😢 | 128546 | 1F622 | CRYING FACE | |
| 😣 | 128547 | 1F623 | PERSEVERING FACE | |
| 😤 | 128548 | 1F624 | FACE WITH LOOK OF TRIUMPH | |
| 😥 | 128549 | 1F625 | DISAPPOINTED BUT RELIEVED FACE | |
| 😦 | 128550 | 1F626 | FROWNING FACE WITH OPEN MOUTH | |
| 😧 | 128551 | 1F627 | ANGUISHED FACE | |
| 😨 | 128552 | 1F628 | FEARFUL FACE | |
| 😩 | 128553 | 1F629 | WEARY FACE | |
| 😪 | 128554 | 1F62A | SLEEPY FACE | |
| 😫 | 128555 | 1F62B | TIRED FACE | |
| 😬 | 128556 | 1F62C | GRIMACING FACE | |
| 😭 | 128557 | 1F62D | LOUDLY CRYING FACE | |
| 😮 | 128558 | 1F62E | FACE WITH OPEN MOUTH | |
| 😯 | 128559 | 1F62F | HUSHED FACE | |
| 😰 | 128560 | 1F630 | FACE WITH OPEN MOUTH AND COLD SWEAT | |
| 😱 | 128561 | 1F631 | FACE SCREAMING IN FEAR | |
| 😲 | 128562 | 1F632 | ASTONISHED FACE | |
| 😳 | 128563 | 1F633 | FLUSHED FACE | |
| 😴 | 128564 | 1F634 | SLEEPING FACE | |
| 😵 | 128565 | 1F635 | DIZZY FACE | |
| 😶 | 128566 | 1F636 | FACE WITHOUT MOUTH | |
| 😷 | 128567 | 1F637 | FACE WITH MEDICAL MASK | |
| 🙁 | 128577 | 1F641 | ||
| 🙂 | 128578 | 1F642 | ||
| 🙃 | 128579 | 1F643 | ||
| 🙄 | 128580 | 1F644 | ||
| 🤐 | 129296 | 1F910 | ||
| 🤑 | 129297 | 1F911 | ||
| 🤒 | 129298 | 1F912 | ||
| 🤓 | 129299 | 1F913 | ||
| 🤔 | 129300 | 1F914 | ||
| 🤕 | 129301 | 1F915 | ||
| 🤠 | 129312 | 1F920 | ||
| 🤡 | 129313 | 1F921 | ||
| 🤢 | 129314 | 1F922 | ||
| 🤣 | 129315 | 1F923 | ||
| 🤤 | 129316 | 1F924 | ||
| 🤥 | 129317 | 1F925 | ||
| 🤧 | 129319 | 1F927 | ||
| 🤨 | 129320 | 1F928 | ||
| 🤩 | 129321 | 1F929 | ||
| 🤪 | 129322 | 1F92A | ||
| 🤫 | 129323 | 1F92B | ||
| 🤬 | 129324 | 1F92C | ||
| 🤭 | 129325 | 1F92D | ||
| 🤮 | 129326 | 1F92E | ||
| 🤯 | 129327 | 1F92F | ||
| 🧐 | 129488 | 1F9D0 |
How To Use Emoji In HTML and CSS
Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to use emojis in HTML and CSS.
This is a simple and quick tutorial. If you are looking for more such tutorials that will help you learn HTML and CSS with such small tips and tricks, you can check out this playlist here. This playlist consists of a bunch of quick tutorials to help you learn the little hacks to improve your HTML, CSS and Javascript skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day. Along with these tutorials, I even post multiple-choice questions based on HTML, CSS and Javascript.
How To Add Emoji In HTML:
We first learn how to insert emojis into HTML.
Before we start coding, let us look at the project folder structure. The project folder is called – ‘Add Emoji To HTML’. Inside this folder, we have just one file – index.html.
The most crucial step here is to specify the character encoding as – ‘UTF-8’. You do it by mentioning metadata in the head of the document.
Next, we have two methods two add emojis to HTML. In the first method, we simply copy and paste the emoji into the div.
In the next method, we copy and paste the Unicode of the emoji into the div. You can find the full list of emojis and their Unicode here. Now all you have to do is replace the ‘U+1’ with ‘&#x’ in the Unicode.
To scale up or scale down the emoji use font size.
/* Just use font size to size up or down the emoji*/ div🫣🌸
How To Add Emoji In CSS:
Next, we learn how to add emojis to CSS.
For this, we create a folder called – ‘Add Emoji In CSS’. Inside this folder, we have a file called – ‘index.html’. We write the CSS code in this file itself.
In the first method, we simply copy and paste the emoji into the content of the ‘before’ or ‘after’ pseudo-element.
In the second method, copy and paste the Unicode into the content of the ‘before’ or ‘after’ pseudo-element. Finally, replace ‘U+’ with ‘\0’*
/* Method 1 Simply copy and paste the emoji in to the content of the 'before' or 'after' pseudo element */ .emoji-1:before < font-size: 100px; content: "👵"; position: absolute; >/* Method 2 Copy and paste the unicode into the content of the 'before' or 'after' psueod element. Replace 'U+' with '\0'*/ .emoji-2:before
That’s all for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the ‘Download code ‘ button below. Also, if you have any queries, suggestions or feedback you can comment on them below.
Happy Coding!