The Community Of Over 578,000

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› small_16 ›› Responsive Icons and Logos for the Responsive Web

Responsive Icons and Logos for the Responsive Web

by Joe Harrison
Share this post on
Share on twitter
Share on linkedin
Share on facebook
Share on reddit
Share on email
Share on print


Why designing responsive icons and logos can help create flexible, future-proof solutions that enhance user experience.

“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 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.


post authorJoe Harrison

Joe Harrison, Joe is a London-based Lead Designer currently working for Great Fridays, a Product and Service design agency. He's worked on a wide range of projects for clients including Pearson, Capita, MasterCard and Nokia. In addition to designing websites and apps, Joe has a talent for iconography, and has been commissioned to create icons sets for clients such as Harrods and The Atlantic Magazine. More recently he's designed and built and, projects that explore new and innovative ways to display scalable design elements on the web.

Share on twitter
Share on linkedin
Share on facebook
Share on reddit
Share on email
Share on print

Related Articles

The road to a good customer experience can be full of potholes. How do you navigate such a treacherous path? One key way is through product thinking.

What is product thinking and why does it matter?
  • Product thinking is key to shaping the best customer experience possible as it helps to identify problems and solve them.
  • By providing a holistic perspective on a product it differs from design thinking and reveals the real product value for customers.
  • Because of its strategic importance, every team member should hone product thinking skills. It’s more than a working framework, it’s a mindset, a culture of customer experience.
Share:What is product thinking and why does it matter?

“Holistic design” sounds like a new flashy trend that’s used without a real meaning behind it. However, the term was present long before UX design was born. Nowadays, when we use “product design” for digital products and “industrial design” for things, “holistic design” makes a comeback to UX design.

What Is Holistic Design? The Future of UX or a Buzzword?
  • To apply holistic design principles is to consider different facets of a product, stakeholders’ interests and the environment within which it functions.
  • Best practices of holistic design consist of involving stakeholders, being sustainable, creating an ecosystem, and, last but not least, going beyond digital.
  • When it comes to holistic design in UX, it’s essential to apply design thinking and reflect on the design system, make sure that solutions are inclusive and consistently invest in UX research.
Share:What Is Holistic Design? The Future of UX or a Buzzword?
Frame 1 Holistic Design

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and