Even in the vector age, though, one of the things we've learned from pixel icons is that different sizes would ideally have different levels of detail.
For example, see this camera icon: https://useiconic.com/icons/camera-slr/ (in the left pane, click the "three squares" icon to render them all at the same size). All three are vectors (you can inspect them if you want), but they still show different levels of detail. If you take the high-detail icon and render it at a small size, the details add visual clutter that are hard to understand at a small output size. Or with this book icon (https://useiconic.com/icons/book/), if you go the other way and scale the small book up to a larger size, it's harder to tell what it is because the "pages" part at the bottom is so thick -- which was a design necessity at smaller outputs, or it'd have been invisible, but at larger sizes it's too thick.
So even with vectors, the essential takeaway of this particular challenge still stands:
> [how to] distill the essence of your design and make sure your icon is clear and understandable at all sizes
Every vector icon still gets rasterized at some point for displaying to your monitor's pixel grid, not to mention human perception. Vectorization is a transport/delivery concern, but in and of itself it doesn't replace the thoughtful design of the pixel era.
Fonts can work similarly... they are usually vector these days, but still each glyph can look different at different sizes and can be dynamically controlled to look better at different render sizes: https://developer.mozilla.org/en-US/docs/Web/CSS/font-optica...
This is what annoyed me the first time I saw vector icons used in Linux desktop environments. I appreciate the attempt at making something that scales to any size, but in practice you need to custom design the smallest versions of an icon.
Even at the larger sizes, a vector won't always look great. If the renderer doesn't fudge vector edges to snap to pixel edges, you'll end up with blurry edges instead of clean, sharp ones.
> Even at the larger sizes, a vector won't always look great. If the renderer doesn't fudge vector edges to snap to pixel edges, you'll end up with blurry edges instead of clean, sharp ones.
Do you have an example? Text is essentially "vector" these days, and I've never heard of anyone complaining that text rendered on a modern screen has blurry edges. The blurriness of some text is often "cleartype" or whatever tricks are being used to make it look better on low-dpi screens, which end up making it worse on modern displays.
For example, see this camera icon: https://useiconic.com/icons/camera-slr/ (in the left pane, click the "three squares" icon to render them all at the same size). All three are vectors (you can inspect them if you want), but they still show different levels of detail. If you take the high-detail icon and render it at a small size, the details add visual clutter that are hard to understand at a small output size. Or with this book icon (https://useiconic.com/icons/book/), if you go the other way and scale the small book up to a larger size, it's harder to tell what it is because the "pages" part at the bottom is so thick -- which was a design necessity at smaller outputs, or it'd have been invisible, but at larger sizes it's too thick.
So even with vectors, the essential takeaway of this particular challenge still stands:
> [how to] distill the essence of your design and make sure your icon is clear and understandable at all sizes
Every vector icon still gets rasterized at some point for displaying to your monitor's pixel grid, not to mention human perception. Vectorization is a transport/delivery concern, but in and of itself it doesn't replace the thoughtful design of the pixel era.
Fonts can work similarly... they are usually vector these days, but still each glyph can look different at different sizes and can be dynamically controlled to look better at different render sizes: https://developer.mozilla.org/en-US/docs/Web/CSS/font-optica...