The Next Big Thing: Responsive Icons

Honestly, this topic sounded a little bit strange to me when I first learned about responsive iconography, as we have recently adapted icon fonts in order to make sure they scale well for various device. However, the idea of responsive icons it takes both responsive design and iconography a step further, much further.

What are these said responsive icons?

Responsive icons do not mean that the width of the screen determines how big an icon is displayed; actually it means that a different icon is displayed based on the size it is presented in. This means that screen size does not matter but the size of the icons itself does. This is because some icons will be displayed in various sizes – at the same time, on the same screen.

SEE ALSO: Design Trend: Long Shadows

The difference between icons won’t be anything more but the quality of detail displayed. We are talking about having a lot of detail in an icon which is displayed big at say 500px by 500px, a little less detail for an icon which is displayed 250px by 250px and as little detail as possible for an icon that is only 25px by 25px in size. I’m sure you can image that a single icon would look boring and even render poorly if you have very extensive icon and displaying it very small.

Responsive Icons

Why is this important?

With the boom of font icons, responsive website and minimalistic design our styles has changed to implement flat icons so much more in our designs. Now, I’m not saying there is anything wrong with that nor that all design out there do or should use flat font icons but those who do can take it a step further.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

By creating responsive icons we are taking iconography to a whole new level where it helps create a better experience, better usability and better visual design for users. By going with responsive icons the idea is to make the web better, which is what everyone wants and needs for you as the designer and your users.

Responsive Icons

How does Iconic fit in?

Iconic is a product that if you have not heard of it, you at least have seen it in use as they created a set of icons that just so happened to be very popular. The team at Iconic is taking a plunge in creating responsive icons; they are they force behind this new movement, if you will.

Iconic

Iconic recently launched and successfully finished a Kickstarted campaign where they received $92,624 – yes you read that right – which is 618% of what they were asking for (they only wanted $15,000). With this money, they are able to research methods and technologies, which will allow for responsive icons as it currently is not that easy to do. Basically, they are aiming to revolutionize web iconography.

“Just because an image is scalable doesn’t mean it’s legible at all sizes. Most visual elements have a sweet spot in terms of legibility—icons are no different in this regard. To achieve a significantly greater range of legibility, each icon will be designed with different amounts of detail to look great for three different size ranges: small, medium and large.”

What is their current take on it?

There are a few ways you can currently go about creating and implementing responsive icons. Let’s go over some of the ways Iconic has revealed as possible solutions.

Media queries

The simplest and most obvious approach is to create media queries and pair them with web fonts. The idea is that although each icon – the ones with most and least detail – has its own font weight (such as 200, 400 or 600) and are indeed all part of one font face; therefore, when you resize a browser you change the font-weight being used at a particulate screen width to have appropriate icon show.

However, this method falls short when you want accuracy. As it seems, media queries are still a key concept in bringing various icons at different conditions, read on to find out what I mean by this.

Media queries

Element query polyfills

I’m not sure if you know what element query polyfills are so let me explain them to you really quickly. You can think of them like media queries that are set on elements instead. Take for instance the example below, what it means is that when the footer is at least 250px wide, make its background white. In a way, it is a much more direct and concise version of media queries.

footer[min-width~=”250px”]{
       	background: #fff;
}

The idea of element query is a very new concept that is not at all supported by browsers but it works if you implement it with JavaScript. You can find out more about it here.

The idea, which Iconic is after with element queries, is very similar to that of media queries where when the size of the icon changes – its font weight does too giving you the appropriate icon. The reason this is a cool concept is because combining element queries with media queries allows for a very specific way to select the right icon at the right time.

Media queries

SVG breakpoints

This is the third and final way in which Iconic has publicly talked about exploring, SVG breakpoints. The idea with SVG breakpoints a little interesting – it is for sure thinking outside the box. SVG allows for dynamic control of elements and icons so this would take static iconography to the next level once more. If you imagine combining this with media queries where the icon itself can be trigger to change independent of the screen’s actual size. However, that is a little far fetch as SVG breakpoints are hard to integrate with DOM at this point.

What to expect?

What Iconic is after is a big leap of innovation when it comes to web iconography; and let’s hope they will achieve it, and soon! As per their Kickstarter campaign, they are promising to deliver a full open source toolkit to aid in customization and efficiency. This toolkit would allow integration of any vector icons in addition to the sets they will be providing.

On top of that, they are setting out to revolutionize icons a step further once again. One thing they mentioned in their camping is their desire to reinvent current but outdated icon conventions such as the dire floppy disc as the save icon. We no longer relate to floppy discs as none of us has seen one in years, not to mention actually used one. The Iconic team is setting out to correct some of these outdated aspects of design; I have my finger crossed for this, as it is one hell of a challenge.

Conclusion

The take away from this is very simple; I have given you an overview of an up and coming technology that will make the web so much better. Can you image the types of experiences we will e babel to make? Can you image what other usability or UX innovations will this set into motion? I have high hopes for what Iconic is doing. I wish them the best of luck and hope they get this done as soon as possible!

Paula Borowska

Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

Newsletter

45 Comments
  1. Andrijana jarnjak Nov 8, 1:28 pm

    I think that general idea is ok, but isn’t quite user-friendly. Some complicated icons will become unrecognisable which is not good user experience, in my opinion..

    Reply
    +14
    • Todd Nov 8, 2:38 pm

      Isnt that the point of it? At certain sizes you change the look of the icon so it is recognisable.

      Reply
      +36
      • Andrijana jarnjak Nov 8, 2:49 pm

        You shouldn’t change the look of the icon, for me it’s just bad practice. Best way is to think about mobile first when developing website and keep usabillity your top priority. If you see demo above, you’ll notice that “home icon” becomes unrecognisable at the smallest device resolution. And that’s pretty simple icon. What about more complicated ones? Not to mention amount of custom work needed, like @Iconut and @Sugarskill stated.

        Reply
        +4
        • Dominique Briggs Nov 12, 1:27 pm

          Totally agree with Andrijana. Personally I don’t think this is the “next big thing”. Maybe it will give designers some wow factor but in the end it doesn’t sit well at all with some solid usability principles. Principles that are supported by years of research.

          The example above I saw a while ago and it gets to a point where the icon becomes more of an illustration. At its largest and says “house” rather than “home”, “home” is what I assume it’s trying to communicate.

          Reply
          +8
        • Gustavo Vieira Nov 13, 8:23 pm

          Agreed, you can make some improvements at the icon following pixel prefect principles for instance, to avoid blur and distortion, but change it entirely will definitely bring issues on usability when the user has access to the content from different devices.

          Reply
          0
  2. ionut Nov 8, 2:07 pm

    The work load is huge for doing an icon set responsive. I think the best approach will be to do one 16×16 version and the big version. And use the power of svg + css to do the magic. This is a joke project from my perspective.

    Reply
    +9
    • Robert Nov 12, 1:41 pm

      I would love to hear why you think this is a joke project.

      Reply
      +2
    • Adrian Nov 12, 2:00 pm

      It an nice idea, and it would make sense in the case of mobile devices for which the DPI and aspect ratio fragmentation is huge.

      I still have to agree with Ionut and Andrijana that you need a full team of developers to create an advanced/complex app and in some cases UX lacks.

      As seen in the example provided above, buttons involving “Record Audio”…, I would say that there is no trace of UX in there… :(

      Unfortunately this can only work in the case of similar designed icons.. which just reduce the level of details at a lower resolution.

      Reply
      0
    • Mikael Boutin Dec 2, 9:30 pm

      SVGs seem to be a better option;

      Scalable, effortless in both sides (Frontend developper and the designer)

      Reply
      0
      • Native Imaging Dec 11, 7:00 pm

        Well. i love SVG icons. but each .svg icon is an http hit. Ive seen tests on using SVG sprites, but the performance tests show that just using pngs is actually smoother. My personal preference is to create and use my own font glyphs to take advantage of scalable icons while reducing http requests.

        As far as icons that change using CSS element queries, i like it better than media queries but, there is rule of thumb in icon and touch design that clickable objects need to be no less than 34px to 44px minimum, which is plenty of space for using only one set of icons. This should encourage better gui design for different browser screens.

        Reply
        +1
  3. Sugarskill Nov 8, 2:17 pm

    This is a damn enthousiastic thing. I am implementing icons right now on my blog.
    It is already hard to find sets who get along together to get all the icon thematic wanted, but it complicate things when different set are detailled at different sizes.
    Without talking of a same icon looking good in a big menu button, and ridicously bold heavy crappy when it’s small in the top bar for example.

    The devil is in the details, responsive icons are sure an evil good news.

    Reply
    0
  4. 3 Web Ninjas Nov 8, 3:28 pm

    So meaning to say… mobile users could only view the crappy icons?

    Reply
    -4
    • Sugarskill Nov 8, 4:03 pm

      In fact no, the idea is to have simpler but clean icons on small sizes, and more detailled on bigger screens.
      Progressive enhancement applied on icons.

      Lot of icons looks really good on 24×24 or 32×32 format, but when you have to squiz them under 20px, they look too bold.
      Just take an example of the icon earth, let’s say a circle is wide enough, with the earth map inside, looks good big, really crappy small.

      @Andrijana jarnjak:
      I am mobile-first, except there is a menu where the icons are 64×64 looks awesome, but cannot put them in my top bar then when into the category, too ugly.
      So what is the solution: taking another set of icon which would fit less my thematic, let the ugly render of the small icon or just not use it at all and look for another solution?

      The demo is just a demo to make a point, without talking about enhancing / changing details, if we could just manage the weight of the icon font already, that would be great.

      “Not to mention amount of custom work needed” > custom work is what make a difference between freebies and quality product who deserve to be paid.
      I could totally spend good amount of money on an icon font which I’m sure will produce the result I wish.

      That already apply for most of textual fonts, variations and custom ones ain’t free.

      Reply
      +5
  5. George Hammerton Nov 8, 5:59 pm

    What a great idea, we’ve been used to creating different icons to suit varied resolutions on iOS and the Mac but the idea of doing it on the web is fantastic. One of those things which seems obvious when you hear it.

    I’d love to see how they replace the floppy disk, it’s one of those icons which is so universal, even a more appropriate form could take a long time to become accepted. If they manage to come up with something which sits next to the learnt icon for save and is even more obvious I’d be ecstatic!

    Can’t wait to see how this project progresses.

    Reply
    +1
    • Chris Giddings Nov 29, 7:24 pm

      I was going to say something about this myself. With icon design for operating systems we’re already working with this kind of responsiveness. This is especially true with OS X which brought responsive icon design to the fold in 2000 with the first release of Mac OS X supporting a visually scaled set of three icon sizes at 128×128, 64×64 and 32×32 with an optional (supplemental) miniature icon at 16×16.

      I think bringing this kind of thinking to the web can enhance usability when used well, but certainly could detract when the foolhardy overuse iconography in their designs.

      Reply
      0
  6. Chris Nov 8, 6:05 pm

    Aw, i would’ve totally loved to back them! This is my first time hearing about the open source Iconic set and responsive icons look like a neat idea. I can’t wait!

    Reply
    +1
  7. Adrian_Meri Nov 8, 7:07 pm

    When people will learn the icons to use them intuitively, will it be easy for them to find different icons on smaller screen? The whole idea is great, but the usability and user-friendliness is pushed to the behind.

    Reply
    0
  8. evilmonkey Nov 8, 7:54 pm

    I agree with Ionut… in the sense that it tis a lot of work to create different icons and details of the bigger ones.

    But over all is a great Idea!!

    Reply
    -2
  9. Ahmed Bolica Nov 9, 12:29 am

    Amazing :)

    Reply
    0
  10. rich sanchez Nov 9, 10:25 pm

    i think this is an awesome concept but i agree with some of the folks here. if you change the look of the icon at various sizes, people will get lose that attachment they have to that icon. i think it is best to do simple responsive icons where the icon just gets larger or smaller depending on device

    Reply
    +1
  11. 3 Web Ninjas Nov 10, 4:57 am

    Icons doesn’t need to lose details in order to fit onto the screen. You can rearrange them in different manner without losing the awesomeness.

    Reply
    -1
  12. EJ Frias Nov 11, 9:23 am

    Better experience, better usability and better visual design – I guess the third smallest icon (the home icon from the above demo) already fits on these three criteria. I cant think of any more icon that’ll do, if there is I think the ratio will be 1:5. This is a good idea, probably not the next big thing.

    Reply
    +1
  13. veysel ozdemir Nov 11, 12:05 pm

    Great idea! Now was the time :)

    Reply
    -1
  14. Robert Nov 12, 1:38 pm

    @(half of the comments) Of course it’s a lot of work but that’s why they did the Kickstarter campaign — so they can really concentrate on doing this.

    Also, how is this not user friendly? Maybe some people are just afraid of something new and are now looking for reasons against it.

    I personally believe that this is a great tool and — if used wisely — will increase the user experience.

    Reply
    -1
    • Paula Borowska Nov 12, 8:19 pm

      I appreciate your reply, Robert. All I want to say is that yes this is something weird, this is something new but the idea is that they will address the concern of technology capabilities and ux as they develop these icons.

      They are trying to solve a problem that I think many designers and devs out there face – how to work in imagery, wether icons or images, in responsive sites to get the best ux possible; responsive design in itself was an improvement to ux and Iconic wants to take it a step further.

      And hell, even if they fail, at least they are trying to change the current standards and that you have to admire them for no matter what!

      Reply
      -1
      • Sergiu Nov 13, 7:33 pm

        No, this is not new. It took me 5 minutes of searching to find four articles on this subject, some almost four years old.

        Reply
        0
      • datenkind Nov 14, 1:09 am

        Better UX? Have you at least a clue what an “icon” actually is? To recognize an icon is crucial. the large “house” isn’t an icon anymore, that’s a simple illustration of an house.

        And hell, what do you think “standards” are? Standards evolved and became best practice. Anything beyond is art and not visual design.

        Reply
        0
        • Chris Giddings Nov 29, 7:29 pm

          Those who originally created visual communication on computing devices might disagree with your assessment. While iconography work has been done for hundreds (thousands?) of years, the implications are understood with technology, and the opportunity to communicate with the user/visitor is ever important.

          Reply
          0
  15. Rootingenious Nov 12, 3:20 pm

    Its very interesting stuff.

    I would definitely like to use this on my website. But I find changing the detail little sad.

    Thanks for sharing it.

    Reply
    -1
  16. Iconify (Scott Lewis) Nov 12, 6:06 pm

    Those who oppose this idea seem to be assuming that the design/look of the icons will change at different sizes. It’s a fair assumption based on the example given with the Home icon but this doesn’t have to be the case. As @Sugarskill pointed out, many icons look great at 64×64 but the line weights don’t work at sizes below 24px.

    Most designers know that weight ratios and proportions don’t necessarily visually scale consistently. Proportions that look great at very small sizes might look anemic at very large sizes and proportions that look great large bleed together at smaller sizes. This very phenomenon is one that logo designers take into consideration when their logo may appear on a small display ad and on the side of a delivery truck.

    I have a new set of icons coming out soon that are pixel-perfect. Each line and area of white space were carefully measured down to the pixel. In general the set uses 3 px and 2px lines and a minimum of 2px white space between shapes. At smaller sizes 2 px of white space is as small as one can go between large black shapes and maintain legibility. However, when that same icon is blow up to a much larger size, that same 2px of white space can seem like too much. Using a responsive approach, I could very easily create the icon in two slightly different proportions and use media queries to load a different version based on screen size.

    I understand the criticisms and agree that this approach can definitely be abused, but I think this can be a very useful tool as well for the reasons stated above. As a professional icon designer, this is just another tool in my toolbox to make my icons as useful as possible for my customers.

    Reply
    +9
  17. Phlange Nov 12, 6:51 pm

    http://www.youtube.com/watch?v=31g0YE61PLQ

    Still a great idea and good look perspective for the future.
    But not always practicable.

    Reply
    -1
  18. Christian Krammer Nov 13, 10:17 am

    Looks like we have no other problems in Web Development, so we have to come up with some new ones. People, think about speed, accessibility, no-JS and a ton of other stuff to solve first. Maybe then you don’t have the energy for such ridiculous things anymore.

    Reply
    -1
    • Chris Giddings Nov 29, 7:32 pm

      Communicating to the user should never be considered a backburner item. Users will accept less functionality if the tool/site has clearly defined usability and communication standards.

      Reply
      0
  19. Adrian Florescu Nov 13, 3:47 pm

    I wonder how the trash icon will look on high resolution screens. :)) Will we be able to see the flies, rats? :))

    Reply
    +3
  20. Sergiu Nov 13, 7:59 pm

    This is old news.
    Apple has been advocating for this for a long time. Search up their developer guides for best practices regarding icon design.
    Also, five minutes of googling this topic takes you to articles on this subject as old as 2010.

    Reply
    +1
  21. Sergiu Nov 13, 8:03 pm

    Also, deleting comments targeting your idea of journalism, not you, is plain wrong.

    You should be happy people find the subject interesting enough to come back to your article and check out the comments section.

    Reply
    0
  22. Iconify (Scott Lewis) Nov 13, 8:18 pm

    I don’t understand the hostility some commentors are displaying. Whether it is a good idea or bad idea, new idea or (2 year) old idea won’t really ruin my day. It’s an interesting topic for discussion … for those of us not fortunate enough to be geniuses like some of the more enlightened commentors who knew about this idea back in 2010. Please be patient and give the rest of us time to catch up.

    Reply
    0
    • Sergiu Nov 13, 8:26 pm

      The hostility started when someone decided four links to older articles on the same subject should not be made public in the comments section of this article. I obviously look like a clown now that they revised their decision and published my comment alongside the ones directly addressed to them and not meant to be published. So yes, I’m pretty pissed at whoever’s mocking an honest attempt at giving you the opportunity to catch up.

      Reply
      0
      • Adrian Nov 13, 8:37 pm

        Hi Sergiu, your first comment go to the pending comments because contains links, so I approved your first comment now, don’t worry.

        Reply
        +1
  23. JermSharWebs Nov 14, 12:17 pm

    My biggest fear of this is speed. The internet is already getting slowed down to the point that isp speeds dont mount to a hill of beans. just last year I upgraded my service to the 20meg plan. My core2duo @ 3.0 has been running win7 since I was on the 10meg service. Tell me why my internet is now as slow as it was on the 10meg for some sites? I even reinstalled windows, tried other machines. Laptops, netbooks and cellphones are slowed down on some sites due to the heavy load devs want to put just to make things look cool.

    Im getting the old Late 90′s early 2000 feeling again. Add new fancy half usless crap that no body browsing even cares about without fixing current problems. great.

    I could see it’s use for games but god the amount of code!
    I can see not changing the whole icon like the house icon did, but the single icon adjust to resolution and browser size. Like this site’s diamond icon. looks good on my pc. On mobile Instead of a giant diamond it could show a small one that fits the screen. Same or less detail. But dont give phones a ghetto, plain blue diamond shape and be done with it, like the house demo does. And why icons? why not responsive images? buttons?
    Character looks ok maybe good on mobile, but on pc…my god the detail!

    Reply
    +2
    • Chris Giddings Nov 29, 7:49 pm

      This is probably a multi-fold problem.

      It could be that having so many devices connected on your network is causing your router/wifi router to do more work than it was optimized for. I’m not saying it isn’t capable of the job, but it may be designed to optimally handle a smaller number of devices connecting through it at once and can’t process so many requests very quickly.

      But, the speed issue might not be only at your end. It could be that your internet service provider is throttling your speed down without you knowing it, and you’re not getting what you think you’re paying for.

      I am consistently throttled by Time Warner and have set up scripts to test my connection to different sources and sites, some I know are super fast others super slow. I have to call in every week-and-a-half or two weeks to force them to un-throttle my connection.

      I pay for a 15 megabit service, but I consistently get between 4 and 7 megabits downstream (from wherever, to me.) Which is unacceptable. We’re just now getting the pseudo-fiber services in our area and I’ll be switching as soon as I can for a 50 megabit service with a dedicated connection.

      Even with the upgraded connection I expect my fleet of devices (iMac, MacBook Air, MacBook Pro, 2 Windows PCs, Nest thermostat, Playstation 3, Playstation 4, Xbox 360, AppleTV, iPad, two iPhones, iPod touch, Nintendo DS, Nintendo 3DS, 2 networked printers, two smart tvs, wifi speakers and a few other items to force me to accept less than promised speeds as well.

      - – -

      Aside from pure technical reasons, other software and internet-of-things devices (Nest thermostats & wifi door locks, etc.) could be polling at different but regular intervals, slowing available speed considerably.

      I find this to be a big reason most computer’s net connections feel so slow these days. We have tons of apps, widgets and tools which are constantly checking up on something out in the ether. I have 8 menulets in OS X which do this, and I’ve come to accept a certain level of degraded service because of it.

      - – -

      Reply
      0
  24. Kreativ Nov 18, 7:56 am

    This is nuts … I mean, where are these responsive thingies head to? I wonder that it will be the next responsive stuff …

    Reply
    -2
  25. Ron Bird Dec 8, 1:35 pm

    In about 1991 I was working with Else Nygren from the University of Uppsala, and they were looking at icons that when you moused over would enlarge enough so you would be able to see the contents of the file. A couple of years later, Kim Fisher at BT Labs was running a project called emotional icons, which was remarkable similar to what is proposed here. Now computing has the spare power it would be interesting to see these ideas take shape.

    Reply
    +2
  26. Brian Coy Jan 27, 4:26 pm

    This is a fairly interesting extension of the responsive design model and a bit of an extreme example to illustrate the idea.

    There are different schools of thought on how to best approach the single data multi-contact needs of the digital world these days. Some advocate Mobile first or responsive design which both are responses to develop once solve for all. Whereas some approach the issue from more of a device check model whereas you serve up the version that is needed by the user’s preferred point of contact.

    When it comes to user needs you can’t always have a single solution to a problem even if its more cost effective for companies and easier to manage when it comes to enhancements and changes.

    There are several other factors that need to be considered such as the load on the device reader. Are you loading unnecessary code to the device to accomidate for the maybes? Would the solution presented here add additional download time to the users over all experience?

    Beyond the technical questions the biggest question that you should be asking is “What task is a user trying to accomplish using a particular point of entry. Not every feature you find in the desktop version of your application/site might be needed on a mobile device. Often you will have needs on mobile you’d never have on desktop.

    Does responsive icons serve a purpose? Sure. Are they practical? Maybe, depending on your approach and the user needs. Do they hinder a user? Test, test and test some more. Don’t guess, find out.

    No matter what your approach always look at the larger picture and make sure to speak with developers if you’re a designer and visa versa when approaching a solution. No one solution can solve for all the needs of the product and its users.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters