Icons are not pixel-perfect at 16px (default zoom in vscode)

[geekley]

Icon Type
This applies to all icons, as far as I can tell.

Graphic ideas
If you look at vscode-simple-icons, you can clearly see that the designer has been careful to ensure that, even though icons are in SVG, they're pixel-perfect at 16px, which is the resolution of vscode file icons at default zoom.
Notice how all strokes are clear, specially 1px strokes, and how there's no 1px "blur" effect at the edge of shapes.
That's because the vector shapes are "aligned" to a 16x16 "invisible grid", which makes them pixel-perfect at 16px.

The design of material-icon-theme, however, seems to have 24px as a base, which makes the icons not be very appropriate at 16px. Currently, I don't think there's a setting to make icons 24px in vscode other than zooming the entire app (I could be wrong). So, ideally, icons should be adapted to 16px.

I know asking for a (kinda) "redesign" of the whole thing REALLY is asking A LOT. And this may seem like a very minor thing, BUT if you do it to just the main icons (like folder, generic files) you'll see how much more hi-quality it looks just by changing this detail to make shapes sharp and clear to see. For "brand" icons (usually more complex) this makes little difference.

So, my point is ... maybe this is something worth thinking about, to do it little by little, at least when adding new icons, or if you're already gonna edit an existing icon.

Additional context
This image helps to understand this concept a little. Source: this blog post
Note how the left image doesn't make the vector shape "cut" the pixels in the middle at that resolution.

I would just stick to that other theme, but it seems it's not maintained anymore (presumably, since repo is archived? it does seem to be in public domain, though), so I guess it's worth at least mentioning this issue in case you didn't notice it.

[PKief]

Hi, no I haven't noticed that yet. Thank you very much for the information. You are right, it affects all icons so it would be big effort to adjust all of them, so it is a good idea to adjust the most important icons. I will have a look at it and optimize it.

[ghost]

Just gotta make every icon centered 21px instead of 20px. Fits a 3px grid in 24px and a 2px grid in 16px.

[geekley]

Well, it's not that simple, at least not for every icon. This might work for simpler cases, but it's not just moving/re-scaling because misalignment can occur differently at different points in the image (at 0, 1/3 or 2/3 of a pixel). So, if the image has many "important" horizontal and vertical lines (whether it's strokes or edges of shapes), it can't easily fit with just that. Individual nodes might need tweaking in these cases.

I recommend setting the grid to have a "major" line of 4 instead of 5 or 10.
For example, this icon, which I designed for 16px txt has a helpful grid in Inkscape (to center image, for example):

But note how it can't easily fit both 16px and 24px because of many horizontal/vertical lines spread over the entire image:

So, it's probably hard to avoid having to resize these kind of images.
The simplest method would be to use a 16px canvas and scale by 2/3 and make adjustments to 16x16 grid.
But if you want to fit both (16px preferentially and 24px when possible), you may use a 48px canvas (multiple of both), scale by 2, and set the "major" grid every 3px; then make sure strokes/alignments are multiple of at least 3 (to fit 16px) or when possible of 6 (to fit both).

[ghost]

To be honest I don't see blurry icons. They aren't pixel perfect but they're definitely not blurry for sure.

[geekley]

Yea, that's what I meant with "blurry" just "not pixel-perfect".
I mean, it's not BAD (things are still legible), but it does make me feel like I need glasses 😆 ...
For example, reading the JS in the icon: