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

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).

7 Comments