An Icon in a Hay Stack
As developers, we love adding icons to the apps we build. They bring a little je-ne-sais-quoi to reinforce the intent of a button or dress-up a message banner through simple visual elements. But when it’s time to find the right one in our library, it leaves us wondering if that icon is called “heart”, “love”, or “like”…
As trivial as it sounds, finding icons gets in our way and can slow us down. We can’t CMD+F for them, and even if they had a label, how many guesses would it take to find the one we are looking for? Here is a small sample of what our icon library looks like. You can imagine how eye-balling hundreds of these glyphs can be painful.
When we build new features at Lever, our designer team provides us with top-notch UI mocks in Figma that we reproduce as pixel-perfect as possible in code. However, encountering a new icon can lead us to squint at our monitors as if each one of them is a suspect. Which one is it? What is the code to import it into our HTML templates? Browsing SVG files is tedious. So we committed ourselves to improve the process…
Icon discoverability
A few of us got in a room and talked about how we can be more productive with iconography. We determined we could work faster if we could:
- See icon glyphs
- See icon names
- See icon usage + copy code
- Browse icons by category
- Fuzzy-search icons
A few spare cycles later, we built this:
Our favorite feature is the search bar. Notice we don’t have to type the canonical name of the icon to bring up relevant results. We’ve integrated a concept of synonyms to icons using alternate words that may come to mind.
Under the hood
With the new UI, designers can see what is available to developers since not all icons they create are in production yet. As more icons are added, we wrote a script that prompts us for questions to streamline the process. It’s quick and easy. Let’s pretend we want to add a new icon “magic-carpet”:
What is the name of the new icon? (e.g. 'open-umbrella'):
magic-carpetWhat are the synonyms associated with this icon? (e.g. rain, wet, storm, weather). These will be used as matching keywords when searching for icons. Provide a comma-separated list of words:
aladdin, rug, floor, flying, adventures, cave of wondersPaste the SVG code for the icon:
<svg>...</svg>In what group would this new icon belong to?
0) Arrows
1) Business/Finance/Education
2) Design/Development
3) Favicons/Social
4) Files/Folders
5) Location
6) Others
7) Status Indicators
8) Technology
9) User Interface
10) Users
Make a choice: 6Creating icons/magic-carpet.html...
Rewriting icon-registry.html...
Rewriting icons.json...
Done! See what changed with "git status" and verify the generated files before committing them.
Here we fiddle with a few files. We store the SVG glyph under icons/magic-carpet.html. The file icon-registry.html is used by our icon documentation page to import all SVGs in bulk. Finally, we update icons.json which carries all icons metadata. It looks like this:
{
...
{
"group": "Others",
"icons": [
{
"name": "magic-carpet",
"tags": [
"adventures",
"aladdin",
"cave of wonders",
"floor",
"flying",
"rug"
]
},
...
]
},
...
}Once the changes are published, new icons will appear in the UI and searching for them will leverage their tags (synonyms). We, of course, hid some easter eggs in there which made this little project even more fun to knock out.
Interested?
We strive for engineering productivity and simplicity. We have lots more to do to keep us efficient, so if any of this feels like your cup of tea then join the Lever team, we are hiring!
