A developer is seeking advice on creating a Twemoji icon component for a theme, aiming to use emojis as icons in the sidebar and categories. They face two challenges: managing the large file size of the full Twemoji set (3000+ icons, 8MB) and automating the use of shortnames instead of Unicode hex values for easier selection. manuel shares that they’ve reduced the set to 1869 icons, using tw- prefixed shortnames, but some icons require a reference to find the correct name. Alexander suggests using Emojibase for an emoji map, which could help with shortname lookup. Lilly expresses enthusiasm for the idea. manuel confirms the solution works and plans to share the component in a repository.
I’d like to wrap this up as a component, essentially just adding a Twemoji sprite-sheet. So emojis can be picked for the sidebar menu and as category icons. I don’t want to override system icons entirely.
This works in general, however I’d love to hear thoughts on two issues:
The full set is +3000 icons. The file-size would be 8MB. I’ve found a limited sprite-sheet online that has 2MB. The full set actually didn’t work, the reduced one did. What are the limits I should aim at with an icon set?
By default, the emojis have the Unicode hex value as id. So you’d need to use an emoji picker like Twemoji Cheatsheet to find your emoji and it’s hex value, and then enter that. E.g.:
Thank you Alexander! Seems like I needed a nudge here
So this works now I added the main set of emojis, without variants (like skin and gender). That’s a set of 1869 icons (out of 3689 svg files in the Twemoji assets folder). I used tw- as a prefix, plus the english shortcode to name icons. One might still need to use a reference site to find the right emoji as the names don’t include any tags. E.g. this icon doesn’t show up if you’d type golf in the icon-picker: