responsice icons

in Icon design

Do We Really Need Responsive Icons?

Responsive Icons is the result of responsive design combined with vectorized icons. Recently we have seen some interesting demos, but as with all new things we should consider the drawbacks and benefits of this new technique.

Recently we interviewed design technologist P. J. Onori of Waybury about the Iconic KickStarter project. The goal of the project is to make icons “smart” so they can be styled with CSS and manipulated with JavaScript. The abbreviated explanation of how this is achieved is by adding the SVG icon and its elements, with properly named class attributes, to the DOM just like any other element. As part of the web page’s DOM, the SVG DOM is exposed to web page’s CSS and JavaScript.

A secondary aspect of the Iconic project is that the new and improved set will also be responsive, with three versions of each icon designed and optimized for display at very small, medium, and very large sizes. The concept of responsive icons is the same, at least functionally speaking, as responsive images. When a user accesses a site that implements the technique, they will see a different version of an image (or icon) that is optimized for their screen size.

British designer Joe Harrison has also created a simple, yet impactful, web site at ResponsiveIcons.co.uk, that demonstrates his own, more elaborate, version of the concept. It appears that both designers have arrived at the concept independently of one another. Waybury’s primary concern is developing a standard for making SVG icons and the elements therein accessible to CSS and JavaScript. Responsiveness is not a primary concern of the project. Joe Harrison’s site focuses solely on responsive icons.

Responsive Icons Demos

Waybury and Joe Harrison have created demos of their respective takes on the responsive icon concept. Waybury’s demo shows a microphone icon at three sizes and with various levels of detail. Joe Harrison’s demo shows the Home icon, similarly, at several different sizes and with progressively more detail.

ResponsiveIcons.co.uk
Icon Responsive Icons

Mixed Reactions to Responsive Icons

Reactions to the Responsive Icon concept have been mixed. Some designers are on board with the idea but many are not. The primary objection is that icons are an important element of the user experience and changing the look of the icons from experience-to-experience will degrade usability and create inconsistent experiences for users. I am inclined to agree with the objection that delivering icons that look different from experience-to-experience is a usability error. P. J. Onori said it best in our interview when he said, “icons have become the native language of computer interfaces”.

Allow me to clarify here, though, that I am not opposed to the Responsive Icon concept, quite the contrary. I am only opposed to the idea of showing significantly different visual representations of the icons in different experiences. This is a different issue than delivering a different file.

A Proper Use Case for Responsive Icons

In our recent interview, icon designer Tom Nulens (a. k. a., Sodafish) compared icon design to both logo and typeface design. Icon design shares many of the concerns of both design disciplines. Because the size at which icons will likely be displayed can vary quite a bit (24/48 pixels on Android, 30/60 pixels on iOS, etc) a single icon design may not be ideal for every context.

Seasoned logo designers and typographers are well aware of the subtle, and not-so-subtle, visual differences that can occur in a design depending on the size at which the logo or type face is displayed. It is often necessary to thicken the strokes of a typeface displayed very small or to widen and/or letter space characters at smaller sizes.

Similarly, stroke weights, proportions, type, and negative space may need to be adjusted on logo versions intended to be displayed at very small or very large sizes. Very small areas of white space in a larger dark area will tend to fill in. Lines that look thin at small sizes can seem quite chunky in very large reproductions.

In the example below, the negative spaces that form the lines on the ruler are legible and proportional in the smaller size but as the icon is enlarged, the white lines take on as much visual prominence as the surrounding black of the ruler.

png;base6490f5ab02cfae5091

However, if we make the lines on the ruler thinner across-the-board, the larger sized icon looks aesthetically pleasing, but the lines fill in at the smaller size and become illegible.

png;base64cc5cee2845fd925b

Responsive Icons allow us to optimize the relative proportions and line weights for the reproduction size and to maintain the aesthetic integrity of the icons. We have not altered the meaning or even the look of the icon. In fact, most users would likely not even notice the difference between the two icons. It is this last example where Responsive Icons can fully express their usefulness.

png;base6467cc33fc56243aaa

Conclusion

As a professional icon designer, I want my icons to be the best and most useful they can be. The Responsive Icon technique can be a very useful tool for icon designers in the use case described in this article. This technique has benefits and drawbacks just like any other tool. In closing let’s look at some of them.

Drawbacks

  • Risk of confusing users by presenting significantly different icons across experiences
  • Increased amount of work for icon designers due to the need to design multiple versions of each icon
  • Potential for abuse and increase in page size

Benefits

  • More fine-grained control for designers over icons at different sizes
  • Icons optimized for different grid sizes on different devices such as Android, Windows Phone, and iOS
  • Aesthetic consistency of icons at different sizes through visual rather than mathematical scaling

Whether or not Responsive Icons catch on remains to be seen. The idea is new and we have yet to see a fully-functioning example in a production implementation, let alone enough implementations to draw any conclusions based on data. The idea is worth exploring to understand the potential impact, both positive and negative. Just like the evolution and adaptation of the different species of life, innovations make false starts and through adaptation to their environment, often head in unexpected but beneficial directions, and ultimately the usefulness of something new determines its longevity. Let’s wait to see how this idea evolves before drawing hard and fast conclusions.

Photo Credit: The house icons in the banner image on this post were created by and used with the permission of Joe Harrison.

Write a Comment

Comment

12 Comments

  1. Scott, Thanks for this inteesting question and article.

    You sum up well the benefits and drawbacks, but I will insist on the main pitfall:
    it will take a lot of time to create so many variations. And it will be a boring task.
    How many designers will be able to commit to that?

    The interesting way to follow is to make the icons white space consistent as each size, to not have huge gap when they are displayed in large size.

    Can this be automatized? Similar to what exist for the typography: you have a glyph skeleton, the essential letter line, that can be easily adpated to a thin, normal or super fat version.

    Could we obtain that using the SVG settings? Like changing the stroke width? Or playing with the path offset? That would work for the iOS7 – monoline style at least, we did it for our new streamline icons collection (in Illustrator so far) but that could be adapted to svg.

    If creating size variations can be automatized, it will become a standard.
    If it require too much designer efforts, I’m afraid it will remain a proof of concept.

  2. Vincent,

    Thanks for starting the discussion and great comment. I think the amount of work will be prohibitive but I also think that obstacle could be a natural divider between what constitutes premium icon packs and everything else. As is the case with any product, there are creators who are willing to (driven to?) put in the extra effort, costs be damned. On the other hand, problems are always opportunities and perhaps this new problem will spur more innovation in the area of design techniques and/or tools.

    Scott

  3. Great question Vincent! We’ve been spending *a lot* of time on this subject for the upcoming Iconic.

    Unfortunately, the most honest answer I can give is “we don’t know”. An amazing amount of work can be accomplished through automation and a big part of the Iconic project is to help push tooling forward. That said, I highly doubt there will be one-algorithm-to-rule-them-all for true optical icon adjustment.

    The types and styles of icons vary so much that I think there will ultimately always be *some* manual labor associated with this kind of task. The only solace that I can provide is that, first, it’s worth the time to do and second, a lot of the menial tasks can be accelerated with automation.

    We hope to have a lot more to share on this subject in the coming weeks/months.

  4. > Scott: you’re right about differentiate the free icons packs from the professional ones.

    > P.J: I’m glad that you join the conversation :-)
    If you already have some automation process that’s great. What I meant before is that if you can automate 80%, then manually tweak the 20% left, you will work 4 times faster! And it will make this concept a success.
    Your project is impressive and I’m glad you open some new perspectives: can’t wait to see the result of what you are doing!

    I’ve written a quick article to precise the concept of using SVG to automatize the variations of width with outline icons. Check it here: http://webalys-blog.blogspot.com/2013/12/responsive-icons-using-svg-outlines.html

  5. If we could figure out a way to describe an approach for automating the conversions, or at least describe certain use cases, I can probably write an Illustrator Script Extension. As Vincent learned yesterday, I have an upcoming blog post and open source project for a Script Extension that will change the artboard size in Illustrator icon files to either a dimension the user specifies, or to the size of the artwork visible bounds. I used the script to convert about 650 icons yesterday. But I digress. The point being that some automation should be possible using a Script Extension (in JavaScript). Even if the script only eliminates a fraction of the work, it could still ameliorate the problem.

  6. Great article Scott,
    I totally agree with you in terms of lack of consistency in the examples by both PJ and Joe Harris. To me that would be useless. The example with the ruler and pencil is more useful I think. Although I’m not a thin line fetishist like yourself and Vincent :). I personally have no problems with designing pixel perfect icons for several sizes, I do it all the time. I guess the need will fade away when screen resolutions will go up. Icon fonts on retina displays look pretty amazing, but I love the idea of having full control on how an icon looks at any relevant size. I prefer whitespace lines on the smallest sizes a little thicker to make it more legible. With bigger sizes I really don’t like these whitespaces not to scale at all. It would be great when I just could say: sizes up to 24px > line thickness 1px. Sizes between 24px and 64px > line thickness 2px etc.

    When PJ’s project has matured a bit, I will definitely design icons for it, but not in the way of the inconsistent design examples.

  7. “It would be great when I just could say: sizes up to 24px > line thickness 1px. Sizes between 24px and 64px > line thickness 2px etc. ”

    That’s an interesting point. That’s really what responsive is supposed to be about, right? So I wonder if it’s possible to embed the responsiveness in the SVG itself rather than create completely different versions. I think that’s kind of what Vincent was getting at with the line weights, but we need a solution that works with shapes as well as lines.

  8. Unfortunately, it’s not that simple from a delivery aspect Vincent. If you are pulling the icons into an application like Illustrator, you’re fine. But if you’re changing the stroke width of an SVG on the client side with CSS, the process turns out to need a little more work. In addition, you’ll often need to shift the points of a path with a different stroke width to maintain pixel-level crispness. We’re still working through all of this – it’s a fun challenge.

    I definitely see what Hemmo is saying about consistency. We wrote about our progress on this matter here: http://blog.useiconic.com/designing-iconic-across-different-sizes/. The one thing I’d say is that when one uses an icon at extremely large sizes, it’s use case is often quite different from your average icon. In many ways, icons at those sizes take on a role closer to an illustration. So for some of our icons (mostly those representing nouns), we begin to treat them more like illustrations. That’s one reason our icon sizes are 16px, 32px and 128px. The 128px version is intended to be more ornamental – similar to a display font. Too much consistency wouldn’t fully take advantage of the increased resolution. The goal is for all the sizes of our icons to feel like they’re working together, but be different enough to justify each size’s existence.

  9. P. J., can you give an example of a use case for the 128px icons? I typically think of the purpose of an icon to indicate the meaning or use of an affordance in a user interface. When icons start crossing over into the illustration realm, doesn’t that become part of the content?

  10. P.J, I agree with this need of a “illustration” version of the icons, the parallel with the display version of the font is excellent!

    Scott, We can see the icons more and more used through websites as illustrations, especially for short paragraphs about the benefits of a product or application.

  11. Vincent, I see the use case you describe a lot. I’m going to play devil’s advocate here, though, and point out that semantically, this is incorrect use of an icon. That said, 3D and “flat” icon styles have greatly blurred the line between icon and illustration anyway. So I understand your point and it’s well-taken.

  12. That’s a good question Scott. One of the big uses for large icons are those typical feature breakdown sections you see so much. This isn’t the best example, but go halfway down on Heroku’s website and you’ll see a vector illustration describing their service offering. I think you’re right – icons begin to blur into content in this type of use, but it is still very much *communicational* content.

    I think icons have a much broader definition and role in today’s interfaces. We have a lot to talk about on this subject, but not quite yet. ;)