GlyphSearch: Improving the Search for Icon Fonts

Right now we’re blessed with many, well, awesome icon fonts that continue to grow with every release, like Font Awesome, Glyphicons, and Ionicons. And game-changers like Iconic might be just around the bend. But searching through this abundance of icons one by one often leads me to tedium and eye strain.

Sure, I can use the browser’s find function or the in-page search filter to search a library. But unless I match the class name exactly, it won’t be found. This is a problem I’ve talked about before, and one that Font Awesome takes some steps to address by aliasing icon names. But then I compare multiple libraries, deliberating on which to use based on coverage and design, and this problem multiplies.

Speedometers

To scratch this itch of mine, this past weekend I created GlyphSearch. It allows you to search Font Awesome, Glyphicons, and Ionicons simultaneously, and icons have been tagged with additional terms, meaning for example that all three of the icons above should be found regardless of whether you query for “tachometer”, “dashboard”, or “speedometer”. You can also click an icon to quickly copy the class name to your clipboard.

GlyphSearch is about as minimal a tool as I could make for this, but it gets the job done for me, and hopefully you agree. I was tempted to add settings like font size and color but resisted; if there’s any demand, let me know.

Notes

Besides the icon font libraries themselves, I use Algolia for search and Flatly for styles. The project is hosted on GitHub.

8 comments Write a comment

  1. Hey Thomas,

    So one thing we did with Ionicons was add aliases as possible search terms. Do an inspect element on some of the icons and you’ll see a data-tags=”” which offers alternative terms. You did a better job with it, but it was one of those things we found annoying from other packs that we wanted to fix.

    Nice work again!

  2. I’m not sure if you still check this space, but is there a way you know of to use this handy site with Illustrator? For instance, when I copy something I can’t paste it anywhere to be used.

    Pointers?

Leave a Reply


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>