The mistake most beginners make is not viewing the icon at close to its intended size throughout the illustration process.
SVG icons scale, sure, but human perception doesn't, so if you're zoomed in while drawing it, and don't look at it at smaller sizes until you're done, chances are you'll have made an icon that doesn't look very good. You have to draw it while zoomed in, but check it at the smallest reasonable size pretty much constantly.
One reason (as he points out in the article) is that you'll probably have included too many details, and it just looks like noise when you zoom out.
Another reason is that if you're not extremely careful, and aware of your intended resolution, you'll make an icon with a lot of aliasing. Aliasing often reads as blurry edges, especially on diagonal lines, and makes the icon look amateurish. You can tell a professional icon, because it's crisp and clean when displayed.
The other thing to keep in mind is that icons, like logos, are all about recognizable silhouettes. Icons need to be "readable" at the edge of the user's vision, not just when stared at dead on. For the same reason, you don't want them to rely on color, or small details, otherwise they just won't work as well.
> You can tell a professional icon, because it's crisp and clean when displayed.
I've got to disagree with that part -- these days you have no control over pixel alignment or blurry edges. Both OS-level and browser-level zoom is the norm, not the exception, which means your icon edges will usually straddle pixels. And on retina-level displays, the alignment/blur doesn't really matter anyways.
Designing icons to some fixed pixel grid in order to achieve "crispness" is a relic from a 72dpi or 96dpi past that is in the process of entirely disappearing.
So it's not something to worry about anymore, and certainly not something that separates "professional" icons from non-professional ones.
I’m not sure that I agree. I use a normal DPI external display (2560x1440 27”) everyday for work and will probably continue to for many years to come, and desktop apps that use icons that weren’t made with to look decent at lower DPIs look really, really bad on it. It makes the app they’re used in feel amateur.
I don’t think these monitors are uncommon, either. Especially for office and education use, normal DPI monitors still have far better bang for buck than 4K+ monitors do, and 1920x1080 and 2560x1440 in particular are popular with anybody who uses their machine to also play games because those resolutions are for more reasonable to drive than 4K+.
It’ll be great once we’re in the “HiDPI by default” era but that’s still several years out.
Right, but the target displays for a lot of icons is not on a desktop monitor, but a mobile display. Mobile devices make it exceedingly difficult to control pixel alignment, either because a user adjusted their accessibility settings, or because their device is physically incapable of doing so because of the display (OLED pentile[1])
Someone choosing "More Space" on their new Mac's display settings has destroyed all pixel alignment on their computer, but with the display's density it might not matter much. Older hardware like the iPhone 8+ scaled everything down for the 1080p display at all times, and no icon was ever perfectly crisp on that thing, even Apple's.
But so many people use scaling at the OS level which means none of their desktop apps have icons perfectly pixel-aligned anyways. Because even different "lower/normal" DPI screens have significantly different physical pixel sizes and are viewed at different distances, and people choose a setting that makes interface text legible.
The notion of logical (UX measurement) pixel size and physical (monitor) pixel size should just be considered to be totally decoupled at this point. Sure sometimes they perfectly align but as a developer you have zero control as to when that happens.
So it's not worth even trying anymore. Just use hi-res assets designed to still be legible at standard resolution and forget about pixel alignment.
SVG icons scale, sure, but human perception doesn't, so if you're zoomed in while drawing it, and don't look at it at smaller sizes until you're done, chances are you'll have made an icon that doesn't look very good. You have to draw it while zoomed in, but check it at the smallest reasonable size pretty much constantly.
One reason (as he points out in the article) is that you'll probably have included too many details, and it just looks like noise when you zoom out.
Another reason is that if you're not extremely careful, and aware of your intended resolution, you'll make an icon with a lot of aliasing. Aliasing often reads as blurry edges, especially on diagonal lines, and makes the icon look amateurish. You can tell a professional icon, because it's crisp and clean when displayed.
The other thing to keep in mind is that icons, like logos, are all about recognizable silhouettes. Icons need to be "readable" at the edge of the user's vision, not just when stared at dead on. For the same reason, you don't want them to rely on color, or small details, otherwise they just won't work as well.