The Family Emoji

I was reading Impatient JS and came up on a surprising part:

> ...['👨‍👩‍👦']
[ '👨', '‍', '👩', '‍', '👦' ]     // cool: man, woman, and boy emojis...

but when my friend Jordan tried it:

> [...'👪']
[ '👪' ]

What… why?! Is the book wrong?

There are 2 “family” emojis…

If you already know the answer, the book is clear… When you search for the “family emoji” and end up on a page like this, you’ll see what’s going on:

There’s one codepoint that’s already the family emoji. But the same result can be obtained by combining a series of codepoints:

> [...'👪'].map(c => c.codePointAt(0))
[ 128106 ]
> [...'👨‍👩‍👦'].map(c => c.codePointAt(0))
[ 128104, 8205, 128105, 8205, 128102 ]

// or, in hex
> [...'👪'].map(c => c.codePointAt(0).toString(16))
[ '1f46a' ]
> [...'👨‍👩‍👦'].map(c => c.codePointAt(0).toString(16))
[ '1f468', '200d', '1f469', '200d', '1f466' ]

These are the same hexadecimal values as the screenshot above. Everything is right with the world :-)

The U+200d character is the ZERO WIDTH JOINER, abbreviated to ZWJ. The joining section from the emoji Wikipedia page gives context that will feel very familiar (pun intended).

There are all kinds of families

The example above is just one of the many emoji families available:

Additional Resources

I had heard of these things but hadn’t fully grasped them until I played with them myself. While I was trying to figure this out, I found a bunch of good resources:

• Wes Bos has a tweet with cool examples
• unicode.org’s full list of emojis
• Good intro to code points vs grapheme clusters
• More emoji fun
• Cry a little: Dark Corners of Unicode
• Awesome Unicode, which I’m just starting to read