Finally, Iconic is available!

P.J. Onori

Iconic is here

It’s been a long time coming, but Iconic is now public and available for purchase! We’re very proud of what we have to offer and we think you’ll dig it. One thing we can say for sure—there’s no other icon system like Iconic and we believe our tour does a good job explaining why.

A core goal for Iconic is to push iconography forward with new techniques and thinking. That goal has driven the way we made our icons, the way they are displayed on a screen and the way we share them on our website. You can explore all our icons as well as dig into the nitty gritty of each icon on the icon detail page.

What you get with Iconic

Each icon designed at three sizes. Not one icon that’s scaled. Literally, three different assets for three different sizes. Seriously.

Take the amount of icons you see on our icons section and multiply it by three.

Three sizes

Every format our icons come in ships with every icon at their three unique, size-specific designs. This was a considerable effort—and will continue to be through the life of Iconic, but we think it’s absolutely worth it.

Smart icons

We’re really excited about this. These icons have all three sizes wrapped into a single SVG, meaning size-switching is just a class away. Smart icons also allow you to switch states with a single SVG. So no more envelope-open and evelope-closed icons. You just have an enevelope icon which can be configured to be open or closed with HTML data-attributes. We go into the full details in our Guides section. So please give them a read.

1587 static icons

We also have every permutation of every size of every icon as a separate, stylable icon. We’re calling them static icons. So if you don’t want to use our smart icons, but you still want to style them - these icons are for you.

1587 flat icons

Lastly, we’ve also add a flattened version of our static icons which don’t have any of the classes or magic which make Iconic awesome. Why would you do that you ask? Because these icons work much better with applications like Photoshop or Illustrator for basic mockups.

Icon fonts!

You’re going to like these. They don’t have all the magic of our SVG solution, but there’s still a lot of Iconic uniqueness to this icon font. Make sure to read our font guide to get all the details.

All icons in PNG format (standard and retina density)

For those of you who like pixels, we’ve got you covered. Every icon in the collection now is available as a PNG image.


iconic.js is the little JavaScript tool that makes all the magic happen. You don’t need to know all the ins-and-outs of iconic.js, but make sure you check out our web starter guide so you can get moving without a hitch.

Three icon themes and a theme starter kit

One of the unique things Iconic brings to the table is styling and theming. We’re not talking one color themes. All the pieces of a single icon can be styled with a different aesthetic. We’re pretty excited at the possibilities this creates for designers. We have three themes that are ready-to-use as well as a starter kit for you to make your own. All com in CSS, LESS, SASS and Stylus formats. Make sure to read our styling and theming guides for the full skinny.

A comprehensive collection of guides

We’re introducing a bunch of new concepts with Iconic, so we’ve created helpful guides to get you started. We plan on continually improving these based on your feedback.

Like what you've heard? Then get it!

We need your feedback

We’ve spent a lot of time working through all the bugs and use-cases, but we're not cocky enough to think that the current release is flawless. We want to hear, how you think we can improve Iconic and if you've run into any problems (or, gasp, bugs!). In fact, we have a Community section just for that!

We're exicted to see what you do with Iconic

There’s been a lot of effort and love put into Iconic and now the most rewarding part has come—we get to see how you will use it. Thank you to everyone that has supported us through this process and we look forward to what's to come.

comments powered by Disqus