Responsive design focuses on layout. What is a responsive icon? Responsive icon design is a design that changes the icon type based on the screen size for better readability.
Why responsive design for icons?
How to read the content? Today, there are more and more platforms for reading content. Devices, screen resolutions, browsers, and platforms-I can use 5 S + safari + ios7.0 to browse webpages, or 1020 + chorome + WP8 to browse webpages.
There are too many choices and combinations, which affect the readability of the content more or less. As a visual language, icons are very important for readability.
The icon design must be easy to understand. Second, the icon must be highly readable. In the case of small sizes, the icon design can sacrifice a little aesthetic to pursue higher recognition/readability.
Can it be both aesthetic and readability? The art of icon design lies in the balance between the two. How can we design icons of different sizes to show their beauty and make them readable?
I think it is necessary to optimize the icon response design according to the size range.
This concept is not new. This design method is common for raster icons.
In web design, many designers mistakenly believe that simply scaling the icon can achieve perfect readability. But not actually.
Each icon requires three different sizes. The code is used to automatically optimize readability.