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.