HTML TUTORIALS

UTF-8 Emojis: Using Emojis in HTML & CSS

Emojis have completely transformed the way we communicate digitally. They bridge the gap between spoken language and written text, acting as the digital equivalent of body language and facial expressions.

An emoji is a small digital image or icon used to express an idea, emotion, or object in electronic communication. The word "emoji" comes from Japan, combining "e" (picture) and "moji" (character). Interface designer Shigetaka Kurita created the first set of 176 emojis in 1999 for a Japanese mobile provider. Today, a group called the Unicode Consortium regulates emojis. This ensures that when you send a heart from an iPhone, it still appears as a heart on an Android or Windows device.

Using Emojis

Include the <meta charset="UTF-8"> tag inside the <head> section of your HTML document. This ensures the browser uses the UTF-8 character encoding, which provides native support for emojis. Once UTF-8 is enabled, you can add emojis to your HTML using any of these three methods:

Copying and pasting emojis is the easiest way to add them to an HTML document. Simply copy an emoji from an emoji picker or website and paste it directly into your HTML code, as long as your document uses UTF-8 encoding. Modern browsers and text editors preserve emoji characters correctly, making this the quickest and most readable method for adding emojis to web pages.

Using hexadecimal character references is another reliable way to insert emojis into HTML. Instead of using the emoji itself, you reference its Unicode code point (u+) in hexadecimal format using the syntax &#x1f923;, where the (x) indicates a hexadecimal value.

Using decimal character references is a reliable way to display emojis in HTML without inserting the actual emoji character. Each emoji has a unique Unicode code point that can be written as a decimal HTML entity in the format &#129315;, where the number represents the emoji's Unicode value.

Live Example(s)

Emoji Components

Emoji components are special Unicode characters that are used to build or customize other emojis rather than being displayed on their own. These include hair style and other elements that combine with compatible base emojis to create more personalized and inclusive representations. While components may appear as individual characters in Unicode, they are intended to be used as part of a larger emoji sequence rather than as standalone symbols.

1
2

<p>&#x1f469;</p>
<p>&#x1f469;&#x200d;&#x1f9b0;</p>

03 Edit Live Code 03 Download CSS

Emoji Modifiers

Emoji modifiers let you customize certain emojis by changing their appearance, most commonly by applying different skin tones. These modifiers are separate Unicode characters that follow a compatible base emoji to create a single combined emoji.

1
2
3
4
5
6

<p>&#x1f91d;</p>
<p>&#x1f91d;&#x1f3fb;</p>
<p>&#x1f91d;&#x1f3fc;</p>
<p>&#x1f91d;&#x1f3fd;</p>
<p>&#x1f91d;&#x1f3fe;</p>
<p>&#x1f91d;&#x1f3ff;</p>

04 Edit Live Code 04 Download CSS

Emoji Sequences

Some emojis are made from multiple Unicode code points rather than a single character. These are known as emoji sequences and are created by combining individual Unicode characters, often with special formatting characters such as the Zero Width Joiner (ZWJ u+200d) or Variation Selector-16 (VS16 u+fe0f). If you're using HTML character references, every code point in the sequence must be included in the correct order with no spaces to ensure the emoji displays properly.

1
2
3

<p>&#x1f471;&</p>
<p>&#x1f471;&#x1f3fc;</p>
<p>&#x1f471;&#x1f3fc;&#x200d;&#x2640;&#xfe0f;</p>

05 Edit Live Code 05 Download CSS

Emoji & CSS

Emojis can also be used in CSS by including them directly in property values such as content: or list-style:. The most common use is with the content property in ::before and ::after pseudo-elements, allowing you to add decorative icons without modifying your HTML. As with HTML, your CSS files should be saved using UTF-8 encoding so emoji characters are preserved correctly. Keep in mind that emoji appearance varies between operating systems and browsers, so the same emoji may look slightly different across devices.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.happy-message::before {
  content: "\01f600 ";
}
ul.dino-list li::marker {
  content: "🦖 ";
  font-size: 1.5rem;
}
.wave-emoji {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 36px;
  cursor: pointer;
}
.wave-emoji:hover {
  animation: wave 0.5s infinite alternate;
}
@keyframes wave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(20deg); }
}

06 Edit Live Code 06 Download CSS

See Also:
UTF-8 Modifiers
UTF-8 Smileys & Emotion
UTF-8 People & Body
UTF-8 Component
UTF-8 Animals & Nature
UTF-8 Food & Drink
UTF-8 Travel & Places
UTF-8 Activities
UTF-8 Objects
UTF-8 Symbols
UTF-8 Flags

References:
Unicode Consortium: Full Emoji List, v17.0
Unicode Consortium: Full Emoji Modifier Sequences v17.0

Previous  Home  Next