Emoji Compositions β€” Create your own emoji by combining existing ones (πŸ‘±β€β™‚οΈ + 🎩 + πŸ”Ž = …)

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 😎 emoji, I quickly replied that it’d be perfectly possible to (visually) create this new emoji by using a combination of the existing πŸ‘¨, 🎩, and πŸ”Ž emojis.

Not soon thereafter I quickly knocked on up on codepen:

At the base is one <span> element that contains the πŸ‘¨ emoji. Using ::before and ::after I then inject the 🎩 and πŸ”Ž emojis and position them absolutely on top of the πŸ‘¨ 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 πŸ™‚

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.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

β˜•οΈ Buy me a Coffee ($3)

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.