As web designers and developers, we love icons. They share so much information without ever having to resort to words. Don’t you agree? But in a time where more and more consumers are accessing websites via mobile devices, the icons we’ve used for so long may not look that great.
One of the problems that can happen with icons is that they can get blurry or distorted when you maximize your browser window or view a site on a phone. Let me tell you that as a designer, this is a problem. Blurry and distorted is bad.
A solution for this is responsive icons. You’ve definitely seen it, but you probably had no reason to notice it. That’s how you know it was done right.
In short, the larger the viewport’s size, the larger the icon. When you view it on the smallest screen available, the icon will show fewer details and scale to the appropriate size. Not only will it fit your screen, it will be sharp. You’ll definitely notice if it’s not a responsive icon. I promise.
Some image files are better than others for this purpose.
You’re used to .gif and .jpg files, and they’re good for what they are: pictures and larger-scale graphics. .png files are a good fit here, but get familiar with .svg files. They’re vector files, which means they’re infinitely scalable and will look good on whatever device you’re using.
With most of the world accessing the internet primarily on their phones, you’re going to appreciate the beauty of responsive icons and how much time and money they’re going to save you.