Iconic was an extremely popular open source icon set. Now, it's being expanded as a commercial version.

The new version has some interesting tricks.

Like icons that come in three varying detail levels that scale with size.

And smart icons that can run APIs to display information dynamically.

But maybe the biggest innovation will be the simplest one...

...in that Iconic will allow designers to handle tricks like resizing within the CSS rather than Illustrator.

You can support Iconic on Kickstarter now for $35.

Co.Design

Kickstarting: Smarter Icons That Live Like Software

From the makers of one of the Internet’s most popular open-source icon sets comes a new idea: Embeddable icons that are intelligently animated.

Icons have a relatively straightforward job: They serve as a shorthand reference or portal to larger information. But could icons be more?

That’s a question behind Iconic, a project on Kickstarter by Waybury that builds on P.J. Onori's massively popular open-source icon set. This expansion will only be available for pay, however, because it’s pushing the bounds of icons to the realm of code. "Iconic is as much an R&D project as it is an icon set," Onori tells Co.Design.

He’s not exaggerating. Iconic is stretching the boundaries of what constitutes the icon itself. Its core is a set of icons that don’t just scale but scale through CSS alone, and with varying amounts of detail and flourish for legibility at any size. So a microphone at its smallest size is just a pill attached to an arc. At the medium size, it gains a cross section and five holes. At the large size, it’s a fairly detailed creation, with more holes than I care to count. They’re all related—in fact, the microphones look the same at a glance—but they also acknowledge that an icon has different challenges at 10 pixels wide than 1000 pixels wide.

Indeed, it’s the option for CSS icon scaling that will most likely have the greatest impact on developers on a day-to-day basis. But in sheer creativity, Iconic’s tour de force is what the team calls their "smart icons," which embed in a website with a simple line of code, where "a very basic API" allows some attributes to be changed automatically.

Some possibilities include a clock icon that actually keeps the time or a thermometer that tells you the temperature—along with a gauge, compass, volume, wireless signal, battery, and about 35 other useful dynamic icons that the team is currently kicking around.

"We'll definitely be focusing on quality over quantity on this subject," Onori says. "If we don't do a good job choosing the right icons and showing people the appropriate way of using it, smart icons definitely could become gimmicky."

Onori isn’t wrong about that. But the potential of smart icons seems worth the risk. Look beyond any use cases we can imagine today (not that there’s anything wrong with a working icon clock), and consider the greater play: We’re talking about software driving graphic design in a truly dynamic way. Imagine a whole world of graphics that could be constantly affected by the living universe around it, where every icon contained a secondary piece of information that was meaningful to you beyond the fact that it was an icon.

To some extent, I guess we already see a form of smart icons in our desktop and smartphone notifications (like when iOS Messages puts the number of unread text messages you have in the corner of the Messages icon). But to open up this idea to automagically work with more depth and customization on the greater web? Who knows what could happen.

You can support Iconic now, with rewards starting at $35.

Pre-order it here.

Add New Comment

0 Comments