Emoji are an integral part of the web. When it comes to the digital world, they’re everywhere. They’re all over social media, in emails, on websites, and even in code comments. Some estimates suggest that 6 billion emoji are used every day.

They’re fun and expressive, but they also hide a world of technical intricacies that can surprise even seasoned developers. This article takes a closer look at these funny little internet images to understand the practical challenges and opportunities they bring to developers.

Where Did Emoji Come From?

Pictograms are nothing new, existing long before emoji. They’re used on screen signs, maps and many other places in the offline world, to visually communicate with the viewer.

However, online they’re a far more recent invention, with the early internet users using emoticons like :-) or ¯\_(ツ)_/¯, before emoji became the standard. But where did they come from, and why do we use them?

The earliest example of emoji was in Japan in 1988, where the Sharp PA-8500 PDA device came with over 100 images included. Later, in 1997, SoftBank - known as J-Phone at the time - released the SkyWalker DP-211SW including 90 of their own.

‍
However, Shigetaka Kurita, a Japanese interface designer, is widely credited as helping popularise emoji on a global level in 1999 while working for communications company NTT DoCoMo.

In the mid-90’s, NTT DoCoMo released a pager aimed at teenagers, and included a heart-shaped pictogram for users to include in their pager message.

When the company released another - aimed at business people and without the heart image included - the decision was met with outcry from users, who demanded that the heart image make a return in future versions.

So NTT DoCoMo listened. Shigetaka Kurita designed 176 icons, each one 12x12 pixels, and started the global trend of device-makers including icon packs, and users using them to add visual aspects to their online communications.

Why are They Called Emoji?

Let’s just take a moment to clarify that there is no such word as ‘emojis’.

The word emoji does not have a plural form, similar to words like “sheep” in English. This means you should say, “Emoji are great!” rather than “Emojis are great.”

Now that’s out of the way, let’s look at what the term means.

It’s probably not much of a surprise to learn that the word emoji, like the emoji themselves, originated in Japan, combining “e” (絵), meaning “picture,” and “moji” (文字), meaning “character.” In a literal sense, the term translates to “picture character.” You’ll never look at them the same way again.

Cultural Confusion

Emoji enhance digital communication by adding tone, context, and nuance. A simple “Sure 👍” feels very different from “Sure.” without the emoji. So much so, articles suggest Gen Z find the thumbs up emoji to be passive aggressive.

Similar issues exist when we consider the fact the web has people communicating with each other from around the globe, as emoji don't always bridge cultural gaps as effectively as text.

The ‘OK’ hand sign (👌), for example, has multiple meanings, ranging from approval and agreement (in the UK), coins and wealth in Japan, zero in France, and a sign of displeasure or anger in Brazil. 

The confusion doesn’t end there, though, with seemingly innocuous vegetables having suggestive undertones in some Western countries, while being used in a more literal sense elsewhere.

This lack of a global, universal meaning underscores the importance of understanding cultural context when using emoji in apps or communication tools.

Quirks in Development

From a developer’s perspective, emoji introduce unique challenges and opportunities due to their underlying mechanics. These quirks, while fascinating, require extra care when building applications or handling emoji in code.

The Secret is in the Code

Emoji are not standalone characters in the way letters are. Instead, many are built by combining multiple Unicode characters, often joined by a zero width joiner (ZWJ). This behaviour allows for a remarkable degree of flexibility but can also complicate string handling.

For example, the family emoji (👨‍👩‍👧‍👦) is a sequence of:

• 👨 (man),
• 👩 (woman),
• 👧 (girl),
• and 👦 (boy),
  ...all joined by ZWJ characters to form one cohesive visual representation.

Tools like Emoji Combiner let you experiment with this concept, creating entirely new emoji combinations. This capability is similar to how kanji (Japanese characters) combine multiple sounds or meanings.

To see this in action, check out this CodePen example where you can experiment with combining emoji into your own unique creations.

How Long is a (Piece Of) String?

When working with emoji, developers can’t rely on traditional string length calculations. Each emoji may consist of multiple Unicode code points, so functions like .length might give misleading results.

For example:

const emoji = "👩‍💻"; // A woman technologist

console.log(emoji.length); // Outputs 5, not 1

This happens because the emoji combines multiple elements—👩 (woman), 🏻 (skin tone), and 💻 (laptop), something that isn’t really apparent by looking at it.

To correctly count visual characters (graphemes), use libraries like grapheme-splitter:

const GraphemeSplitter = require("grapheme-splitter");

const splitter = new GraphemeSplitter();

console.log(splitter.countGraphemes("👩‍💻")); // Outputs 1

Tips and Tools for Developers Working with Emoji

Emoji present unique opportunities and challenges in development. Here are some practical tips and tools to help you manage emoji effectively:

Ensuring Consistent Rendering

Emoji can appear differently across platforms, operating systems, and devices. To maintain consistency in your applications, use libraries like Twemoji, which provide a unified emoji set that renders identically everywhere.

Parsing and Normalising Emoji

Handling emoji accurately requires tools that respect their complex Unicode structure. Libraries like grapheme-splitter are excellent for counting visual characters (graphemes) rather than raw codepoints. These tools ensure proper handling of combined emoji, like skin tone modifiers or sequences.

Creating Custom Emoji

Emoji pickers, visual editors, or custom emoji combinations can make your application stand out. Use APIs or resources like Emoji Combiner to create dynamic features or explore how new emoji can be crafted by combining existing ones.

Spice up your Code

It might feel a little odd using them at first, but emoji can also enhance your development workflow.

Using them in your code comments and console logs is a great way to add some personality and clarity, highlighting important messages in the comments.

// 🛠️ TODO: Refactor this function

console.log("✅ Success:", data);

🎉 Installation complete!

Unicode and Database Design

Remember that emoji can occupy up to 4 bytes in UTF-8 encoding, potentially impacting database design. Ensure your database supports UTF-8mb4 for full emoji compatibility to avoid unexpected truncation or errors.

Conclusion

Emoji are much more than playful symbols; they’re a fundamental part of modern communication and an exciting challenge for developers. By mastering their quirks, understanding their cross-cultural nuances, and leveraging the right tools, you can unlock their full potential in your projects.

Whether you’re debugging complex sequences, enhancing user experiences, or simply making your logs more fun, emoji remind us that even the smallest things can leave a big impression.