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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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 …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

4 Comments

Leave a comment

Leave a Reply to No more yeeting Cancel reply

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.