Emoji Compositions — Create your own emoji by combining existing ones (

Written by / Original link on Mar. 19, 2018

Last Friday Max Lynch sent out this tweet:

Inspired by an idea that first came to my mind after seeing these emoji compositions using the 1f60e.png emoji, I quickly replied that it’d be perfectly possible to (visually) create this new emoji by using a combination of the existing 1f468.png, 1f3a9.png, and 1f50e.png emojis.

Not soon thereafter I quickly knocked on up on codepen:


At the base is one <span> element that contains the 1f468.png emoji. Using ::before and ::after I then inject the 1f3a9.png and 1f50e.png emojis and position them absolutely on top of the 1f468.png emoji.

And then … I got distracted. And created some more compositions:


Due to the fact that I’m using ::before and ::after here, I’m limited to only two “decorations” per base emoji. Next to positioning the emojis some also got rotated, flipped, or even clipped to form a better match. I’m especially happy with the “cool lisping geek” and “smoking king” ones 1f642.png

Do note that this will only work on macOS/iOS as other platforms use other emojis. If you’re on another platform, be sure to check out the reference image.

emoji tutorialzine elsewhere link original-content bram

« Artsy Engineering Blog: React Native, 2 years later - Web Design Weekly #311 »