Announcing Open Iconic

By
P.J. Onori

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.

comments powered by Disqus