Part of it may be technical. High-res, colored PNG icons a) are heavyweight, b) require you to ship multiple sizes, c) if you don't have a large enough version for a new display resolution it'll look blurry. This adds both process complexity and implementation complexity.
Vectorized icons on the other hand take up much less memory and can auto-scale to different displays and use-cases. If you take it a step further and ship them as a font - which is the gold-standard these days - they can be stored even more compactly and worked with very easily on the web and otherwise, and can even be re-colored dynamically. But of course a font can only be rendered in one color at a time.
> Vectorized icons on the other hand take up much less memory and can auto-scale to different displays and use-cases.
In the absence of grid-fitting and hinting, monochrome vector icons are just as mediocre at scaling to arbitrary sizes as colored vector icons. However, I think one "advantage" is that fuzzy monochrome borders look less bad than fuzzy outlined borders.
TTF bytecode supports grid-fitting and hinting (I believe SVG doesn't support it), and it would be interesting to see that applied to rescalable icons. However, you'd have to turn off subpixel antialiasing.
Fonts are not the gold standard. They have some advantages (mostly convenience of bundling) and some disadvantages (reliability/compatibility, and functionality). One of the disadvantages is that they’re much more likely to simply not load—fonts are supposed to be optional, and most browsers have a “don’t use the fonts the web page specifies, use my own set of fonts” setting. And the other huge disadvantage is that you’re mostly limited to monochrome icons (styleable multi-coloured text support in the one file is somewhere between non-existent and patchy, can’t remember exactly where). Overall, I’d consider one of the inline SVG variants to be the gold standard in terms of functionality and compatibility, though optimal developer ergonomics require some sort of build tool.
By "gold standard" I meant "default practice", at least in the web world. The web's most popular icon set - FontAwesome - even has "font" right in the name.
True, there are a couple of different senses in which “gold standard” has come to be used. I was treating it as “the benchmark by which all else is compared”.
But even so, I’d strongly disagree with any claim that a default practice exists for icons on the web. Images PNG, images SVG, background images PNG, background images SVG, inline SVG of a couple of varieties, icon fonts: all of these are extremely widely used, and none is in any way “standard” (let alone a reference paragon).
Funny you should mention FontAwesome. I don’t know what direction they’re taking it in, but I look at how they’ve deployed the icons on their site, and… I’m seeing a lot of inline SVG.
Vectorized icons on the other hand take up much less memory and can auto-scale to different displays and use-cases. If you take it a step further and ship them as a font - which is the gold-standard these days - they can be stored even more compactly and worked with very easily on the web and otherwise, and can even be re-colored dynamically. But of course a font can only be rendered in one color at a time.