How to use Responsive Icons and Illustrations
What responsive icons are?
Responsive icons have been around for quite some time now… Since responsive websites have become the norm, it became clear that using a single icon across different screen sizes and screen densities was becoming more of an issue… That Font Awesome Calendar Icon looks fine at 24px but at 96px it looks meh!
The solution to this problem was and is responsive icons, icons that would respond to different changes in screen size by adding or removing the detail from the icon a sit grow or shrinks.
Why we’re using responsive icons.
It became clear to us very early on that having a font that worked fine in the 14px — 32px range wouldn't work as the screen size or component grew… basically the whole reason for responsive icons idea in the first place 😂
Why I'm writing this article?
When I was researching different responsive icons articles I found plenty about why we should use responsive icons but none about how to do it or best practices. What I wanted to know is, being a novice in the responsive icon world was when and how I should add more details to the icons, what sizes I should start to change the icons, how they should be changed etc. So in this article I’m going to detail how we added and removed detail when resizing icons, when we felt the changes were necessary and try to give an outline in how to do this on your own products.
How we did it
We knew one thing straight out of the gate that we wanted our icons to follow the same pattern/scale of our typography system, a lot of the time our icons appear in our products it is accompanied by type (at least at the smaller text sizes 😂 ) so it made sense that they work well together.
So for the smaller sized icons would follow our typography scale. We designed each icon using a 24px icon grid, The 24px grid had a 2px padding leaving 20px canvas to design the icons in. We used the keyline shapes grid borrowed from the Material Icon system to maintain a consistent visual weight so that the different shapes looked consistent in size despite the differences in the shapes.
The icon design itself was done using a 2px rounded stroke to match our UI style in our product and resized up and down within the typography scale.
After 32px we felt that the icons need to become more of a Spot Icon/Illustration, Adding breaks in the lines and a background colour blob (or blot or whatever they’re called) just to add a little more colour and fun, we also removed the colour line and replaced it with a background colour that is offset by a few pixels adding more weight to the icons.
These Spot Icons went from 40px-96px still following our typography scale until 56px (we don't have a bigger font size than that), we then decided to follow our 8pt scale that we use in our spacing just to remain consistent at some capacity 😂.
If we need any icons/illustrations bigger than 96px we use full Illustrations (Spot Illustrations, Scene Illustrations lots of different names). Our Illustrations would be larger and we would add more details and sometimes more colour if required.
So to Recap
- 14px-32px we used standard system icons using a 24px grid.
- 40px-96px we spot icons adding more colour and a blob behind for more visual weight.
- 96+ we used spot illustrations adding a lot more detail and sometimes more colour.
Conclusion
I am by all means no expert at this but I am passing on the details on what worked for us and if you can help me out by giving feedback or pointing me to an article that can help explain step by step a better message I would love to read it.
Give me some love and follow me on social media 😘 and hit me up if you’re looking for an Illustrator or Iconographer 😏…
Find and follow me at dribble, instagram, behance, linkedin and at albarrydesigns.com
