Design, UI, UX, Freebies, Insights
How to Make Responsive Icons: Benefits, Tips and Freebies
Responsive design is not even a topic of much interest anymore as it’s been the norm for quite a while now. You most likely know more about it than a single article can summarize. But what about responsive icons? Scalable iconography is not something we see everywhere so one has to wonder, do they bring anything to the UX? Do they have any benefits for the design? With these questions in mind, today I’ll make a short review about responsive icons, their importance, and what to consider when making them. Of course, I’ll also include free resources from around the web you could download and try for yourself.
Responsive Icons: Overview
Icon by ResponsiveIcons.co.uk
What are Responsive Icons?
Integrated for responsive web, the responsive icons react and change depending on the screen size. Each icon has a minimum of 2 variations with a different amount of detail. For example, the variant of the responsive icon for the bigger screen size will have more detail in comparison to the variant for the smaller screen.
Responsive icons are a good choice for one simple reason. Quality. The issue with most icons is that if it looks great on 128px it might look illegible on 32px or 16px. There are two solutions to that issue. You either design an icon that looks equally legible in all sizes, which requires a lot of skill, testing, and time; or you go cheat-mode and simply create a variant of the same icons specifically for each size. This saves time and the result is very professional and satisfying.
How to Make Responsive Icons?
Let’s start with the best practices and things to consider when designing responsive icons for your project.
- Start with the smallest: It’s much easier to add details than to remove ones. This is why the best practice when designing responsive icons is to start from the smallest icon (16x16px).
- Keep it consistent: Surely when adapting your icon design to different sizes might tempt you to go overboard with unleashing your creativity and that’s alright. However, make sure the design for each variant is consistent with the original icon design that you’re adapting.
- Experiment: Don’t be afraid to add colors for bigger variants in order to fit the brand style guide. After 32px it’s most appropriate to get more illustrative and add more color and fun
- Smooth transition: When you test your responsive SVG icon with different sizes, make sure the transition from the smallest to the largest size and vice versa goes smoothly and logically. This is especially important if you have more than 4 variants of the icon.
If you’re just starting or simply curious about how to create responsive SVG icons, here are some resources you could check out.
This Tutsplus tutorial, for example, explains how to create SVG logos, icons, and images, which change depending on the screen they’re displayed with.
Another resource comes from Font Awesome. It is a popular icon set that provides scalable vector images that designers and developers can customize with CSS. Their Web Fonts + CSS and SVG + JS frameworks include some basic controls for sizing icons in the context of your page’s UI. You could also check this tutorial for sizing icons here.
Free Responsive Icons Packs
Here are some of the free packs of responsive icons in different formats you could check out and use as resources or references for your own designs.
192 Free Responsive Icons by Ramy Wafaa on Behance
Free Responsive icons set by Ramy Wafaa on Behance. This set packs 192 free icons available in colorful flat style, Google material colors, Filled Glyphs, and Line Strokes morphing at 4 breakpoints.
- Free Icons: 192
- File Formats: Ai | PSD | SVG | CSH | PNG | SKETCH
- How to Download: The website requires sharing the page on FB or Twitter in order to start downloading.
266 Free Responsive Icons by Patryk Ilnicki on Dribbble
This is a set of 266 free responsive icons in 3 sizes (16/20/24px) by Patryk Ilnicki on Dribbble. The icons are exported in SVG with no junk for Figma and Sketch (alternative of Material Design Icons).
- Free Icons: 266
- File Formats: SVG | SKETCH | FIG
- How to Download: The project redirects to Gumroad where you need to enter $0 for purchasing the set for free. It requires an email address.
90 Free eCommerce responsive Icons by PlugAndPlayDesign
This free for personal and commercial purposes responsive icons set by PlugAndPlayDesign includes 90 essential icons for eCommerce projects in 3 different sizes.
- Free Icons: 90
- Formats: SVG | JPG | AI | PDF | EPS
- How to Download: The page has a button for direct download.
In Conclusion
Although responsive icons aren’t as widely spread, in many cases they are a perfect solution for adapting icons to different screen sizes and create a better user experience with more dynamics. Currently, designing responsive icons is a little bit underrated but the trend has the potential to grow big. Nevertheless, it’s a life-saver for designers with great visual results and a lasting impression.
You could also check out this cool presentation for responsive logos that adapt the same principle.
In the meantime, why not browse through some more related insights on web development and web design?