Symbolset produces a collection of fonts that generate icons by simply typing what you want, inline.

The idea is that searching for a specific graphic is as easy as typing its name …

… and through some CSS magic, the images can be arranged and styled to fit various layouts quickly.

Yet another bonus? Search engines can read the words behind these images, meaning there’s a layer of metadata built right into your page.

It’s fantastic to see such simple, useful innovation behind boring old fonts, isn’t it?

Co.Design

Ingenious Font Summons Icons With A Few Keystrokes

Nobody likes hunting through clipart libraries for stock graphics. So Symbolset makes the experience as simple as typing.

The littlest graphics can be the biggest pain to implement on the web. You need to either hire an illustrator or dig through clipart. Then you need to sync up with your designer (who may be different than a freelance illustrator), who, in turn, may need to toss the product to a developer to implement. It would be a lot easier if implementing such graphics were as simple as typing a word.

That’s the whole idea behind Symbolset, a collection of typefaces that you generate simply by typing a word. Once you license their fonts, those pesky little images we always need for projects, from sunshine to mailboxes to social-networking buttons, can magically appear when you type keywords like “sunshine,” “mailbox,” or “twitter.”

“There’s a magical moment when typing a keyword becomes an image,” Symbolset’s Mike Fortress tells Co.Design. “Finding icons in a traditional icon font is a chore. Designers eyeball the glyphs panel, a panel not included in Photoshop, and hunt. Our keywords are human-friendly.”

Symbolset is partially inspired by FF Chartwell, which won an Innovation By Design Award last year. FF Chartwell creates graphs by typing. Symbolset creates stock images by typing. But it’s not just this core UI that makes Symbolset so appealing. As every image has text as its core, these images can actually mean something to search engines and screen readers. There’s no need for metadata annotation because that’s built right into the font itself.

Yet another advantage is that you can tweak Symbolsets with CSS. So rather than bringing the Adobe Suite into the mix, image scaling, unique buttons, and clever layouts can actually be coded right in your site.

As of today, there are four Symbolsets available, each rendered in varying styles. Licensing starts at $5 and tops out at $60.

Buy them here.

Add New Comment

4 Comments

  • alanomaly

    What's also awesome and a good practice worth promoting is, that it's getting easier and easier to create your own icon font like this one as an SVG font, and get the benefit of screenreaders / search engines / copy & paste etc seeing the original word and eyeballs seeing the icon, but in your own style.

    What would be really cool would be an open source project to create something like this in the spirit of the http://thenounproject.com/ 

  • Irene Velveteen

    Great idea!

    I hope to see this one day replace the astonishingly awful shorthand used in txts nowadays. I really, really do.

  • waggit

    There's also the added benefit that the icons won't be blurry on devices that use retina displays