Hi everybody! 
Many of the icons/visuals used on the site come from Twitter’s awesome Twemoji set. There is one problem with it. There is no version of Twemoji that has keywords. This means the only way to find what you are looking for is to either browse through 3600 icons visually or search by the unicode value.
For example, this is what you see in IconJar:
That isn’t fun at all. To fix this, I decided to create a simple app that maps the unicode values to keywords and comes with a filter/browsing feature plus easy access to the SVG and PNG versions of an emoji:
Some Behind the Scenes Details
The app isn’t overly tricky or complicated in what it does, but the real fun was in getting the emoji data to power the keywords and filtering/browsing. The steps involved were:
-
Getting a full list of Twemojis from the file system into a JSON format, done via a PHP script!
-
Mapping the file names with the emoji data from Github that contains keywords
-
Processing the original JSON file from #1 several times by merging the keyword data with the file name. The result is this file.
-
Loading all of the data and dynamically generating the emoji elements. Getting 3600 emojis displayed initially was a huge perf hit, but lazy loading the images solved that nicely
-
The DOM elements are all generated as a giant
innerHTMLcall, for performance reasons. Filtering is done by setting display: none on the elements that don’t match. No DOM elements are moved in and out of the tree.
Give the tool a spin. I hope you all enjoy it and let me know if you have any questions 
Cheers,
Kirupa
