Iconic 1.5.0 Released

Iconic Version 1.5.0

Iconic 1.5.0 is out and with it comes a bunch of fixes, icon font cheat sheets and (of course) new icons. This release seems relatively minor at the surface, but signifies a ton of work for us. Enjoy the fruits of our labor and download it now!

What’s new in 1.5.0

Five new icons

Iconic 1.5.0 new icons

We’re working to prioritize new icons based on your feedback as well as fill in gaps in the collection. This release’s introduces the Connections, Hammer, Peace, Scissors and the often-requested Server icons.

If you are dying for a specific icon to be added to the set, let us know.

Icon font cheatsheets

We know a lot of you use our icon font. While we highly suggest you use icon fonts as a backup for browsers that don't support SVG, we want to make using the font as straightforward as possible. So we've added cheatsheets to the 1.5.0 download for our vanilla icon font as well as our versions for Bootstrap and Foundation.

Bug fixes

We’ve fixed the three outstanding issues (we are aware of) with Iconic.

  • We forgot to add the iconic-property-accent class to the icons added in the 1.4.0 release. Those icons are good to go now.
  • The small version of the Arrow Thick icon had some rendering issues with certain arrowheads.
  • When installing our fonts on Windows, the font name would show up as Untitled.

A result of better tooling

In our last update, we mentioned that our future efforts would be focused on polishing up our toolkit so that we could start releasing pieces of it. So it may seem strange that this update seems to have nothing to do with the actual toolkit. Funny enough, this update has been slipped in because of the dramatic improvements we've made to our tooling.

It's an understatement to say that our automation stack is complex. I wouldn't be surprised if it's the most complicated icon tool chain around. A lot needs to happen to our icons to go from an Illustrator-exported SVG to all the different versions and formats they come out as. Much of it is needed, some of it is a by product of the inevitable learn-as-you-go and make-it-good-enough-for-now approaches. We've begun the process to untangle this web and it has made the time to deploy a release multitudes faster. So we both win in our process to get code ready for release.

It seemed fitting to use this increased efficiency to roll out 1.5.0. The effort to improve the toolkit will also allow us to focus on more ambitious parts of the project (which is always fun). It will also allow us to release more frequently since we can spend more time making icons and less time fighting our tools. We don't yet have a date for when you'll begin seeing pieces rolled out, but this release symbolizes the considerable progress being made behind the scenes.

Iconic 1.5.0 is out and with it comes a bunch of fixes, icon font cheat sheets and (of course) new icons. This release seems relatively minor at the surface, but signifies a ton of work for us. Enjoy the fruits of our labor and download it now! What… more

Written By
P.J. Onori —

Iconic 1.4.0 is a Go!

Iconic Version 1.4.0

It’s been a busy couple months, to say the least. We had the chance to talk about Iconic at Future Insights Live and we’ve been putting in a lot of work on boring, yet important logistical tasks. That said, it’s also been far too long since we’ve released a new version of Iconic. Luckily, we’ve got a new version ready for you today. So, by all means, download Iconic!

What’s in Iconic 1.4.0?

This release has 10 new icons, but the real star of the show is iconic.js. Our JS library has made huge strides and we think you’re going to really like where it’s headed.

iconic.js

We’ve had some great discussions in the community forums and GitHub repos and it’s great learning about all the different ways you’re using Iconic. We’ve added some new features and fixes to both iconic.js and the underlying SVGInjector library to better support a variety of these use cases.

Special thanks to Tomasz, Marcus and Chauncey for their testing and code submissions!

10 New Icons

Iconic 1.4.0 new icons

We’ve added more icons to this release than we normally do. Iconic now has the Command, Database, Delta, Funnel, Hand, History, List-Nested, Radiation, Ratio and Route icons! If you went to our Future Insights Live talk, some of these may look familiar...

Open Iconic 1.1.1

We’ve also released a patch version for Open Iconic which updates the sprite method to use SVG’s symbol tag. This makes the markup to add SVGs to the page much cleaner. Since Open Iconic is free and open, you have no reason not to download it!

So what’s next?

Most of our updates have focused on our icons and iconic.js. There are still plenty of icons we’d like to add to the collection, but we really want to start directing our focus on making good on the rest of our Kickstarter promises.

We’ve made good headway on all of our promises and we’re going to be spending the following months to get them out the door. We plan to initally release something small and then continually iterate on them. We think you’re really going to like what’s on the horizon!

It’s been a busy couple months, to say the least. We had the chance to talk about Iconic at Future Insights Live and we’ve been putting in a lot of work on boring, yet important logistical tasks. That said, it’s also been far too long since we… more

Written By
P.J. Onori —

Iconic 1.3.0 and Open Iconic 1.1.0 Now Available

Iconic Version 1.3.0, Open Iconic Version 1.1.0

Now that Open Iconic is public, we plan to roll out regular releases for it alongside Iconic. This is our first dual release of both icon systems.

Iconic 1.3.0

Iconic 1.3.0 is all about refinements to the system. We added some new icons, implemented a much-needed feature to iconic.js and fixed a few bugs with some smart icons.

5 Brand-Spanking-New Icons

You asked for them and now you have them! Iconic now has the
Audio, Clipboard, Cogs, Game Controller and Header icons.

Open Iconic Version 1.1.0

We have plenty more icons in our queue. We’re prioritizing the design of future icons based on what we hear from you—so if you want to see a specific icon in Iconic, let us know!

PNG fallback support in iconic.js

IE8. There, we said it.

We know we are pushing the SVG story. It allows us to do some pretty neat stuff with our icons. But, like you, we are also working on projects and with clients in the real world and see all those browser usage reports too.

We’ve had some good fallback discussions over the last few months about a number of solutions for supporting non-SVG browsers, including using our webfonts.

We’ve now had a chance to do a bit more testing and work with some Iconic users to validate another solution: the previously available, but undocumented, pngFallback option of iconic.js.

If you have a project where falling back to a equivalent set of static PNGs for your icons will work, then this feature will make it easy to do... just define where you put your PNGs and iconic.js will use them when SVG isn’t supported.

Special thanks to Gabriel L. for his help and testing!

Bug fixes

We fixed an issue in Image, Media, Person and Resize where no icon was displayed if a size class (iconic-sm, iconic-md or iconic-lg) wasn’t set. We also fixed an bug with Media Skip where the height was being cropped if a size class (iconic-sm, iconic-md or iconic-lg) wasn’t set.

Open Iconic 1.1.0

We’ve released our first minor release for Open Iconic and it has some great new stuff!

SVG Sprite Support

Icon fonts are great and all, but they’re on their way out. A nice, simple replacement for icon fonts are SVG sprites. Chris Coyier has a nice writeup on this subject. Open Iconic’s teeny-weeny file size makes the entire 223-icon-sprite weight in at a paltry 45.1 Kb.

Chris Coyier’s approach works great for basic icons like Open Iconic—which is why we’ve made it a part of the set. This approach has its limitations—specifically its inability to take advantage of SVG’s semantic structure—so we’re still working on a solution for Iconic. Stay tuned.

5 New Icons, 223 in Total

We’ve added 5 new icons to Open Iconic as well.

Open Iconic Version 1.1.0

You now have Audio, Clipboard, Command, Header and Underline icons. Go check them out!

SVG Optimizations

Open Iconic was already small—now it’s even smaller. It previously weighed in at 75.6Kb across 218 icons. It’s now 61.8Kb across 223 icons. The icons are so optimized that we got rid of our minified SVGs altogether (there was only a 1Kb difference between the minified and unminified sets). Now that’s small!

Still more to come!

We still have a lot to do and we’re looking forward to getting it in your hands. Until then, let us know how you think Iconic and Open Iconic can improve in our Community Section. We look forward to hearing from you!

Now that Open Iconic is public, we plan to roll out regular releases for it alongside Iconic. This is our first dual release of both icon systems. Iconic 1.3.0 Iconic 1.3.0 is all about refinements to the system. We added some new icons, implemented a much-needed… more

Written By
P.J. Onori —

Sample Iconic on The Noun Project

The Noun Project

As big fans of The Noun Project we’re happy to announce that Iconic’s flattened SVGs are now a part of their collection! We’re always looking for new ways to get Iconic in peoples’ hands and this could be a great fit for those of you not ready to pull the trigger on Iconic (yet).

Whoa, you put all of Iconic on The Noun Project? What Gives?

Slow down, tiger. We’ve only put the flattened SVGs—so they don’t have any of the styling, responsiveness or smart features that make Iconic special. These are the basic forms that are great for mockups or simple one-off uses.

We know that Iconic is pricier than other options. This will give folks a chance to play with our icons in their most basic form without having to commit to an Iconic license up front.

Keep in mind that you still need to purchase each icon from The Noun Project at $1.99 if you don’t want to provide attribution. So if you’re planning on using any more than 20 of our icons, the unlimited license starts to make more financial sense.

More options = :)

We’ve said it before and we’ll say it again. We want you to use Iconic. This provides another way for people to start working with Iconic—and that's a good thing. So by all means, have a look and enjoy!

As big fans of The Noun Project we’re happy to announce that Iconic’s flattened SVGs are now a part of their collection! We’re always looking for new ways to get Iconic in peoples’ hands and this could be a great fit for those of you not ready… more

Written By
P.J. Onori —

Announcing Open Iconic

Open Iconic

For those of you familiar with Iconic prior to our Kickstarter campaign, Iconic used to be a humble open source project created and maintained by a team of one (AKA, me). We made a promise that the open source version of Iconic would live on as its own project. We've officially made good on this promise—say hello to Open Iconic.

We're very proud of Open Iconic and we feel it has a unique role to play in the world of iconography. The focus for Open Iconic is legibility and file size—making it the ideal free solution for mobile web apps or those interested in visual/bandwidth accessibility.

What Makes Open Iconic Awesome

Forward-facing formats

We strongly believe SVG is the correct solution for icons on the web. Just like Iconic, Open Iconic ships with super-slim SVG files. It also ships with Webfont (WOFF, TTF, OTF, EOT formats), WebP and PNG formats. Both raster formats come in 1x, 2x, 3x, 4x, 6x and 8x sizes.

Legibility

Open Iconic Legibility

If you're using icons at particularly small sizes, Open Iconic is perfect for your needs. The icons were designed specifically for legibility at insanely small sizes. Open Iconic's sweet spot is between 12-24 pixels but most, if not all of the icons are legible down to 8 pixels on a standard-definition screen. On a Retina display, they're crystal-clear at 8 pixels. As you scale Open Iconic up, its legibility only improves.

The focus on legibility at small sizes by its very nature creates a specific aesthetic. We think this style excels at small to medium sizes. No matter what anyone tells you though, no icon will maintain a perfect balance of aesthetic and legibility across an infinite size range. We spoke about this at length in a previous blog post and that's one of the main reasons why we created Iconic.

File Size

We take web performance seriously and Open Iconic is a reflection of that. Open Iconic is tiny. Like nothing-we've-seen-is-even-remotely-close-tiny. How did we do it? Well, it's a combination of things. It's based on the minimal design of the icons, the focus on vector point precision and the refinement of SVG markup using our toolchain. How small is it you ask? Here's a full breakdown:

SVG

Open Iconic's minified SVGs weigh in at a paltry 69.5 Kb (20.4 Kb gzipped) for the entire set. That averages out to roughly 318 bytes per icon. There aren't many icon sets that ship with SVG (how is that possible in 2014?), but we haven't seen anything smaller on a per-icon basis.

WebFont (WOFF format)

We think icon fonts are on the way out (we'll be writing more about that soon), but we nonetheless spent a lot of time refining our webfont to be as teeny-tiny as possible. Have a look for yourself:

Icon Set File Size (bytes) Icon Count bytes/glyph
Open Iconic 12,036 218 55.2
Entypo 21,916 238 92.1
Foundation Icons 32,020 283 113.1
Glyphicons 23,292 200 116.5
FontAwesome 44,432 369 120.4
Symbolset 27,092 172 157.5
Icomoon 74,520 451 165.2
Typicons 60,464 336 180.0

*We can only scour so much of the internet, so if you've found an icon set which is smaller on a per icon/glyph basis, let us know and we'll update our post to reflect your findings.

Drop-in Integration with Bootstrap/Foundation

We know you like icon sets like FontAwesome due to its ready-to-use CSS for frameworks like Bootstrap. Open Iconic comes with Bootstrap and Foundation stylesheets in CSS, LESS, SASS and Stylus formats.

Consistent Aesthetic with Iconic

Iconic and Open Iconic may be different projects, but they work very well together. We put a lot of time to ensure that Open Iconic felt as though it was in the same family as Iconic. In fact, we could see a lot of people using Iconic and Open Iconic together.

How to contribute

Open Iconic is on Github and is MIT/SIL licensed. We both welcome and need support from the open source community to make this project better. We'd love your help through general feedback, suggestions on icons/features as well as additional documentation/tutorials to help people get started with Open Iconic.

For those of you familiar with Iconic prior to our Kickstarter campaign, Iconic used to be a humble open source project created and maintained by a team of one (AKA, me). We made a promise that the open source version of Iconic would live on as its own project. We've… more

Written By
P.J. Onori —

Iconic 1.2.0 is Available, Bootstrap and Foundation Support Added

Iconic Version 1.2.0

We promised it. You definitely wanted it. Now you have it. Iconic 1.2.0 now ships with ready-to-use Bootstrap and Foundation stylesheets. For some of you, this may be the smallest, yet most useful release to date.

What’s in Iconic 1.2.0

Bootstrap & Foundation icon fonts

Bootstrap and Foundation both use icon font solutions (Bootstrap ships with one by default while Foundation offers one separately), so it seemed appropriate for our replacement to be an icon font as well. As you (hopefully) have read, our icon font does some pretty cool stuff and you get all of that with our Bootstrap/Foundation solutions. In fact, we're using the same icon fonts we already ship with—all you need to do is use the framework-specific stylesheets. Speaking of stylesheets, our Bootstrap and Foundation stylesheets come in CSS, LESS, SASS and Stylus formats.

We’ve written a Bootstrap & Foundation guide to help you get started. Make sure you also read our general icon font guide if you haven’t yet. We’ve also added Bootstrap/Foundation code examples for every icon on their icon detail page. For example, you can see the new code samples for our File icon.

Bug fixes

We found (and squashed) a couple bugs in this release too. There were some placement/cropping issues in our Arrow Thick, Euro and Resize icons which have been all fixed.

More coming!

We’re still jamming on some cool new stuff which we’re excited to show you. If you own Iconic, make sure you download 1.2.0. If you haven’t, now may be the time to try it for free or better yet, purchase it!

We promised it. You definitely wanted it. Now you have it. Iconic 1.2.0 now ships with ready-to-use Bootstrap and Foundation stylesheets. For some of you, this may be the smallest, yet most useful release to date. What’s in Iconic 1.2.0 Bootstrap & Foundation icon fonts… more

Written By
P.J. Onori —