Creating custom yellow handshake emojis with zero-width joiners

Creating custom yellow handshake emojis with zero-width joiners

CONTENTS ⤴︎ How they work Creating new handshakes

Apple added support for multi-skin tone handshake emojis in 2022, allowing you to go from the old standby of 🤝 to supporting handshakes like 🫱🏻‍🫲🏿. However while these handshake emojis look similar, 1 I'm not sure these look similar for you. To try to make this writeup render consistently I added an emoji rendering fallback font but this may not fix all platforms (and may break others). To toggle that override you can click this button they're actually substantially different.

How they work

Each character (and therefore each emoji) is made up of Unicode codepoints. We can look at the codepoints that make up an emoji by splitting it apart character by character using JavaScript.

[...'🤝'].map(c => 'U+' + c.codePointAt(0).toString(16)).join(' ')

🤝 U+1F91D 🫱🏻‍🫲🏿 U+1FAF1 U+1F3FB U+200D U+1FAF2 U+1F3FF

From this we can see that the yellow handshake is only one codepoint for the original emoji. The modified color handshake however is actually a composite, composed of five different characters:

U+1FAF1 - 🫱 (Right-facing hand)

- 🫱 (Right-facing hand) U+1F3FB - 🏻 (Fitzpatrick 2 The color modifier names come from the Fitzpatrick scale , a human skin color phenotypal scale created by an American dermatologist in the 1970s (a scale that is often critiqued for its eurocentric bias). 3 This is "1-2" because while there are 6 categories in the scale, 1 and 2 are so similar that they are combined into the same skin color for emojis (see aforementioned point on bias). )

... continue reading