Iconic Version 1.1.0 is Out—Try it for Free!

Iconic Version 1.1.0

The first minor version for Iconic is out and we think you’re going to like it. Like all our past updates, 1.1.0 is free for those purchased Iconic—so go get it! Speaking of things you’ll like, you can now try out Iconic for free. We’ve packaged up two of our more interesting icons for download, free of charge. So if you’re on the fence about buying Iconic, we suggest you check that out now. Now with that out of the way, let’s talk about all the cool stuff we’ve done.

Iconic 1.1.0 Highlights

Screenshot smart icons

Ever put a screenshot of an interface in a monitor, laptop, phone or some other screen-based device? We have too. To be honest, it’s usually a pain. We think Iconic has a pretty good solution for you. You can now add screenshots to our Browser, iPhone, Laptop, Monitor, Nexus and Tablet icons. The feature works on all browsers that support SVG.

Screenshot icons

How it works

In a word, simply. Just set the data-screenshot attribute to a URL of an image in the icon you want to show. So the following code...

<img class="iconic" data-src="iphone.svg" data-screenshot="screenshot.png" alt="iPhone">  

...would result in this...

iPhone icon with screenshot

Awesome, right? This feature speaks to our belief that Iconic is far more than basic icons.

Our logic behind screenshot image sizes

For specific devices, such as iPhone, Nexus and Tablet (ahem, iPad) we wanted the icon to accurately represent the screen’s aspect ratio—even if the ratio was less than elegant. For instance, the large iPhone screen is 27:47. We did this to make device-specific screenshots fit neatly in the screen without much (or any) work. We aimed for elegant aspect ratios on generic devices (Browser, Laptop and Monitor) to make calculating image dimensions less painful. You can read all the details on how to make this work on each icons' detail page.

We make sure the images you set fit as well as possible. Images always take up the entire screen width and clip vertically (if taller than the screen).

5 new icons

Five new icons are now in Iconic, based on your suggestions. Say hello to the Elevator, External link Puzzle piece, Question mark and Target icons.

Iconic 1.1.0 new icons

We’re prioritizing future design of icons based on your feedback. If you want to see an icon added to Iconic, let us know in our Community section. We read every post and add all suggestions to our list.

Minor enhancements to existing icons

This release has minor tweaks to the design of various icons—specifically all icons with the screenshot feature. The changes are very minor, but we think they make a big difference. We plan to continue improving the design of existing icons in future releases.

We’re just scratching the surface

SVG has so much potential and we have impressive things in the pipeline to share. This release is just a taste of what’s to come. We look forward to sharing more in the coming weeks and eagerly await to your feedback.

The first minor version for Iconic is out and we think you’re going to like it. Like all our past updates, 1.1.0 is free for those purchased Iconic—so go get it! Speaking of things you’ll like, you can now try out Iconic for free… more

Written By
P.J. Onori —

Pricing Changes to Iconic

Iconic Pricing

It’s been two weeks to the day since we launched Iconic publicly and the response has been amazing. Truly, we can’t thank you enough for the wonderful reception you’ve given us and we’re excited to keep things moving forward. The one tiny gray cloud in our otherwise blue sky has been the pricing model. To keep a potentially long blog post short—we’ve heard you and we’re changin’ it up.

TL;DR

Iconic now has two simple prices: $49 for non-commercial use and $129 for unlimited use, period. Use it for as many projects as you’d like (please). If this is music to your ears, then perhaps it’s time to buy Iconic.

If you've already purchased Iconic, specifically the professional license, guess what? You've been automatically upgraded to the unlimited license. High five!

Epilogue

I’ve spent 10+ years making icons and it turns out that creating an icon is considerably more straight forward than creating a pricing plan. Our initial idea of charging per project was just too ambiguous and cost-prohibitive. Fielding emails from people who were genuinely excited about Iconic but couldn’t afford it seemed wrong. In fact, our Kickstarter video clearly stated that Iconic would be "priced at a level anyone could afford". So yeah, that was a problem.

The bottom line is that we want you (yes, you) to use Iconic and we think $129 is a damned good deal for it. This project is ultimately about pushing iconography forward—the revenue generated is simply in support of that goal. We hope this change is a step in that direction.

As always, we look forward to hearing your feedback and can’t wait to see how you use Iconic in the wild.

It’s been two weeks to the day since we launched Iconic publicly and the response has been amazing. Truly, we can’t thank you enough for the wonderful reception you’ve given us and we’re excited to keep things moving forward. The one tiny gray cloud in our… more

Written By
P.J. Onori —

Finally, Iconic is available!

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

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.

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… more

Written By
P.J. Onori —

What’s New With Iconic, A Progress Report

Iconic Progress

So it’s February. That wouldn’t normally worth mentioning, but it is in this case because we said Iconic would be publicly available as of January 2014. So, what gives? We thought it important to give you an update on what we’ve been up to, where we are in the process, when we plan to ship and why Iconic is worth the wait.

What we’ve been up to

The process of making Iconic has definitely been interesting. The first thing we did once we got started was to take long look at the project as a whole. We determined that many of our stretch goals made sense to be worked on from the day one. So, we’ve been putting in extra time to include more stuff for you. Our public launch of Iconic will end up being more like a 1.2 release rather than a 1.0. This approach helped ensure that the stretch goal features didn’t feel artificially bolted on at the end. This will make a dramatically positive difference for you.

A lot of our time has obviously been spent designing icons. Hoever just as much time, if not more, has been spent creating the infrastructure to produce an icon that can do everything we’ve promised. There simply aren’t any existing tools to output SVGs in the way we need them, so we’ve had to make a lot of them from scratch. That’s been a lot of fun, but it’s also been a lot of work.

Honesty, we’re close to hitting our public release milestone. A lot of the work now is around refining Iconic as a whole. We’re now shooting for a late-Februrary public launch.

Highlights

We truly believe Iconic will help influence how icons are made in the future. We’re proud of the progress we’ve made and we think Iconic will live up to the promise of being the most advanced and forward-facing icon set on the web. Here are a few updates on specifics:

Iconic.js

Another area that has taken a lot of time is working with all the eccentricities of SVG in various browsers. SVG can still act a little finicky in certain situations. We want to make sure our icons act predictably when injected in the browser, and that’s requiring us to create a few front-end tricks to ensure that’s the case. Iconic.js is our solution to these problems at it’s coming along nicely.

Website

While useiconic.com will be the place to get Iconic, it's also a place to learn to work with Iconic. We’re iterating on the guides often, designing solutions for describing Iconic's abilities, and testing tools to help get Iconic in your project as efficiently as possible.

Copy Icon Name

Icons

The icons come a long way in the past month—both in design and technology. Iconic has far surpassed the amount of icons we promised and we’re very excited to show you exactly how. All of the new techniques we discussed from day one have matured to the point where we’re now focused on the ease of use rather than making them work in the first place.

Icon styling didn’t get a lot of wows when initially showcased, but we’re convinced it will have the greatest day-to-day impact for designers and developers. We spent a considerable amount of time working through the best way to style our icons and we feel we’ve done a good job to make a streamlined process. We don’t want to get into the nitty-gritty details, but we’re confident Iconic will provide a level of visual control over icons not had before.

There’s been a lot of talk around the subject of responsive iconography and it’s one of those approaches that can easily be missued or even abused. Through using Iconic, we now have much more experience using responsive icons and therefore have gained a strong understanding of when/how to use it. Our goal moving forward will be to share what we consider to be the best practices of responsive iconography so that it will hopefully not be abused (too much).

Responsive Unlock Icon

It’s also worth noting that we’re happy with the aggregate aesthetic of Iconic across all of its icons and sizes. We’ve been working to create a consistent aesthetic across the illustrative style of the large size and the smaller size’s more utilitarian style.

Responsive Sun Icon

We’ve also done a lot with responsive iconography from a technological point of view. The process of switching sizes is not going to be rocket science—we think you’ll get it in a flash.

Last but not least, we’ve made a lot of progress with our smart icons. In fact, we think it will not only change how you use icons but how you think of them. We have so much to talk about when it comes to smart icons, but we don’t want to spoil the surprise.

We’re more excited than ever

Things are really coming together and we’re convinced we have something special. We’re also convinced this extra time is going to make the difference between a product with interesting potential and a product that delivers from day one.

So it’s February. That wouldn’t normally worth mentioning, but it is in this case because we said Iconic would be publicly available as of January 2014. So, what gives? We thought it important to give you an update on what we’ve been up to, where we are… more

Written By
P.J. Onori —

Iconic Preview Site

Over the last few weeks we rolled out early invites to the new, in-development Iconic site for our lovely Kickstarter backers. Here's a quick peek of what we're working on for the site that will be publicly available and launch along with Iconic in January.

Preview Home

We have high hopes and expectations for the new site—we think it’s core to the understanding and adoption of Iconic’s advanced features. We’re giving very early site access to our Kickstarter backers as a token of appreciation for their support and so they can influence Iconic’s design and development. We’re still early on in the process, but we already see the potential.

Icons are just the starting point

Iconic has always been much more than a collection of icons. We consider the website (both public and customer-only sections) to be an equally important part of our product. Our preview site is the first step in this direction. Many of the concepts and methods we’re using in Iconic are new or not yet commonplace. This makes education a big part of our mission—we can’t just make our product in a vaccum, we need to clearly explain how to best use and successfully take full advantage it. Toward that goal, here are a couple of the first site features we've built:

Community

The Community section on the Iconic site is where we want our Kickstarter backers (and subsequently our future customers) to have a tight communication loop with our design and development team.

Preview Home

This section will enable discussions about Iconic with us and with other people using it. We’ve rolled out the Community section early for our Kickstarter backers to start getting their feedback on the icons and to gain a better understanding of how and where Iconic will we used so we can focus our efforts. Our hope is that this solution will evolve and continue to be valuable after launch.

Icon Previews and Details

To start providing contextual documentation that creates a clear understanding of how to use Iconic we’ve created the online equivalent of an icon contact sheet.

Preview Home

This one-page currently gives our Kickstarter backers access to the frequently updated, in-progress state of all icon designs (even if they’re not all ready to be used yet). At the moment this page displays our icons with live searching and filtering functionality, but the goal is for this area to also be the one-stop-shop for everything you need to know about each individual icon. This section will allow previewing icons at all three sizes and gives quick access to implementation reference details (e.g., code-snippets & API hooks for the Smart Icons) and usage and styling examples on an icon-by-icon basis. We’re focusing on providing a considerable amount of depth that will also be easy to use.

This is one way that we think will be valuable to learn about and use Iconic. We’ll discuss some others solutions and resources we are working on as they are developed.

So that’s a little peek at the new Iconic website in development. We’re adding and updating things almost daily and are excited to open it up to everyone in January!

Over the last few weeks we rolled out early invites to the new, in-development Iconic site for our lovely Kickstarter backers. Here's a quick peek of what we're working on for the site that will be publicly available and launch along with Iconic in January. We have high hopes and… more

Written By
P.J. Onori —

Designing Iconic Across Different Sizes

SVG is great because (as its name suggests), it’s scalable. This means that SVG images, including icons, will be super-crisp at any size, right?

Nope. If you’ve followed our Kickstarter project, you probably know what we’re going to say, so we’ll be brief.

It’s easy to assume that vector images are the salvation for legibility, but that simply isn’t the case. Even if an image is put together as vectors, it still renders on the screen through pixels. Meaning if your vector points land on floating-point numbers, your “crisp” image is going to show up with sub-pixel ugliness. High pixel-density screens will help alleviate this, but it doesn’t need to (nor should it) be a pre-requisite for sharp imagery.

Additionally, icons have optimal legibility ranges—just like typefaces. Meaning an icon designed for 32 pixels will often be illegible at 50% and appear chunky at 300%.

That’s why Iconic is being designed at three sizes. We knew from the start that this exercise would be difficult and time intensive. We have not been proven wrong. We’ve quickly learned that designing an icon set at three sizes is just a step in the process—it’s something you do, and then do again, and again.

This is Tough

Designing icons in three sizes is so challenging because each size doesn’t exist in a vacuum. What you’re really doing is designing an icon system which is applied across three sizes. This means that each icon must be compatible within the system you design while not sacrificing its own aesthetic. It’s the classic issue of balancing the group with the individual. When you’re dealing with 5 or 6 icons, it’s not too tough. When you get into the hundreds, it becomes pretty tricky.

Many of the icons we’ve designed to this point were made with the explicit understanding that they’d need to drastically change before shipping. The more icons we design, the more variables we begin to uncover for designing Iconic across three sizes. However, this part of our design process will not be over. Ever. The system we create may need to be rethought and modified whenever an icon is added.

Specific Challenges

So enough generalizations, let’s get into the specific challenges we’re addressing when designing an icon at three sizes.

Keep in mind that all designs shown below are still in their initial stages and are highly subject to change.

Modified Proportions

Scaling an icon is not a simple global modification. It's more of a series of minor modifications to all elements in the icon. A good example of this is the tags icon. When you see the icons at their intended sizes, they (hopefully) look optically similar.

When you normalize their dimensions however, there are drastic differences between the three.

Notice how much is different. The proportions of the tag gets narrower as the tag gets larger, the hole at the top gets smaller and the gap between the front tag and back tag is thinner. It’s also important to note that these changes are not linear, they are actually closer to being logarithmic. This is made clear with the differences in line weight between sizes.

The line weight across the three icons is not doubled when the icon size is doubled. That would make things much easier, but the icons would have a very different aesthetic across all three sizes. As seen in the image below when the ban icons’ sizes are normalized.

Border radius, just like every other attribute on our icons, will vary at each size—we just don’t have a strong grasp on how we’ll be applying rounded corners to our icons.

Additional Detail

Larger sizes provide additional room for more detail. Our microphone icon example from the Kickstarter campaign made this abundantly clear. It turns out that this approach makes a lot of sense for icons representing nouns. Such as a book:

The challenge of adding more detail is to make sure you’re not going off the deep-end and just adding detail for the sake of detail. The goal of this exercise is to try to only add the things we really wanted in the smaller icons, but just couldn’t fit.

The place where adding detail stops making sense is for symbols representing more abstract concepts. Take the stop icon. It’s a square. That’s it. There is no good reason to start tacking on greebles and doodads just because.

Arrowheads

One of the most highly used icons on the web is the arrow. Arrows take on many manifestations, but the arrowhead is abundant on the web. We really want to nail the arrow icons in Iconic and we’ll likely take multiple passes at it before we’re happy with the outcome.

As we’ve mentioned in the past, legibility is a big deal for us. At Iconic’s smallest size, we’re currently going with the most legible angle of 45° for all arrows. However, as the size increases, the angle becomes less severe due to the diminished concerns of legibility.

Notice that as the arrows’ sizes are normalized how chunky and unappealing the left-most arrowhead is, but how much more legible it is at small sizes*.

*Since we’re using fluid-sized images, the legibility may vary based on screen/device. Sorry. :(

Making This All Work Together

The biggest challenge by far though is making all the above challenges work together well. Every element we add (or subtract) needs to be done with an understanding of how it impacts the decisions of every other icon at size. Yikes. Since we’re still in the initial design phase, we haven’t had to tackle this issue head on yet, but we know it’s coming.

Did We Mention This Was Hard?

But that’s why we’re doing this and that’s why people backed our project. The process has been amazingly rewarding and we’ve learned so much more about the process of designing icons. The truth is, we like that it’s challenging. We also think it’s definitely worth the time and effort. More to come very soon.

SVG is great because (as its name suggests), it’s scalable. This means that SVG images, including icons, will be super-crisp at any size, right? Nope. If you’ve followed our Kickstarter project, you probably know what we’re going to say, so we’ll be… more

Written By
P.J. Onori —