Mastering Emoji in Front‑End Development

Emoji Basics

Emoji are Unicode characters; each has a unique code point (e.g., U+1F60A for 😊). Unicode provides a universal encoding (UTF‑8, UTF‑16, UTF‑32) and defines a range from U+0000 to U+10FFFF, split into the Basic Multilingual Plane and the Supplementary Plane for less common symbols.

Prerequisites

Unicode : an international standard that assigns a unique numeric identifier to every character, ensuring consistent representation across platforms.

Code point : the hexadecimal identifier prefixed with U+, e.g., U+0041 for the letter A and U+1F60A for the smiling face.

What is an Emoji?

Originally introduced by Japanese telecom operators in the 1990s, Emoji are now a core part of digital communication. The latest Unicode 16.0 defines 3,790 Emoji.

Unicode ensures the same meaning across systems, but each platform can render its own visual style.

Using Emoji in the Front‑End

HTML

Insert an Emoji directly in the markup:

<p>Today the weather is great 🌞</p>

Or use a numeric entity:

<p>Today the weather is great ☀</p>

CSS

Use the content property on pseudo‑elements:

.emoji-before::before { content: "😊"; }
.emoji-after::after { content: "\1F60A"; }

Adjust font-size to control the visual size; no extra color is required because Emoji are colored glyphs.

JavaScript

Direct insertion in strings works in modern environments:

console.log('Hello 😊'); // Output: Hello 😊

Unicode escapes can be used when direct characters are unavailable:

// BMP Emoji
const heart = '\u2764';
console.log(heart); // ❤
// Supplementary Emoji (surrogate pair)
const rocket = '\uD83D\uDE80';
console.log(rocket); // 🚀
// ES2020 \u{} syntax
const pizza = '\u{1F355}';
console.log(pizza); // 🍕

String Length and Slicing Issues

Because JavaScript strings are UTF‑16, .length counts code units, not user‑perceived characters. Surrogate pairs make a single Emoji appear as length 2, and combined Emoji (e.g., 👨‍👩‍👧) can have many code units, leading to incorrect counts and broken slices.

const emoji = '😊';
console.log(emoji.length); // 2 (should be 1)

Using .slice or .substring may cut a surrogate pair, producing �.

Intl.Segmenter (ES2021)

The internationalisation API can segment strings by grapheme clusters, words or sentences, correctly handling Emoji.

const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
const text = 'Hello 🤦🏻‍♂️ 👨‍👩‍👧!';
const segments = Array.from(segmenter.segment(text));
console.log(segments.length); // 10

Third‑Party Libraries

grapheme‑splitter : splits a string into grapheme clusters, enabling accurate character counting and safe slicing.

import GraphemeSplitter from "grapheme-splitter";
const splitter = new GraphemeSplitter();
const str = '👨‍👩‍👧';
console.log(splitter.countGraphemes(str)); // 1

emoji‑regex : provides a comprehensive regular expression for matching Emoji.

import emojiRegex from 'emoji-regex';
const regex = emojiRegex();
const text = "Hello 🤦🏻‍♂️ 👨‍👩‍👧!";
console.log(text.match(regex)); // ["🤦🏻‍♂️", "👨‍👩‍👧"]

Emoji Selectors

Open‑source selector components (e.g., emoji-mart, emoji-picker-react, vue3-emoji-picker) can be integrated to let users pick Emoji, optionally using data from the emojibase library.

When using regular expressions with Emoji outside the BMP, always apply the u flag to enable Unicode mode.