"Responsive" has become a bit of a buzzword since being coined by Ethan Marcotte in 2010. Marcotte showcased how elements on a page can dynamically change their layout to better suit smaller displays. Today, responsive design is more-or-less fully integrated into the web. It has grown with businesses buying into the principles of creating mobile optimized and flexible layouts for their websites. But it seems that the essence of what responsive design is all about has been somewhat lost. Although layout is considered the most important factor, responsive design is much broader than simply arranging content.

Responsive design is about context. Therefore, just shrinking or streamlining content on a page isn’t enough. Smaller design details such as icons and logos should follow similar contextual principles to create a truly responsive system.

Icons have become a native language for modern day devices, and we cannot simply assume that they will "slot" into responsive frameworks without certain considerations. They are incredibly effective at communicating something in a very small space, and can transcend language, communicating functionality and purpose to a global audience. They need to constantly evolve and change with users, technology, and design.

The Challenge is In the Detail

The ubiquity of high resolution displays means the quality of icons needs to be addressed. 72dpi icons just won’t cut it on today’s retina displays, so vector-based solutions need to be adopted.

resolution differences

The multitude of devices also poses challenges when displaying icons. We no longer have control over how our icons will look due to the diverse range of screen sizes, from wearables to cinema displays and everything in between. Creating a single icon that works across all these sizes can be a challenge, particularly if an icon is scaled to a very small size, because it can lose both its impact and legibility.

It seems that there is a gap in the thinking between responsive layouts and the actual design detail of the elements within the layout itself.

There are some solutions that have been devised to combat these challenges. One example is using Icon fonts, an effective but somewhat hacky technique of using web fonts to display symbols. Icon fonts allow designers to display crisp and legible icons across various devices. The problem is that the level of detail icon fonts can include is limited.

Another solution is using only CSS to display icons, meaning they, too, will render without pixelation. Again, the problem with this technique is that the icon style is limited to what we can create in code, and can also be tedious to update.

The bottom line is that both these solutions still restrict designers. Often the style of icon—such as color or level of detail—is dictated by the restrictions of the implementation method. This is not in keeping with good user experience, and current techniques do not factor in how icons are read at very large and very small sizes. So there must be a better solution?

A Responsive Solution

What if we could combine the principles of responsive design with the craft of iconography to find the perfect balance of simplicity in relation to screen size? What if the detail of an icon could change proportionately in relation to the screen width? What if icons could become responsive, adapting to the size of a device?

responsive icons GIF

You can see a visual representation of responsive icons at Responsiveicons.co.uk. The concept interrogates the complexity of icons, and the way in which they are displayed across different devices. By creating icons in SVG image format (Scalable Vector Graphic) and utilizing media queries, different icons can be displayed at different screen sizes without loss of quality or legibility. The result is a dynamically changing responsive icon, which is perfectly optimized for the size and context in which it is displayed.

What if the detail of an icon could change proportionately in relation to the screen width?

The Pros
  • Legibility: Icons are more readable at small sizes without being constrained to an ultra-minimal style when displayed at a larger size. With responsive icons, designers have the ability to fine-tune icons to display the "sweet spot" in terms of legibility across multiple sizes.
  • Flexibility: The icons will display varieties of detail depending on screen size. This is particularly useful as there is such a range of screen sizes. I used the example range earlier of cinema screens to wearables—there are huge differences! Designers may want icons to be more illustrative on larger screens.
  • Future-proof: the fluid nature of responsive icons means that icons are already optimized for new devices.
The Cons
  • Time: Responsive icons take longer to design. You could argue that iconography is already a time-consuming process, so why add extra work? Responsive web design is extra work, but the benefits of flexible solutions are becoming readily apparent on a global scale.
  • Recognition: One of the more frequent questions that I've been asked is how responsive icons affect user experience. If an icon changes in style, does this make it more difficult to remember? The answer is initially, perhaps. But optimization will always require differences in appearance of design, and as users become more attuned to icons on different devices within a particular brand, this problem will disappear. If anything, the changing icon may attract a user’s attention, creating a more engaged user.

The Future is Contextual

Icons are only a small aspect of a larger shift in thinking from responsive layouts to responsive design that incorporates all elements. Responsive typography is also something that is being explored, allowing web fonts to become fine-tuned for various displays and devices.

Branding could also start moving away from traditional, static and print-based principles to a more scalable future, with responsive logos and marks being used in design. We may start to see brands and designers loosen their grip on strict guidelines to allow more flexible logo solutions to be put in place.

responsive Coke logos

There are even more exciting avenues yet to be explored. Creating systems that are aware of a user’s age or culture could allow icons to be displayed based on what a user understands. For example, somebody who is 60 may not understand the same things as somebody in their teens, meaning that two different icons could be displayed based on fingerprint identification or facial recognition. This could help people through a complex process in a way that suits them best.

responsive icons age differences

Another example is thinking about responsive design in relation to ergonomics. What if icons could change in complexity based on how far away a person is from a device or display? What other tasks may they be performing at that time? Watching TV? Pushing a stroller or sitting on the bus? These contexts need to be considered if we are to create a truly effective experience when using icons.


Whether the concept of responsive icons is a valid technique for the future is uncertain. But it's safe to say that creating flexible and scalable solutions that are optimized for today and considered for tomorrow can only benefit users, and the products and services that are designed for them.


Article No. 879 | October 2, 2012
Article No. 1 178 | January 28, 2014

Add new comment


Isn't this overcomplicated and completely unnecessary?

The beauty of icons resides in their simplicity and the ability to convey a meaning with the bare minimum besides, changing the icon for every size completely messes up the visual language of a site. It is the equivalent of changing from English to French to Spanish depending on the viewport. Isn't this just a gimmick that will multiply the work of the designer by the number of target viewports?

A good icon will be good for any size without change as long as it's svg.

Thanks for your response Manuel. You do make a good point, although I have to disagree with a few aspects of your argument.

Firstly, changing the language of a website is a drastic change for the user, where as adding/removing elements of detail to an icon (or logo) isn’t. Adding detail to larger icons can help to give an interface more interest, offering a more premium feel. As icons can transcend language, I don’t feel you can compare this concept with changing the content from English to French to Spanish.

Secondly, I am a big advocate of ultra-minimal icon design (see iconsbyhour.co.uk), but we cannot assume that everybody wants to adopt this style today or in the future. The icon for say, a mobile interface might look far too basic on a cinema display. The responsive icons concept aims simply to give designers the flexibility to create the icon they want (with the level of detail they want) which can then gracefully reduce in detail to maximise legibility where necessary.


However, the concept has not been fully tested yet, so it would be interesting to test responsive icons with users, and see how they respond.

Hi Joe,

I have written article on your responsive design in late December. We should also consider Smart Icons by Waybury along with responsive icons.


Do you agree that it will increase the page load which in turn increases loading time?

You can read article here - 



I hope you will read my article. Waiting for your reaction.

Hey Kalpesh, 

Thanks for sharing this! It's great that other designers & developers are taking the initiative to interrogate the concept further. The iconic project by the guys at Waybury is a great example of pushing iconography to the next level.

I would agree that loading time might increase slightly, although SVG files are very small (especially if using the inline SVG code) and seeing as it's a future-thinking concept, I don't think it will be a problem.

Hello Joe,

Thanks for your reaction. Yes, in the future with high-speed internet this problem won't be anymore.