Use Unicode Emoji as Image-Free Icons in iOS Web Apps

Filed under iOS, Programming, Scripts

In version 2.2 of iOS — Apple's "mobile" operating system used in the iPhone, iPod Touch and iPad — support for Emoji was added. These small 12x12 pixel icons are meant to be used in text messaging in Japan but because they're implemented simply as unicode symbols in the device they can be used as icons when we know they're available.

Emoji and Unicode

Emoji is basically a Japanese term for emoticons used on mobile devices. The Wikipedia article has more information on the concept, but this part is the most interesting:

When transmitted, emoji symbols are specified as a two-byte sequence, in the private-use range E63E through E757 in the Unicode character space, or F89F through F9FC for Shift-JIS.

Now, that's not true for Apple's Emoji implementation — it's apparently completely incompatible with the handsets from the Japanese carriers (see OpenRadar #6402446 for more info) — but the part about them being implemented as unicode symbols is still true in iOS, the code points used are just different.

I've made this demo page that lists unicode symbols and the hexadecimal code points for all the different Emoji that are available on my iPhone (iOS version 4). The demo page has a cache manifest so it should be available offline as well. If you're currently on a desktop computer you won't be able to see them so here's a picture of what it looks like on the iPhone:

In order to be able to use these icons you need to have easy access to the hexadecimal unicode code points so this page should come in handy. If you instead prefer a native app for this, there are many you can choose from.

Using Emoji Symbols in HTML and CSS

User agent detection is usually cited as a bad thing, and with good reason — it's often used when feature detection would be more appropriate, causing unexpected breakage in many edge conditions. When planning on using the iOS emoji on a web page, though, you really need to sniff the user agent in order to know whether the client is an iOS device and thus has a font that implements these unicode symbols in the expected way.

Here's an example (in PHP) of how you'd detect iOS devices:

$is_iPhone = (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false);
$is_iPod = (strpos($_SERVER['HTTP_USER_AGENT'], 'iPod') !== false);
$is_iPad = (strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false);
$is_iOS = ($is_iPad || $is_iPod || $is_iPhone);

When you've detected the client to be an iOS device, you can offer them an additional stylesheet:

if ($is_iOS)
    echo '<link rel="stylesheet" type="text/css" href="iOS.css" />';

In this stylesheet you'll then insert the Emoji symbols into whatever locations you'd like to use them in, and to do this you can use CSS2's content generation mechanisms (in the examples below, we use code point E00E, which is the "thumbs up" Emoji):

#someID:before {
    content: "\E00E"; /* thumbs up */
    margin-right: 5px;

Containing all the iOS-specific embellishments in one separate CSS file is, I think, the way to go, but if you want you can also insert these symbols directly into your HTML as special entities:

<div>&#xE00E; Thumbs up!</div>

Big Caveats to Consider

This is a great way to add little graphical cues to your web app without having to deal with images (i.e. making or obtaining them, serving them, having the app load them, possibly caching them) but of course the downside is that they are only available on Apple's iOS devices, which makes this trick quite useless unless you're concentrating completely on the iPhone/iPad/iPod Touch axis.

The key takeaway from this should be that there's this neat trick you can use but if you need your icons to be visible in all clients you should forget about these and just use images for everyone (it'll be much easier).

Note: I've noticed that for some reason these emoji characters will fail to render on the iPad if the text-rendering CSS property is set to optimizeLegibility (this is on the iPad-specific build of iOS 3.2, MobileSafari Version/4.0.4 Mobile/7B367 Safari/531.21.10 and does not occur on my iPhone (which is running iOS 4.0.1)).


choipd August 19, 2010 at 10:23 AM

Thank you for very informed article. Could you please share your iOS.css for emoji?

Ali Rantakari August 19, 2010 at 12:13 PM

Hi Choipd,

The CSS file you’d use would be page/application -specific. It wouldn’t be useful to you – all you need to know about this technique is in the example I put into the post.

Rajalakshmi.A` November 1, 2010 at 8:30 AM

Hello, I want some information about uniode. Shall we use the unicode in mobile for tamil translation.

Ali Rantakari November 1, 2010 at 5:19 PM

Rajalakshmi: you shall.

Leilani Akwai June 25, 2011 at 9:34 AM

iOS also seems to support the officially allocated “Supplementary Multilingual Plane” Unicode block for these characters at 1F400 through 1F439. Try viewing this (very utilitarian rather than graphically appealing) chart page to see where the official Emoji code points are:


Leilani Akwai June 25, 2011 at 9:39 AM

P.S. And since the code points at 1F400 are not private-use but rather official Unicode, theoretically they should work on all devices, from whatever phone maker.

Mike October 9, 2011 at 6:51 AM

Do you know how to disable this feature? I’m trying to use a few of these characters and these icons don’t look correct on my iPad.

I tried adding the css mentioned, but it made safari crash hard until I removed it.