The 5.0+ icons looks worse on my system than the 4.34 icons

[samualtnorman]

4.34.0: 5.1.0:

I don't mind the new designs, but where the old icons were clear and sharp, the new icons look blurry. The obvious examples are the Node.js logo where the "JS" is clearly readable in the first screenshot but very blurry in the second, .env's appears darker due to the blurring, Tailwind's logo looks sort of squished, the .d.ts icon has become a square with 2 border colours (one darker, one lighter), and PNPM's squares are now blurring into each other.

This is not a criticism of the designs, I just think something is misconfigured. My instance of VSCode is running default settings for the explorer window and my zoom is set to 100% so I don't think this is an issue on my end.

I've been sticking to version 4.34 but I thought I'd make this issue because I'm sure other people are having this problem as well (whether they realise it or not).

Computer information (please complete the following information):

• OS: NixOS 23.11.6708.12430e43bd9b (Tapir) x86_64
• Browser: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.88.1 Chrome/120.0.6099.291
• VSCode version: 1.88.1

[mallowigi]

I also don't understand why the "pixel perfect" branch was merged. It's obviously a degradation over the previous SVGs.

[lucas-labs]

Are you sure your zoom settings are 100%?

This is how it was in 4.34:

This is how 5.x looks for me:

Yours looks a bit smaller, althogh it's just the icon, the text is exactly the same as it is on my end:

[samualtnorman]

are you on macos?

[lucas-labs]

After some forensic investigation (😅) over your screenshots, I see your icons are showing at 15x15px for some reason:

Instead of the vscode default, which is 16x16px (the pixel perfect PR made icons align with a 16x16 grid):

Default vscode css:

I honestly don't know of any vscode setting that allow us to change the size of the icon alone without loading a custom css that specifically changes the icon's background-size property (you would need the loader extension and set "vscode_custom_css.imports" setting in vscode) or changing the zoom level.

[lucas-labs]

are you on macos?

I'm on Windows and Ubuntu.

[samualtnorman]

Are you sure your zoom settings are 100%?

I just setup a fresh vscode on my PC and did nothing but install Material Icon Theme and switch to it. The issue persists. My monitor is 1920x1080 and I'm running KDE if that helps.

I'm on Windows and Ubuntu.

And the icons look identical on both OS's to you?

[lucas-labs]

And the icons look identical on both OS's to you?

Yes, they look sharp on my end on both Windows and Ubuntu.

The only way I could make it look exactly like in your screenshot was by manually changing the icons to 15px using devtools.

[samualtnorman]

Is that the desktop version of VS Code or the browser version? I've just tested it in a browser and all the icons look proper. This might be an issue that only affects desktop users (which is the majority).

[samualtnorman]

I enabled Developer: Toggle Developer Tools, and inspected the css of an icon in the desktop version of VS Code and this is what I got:

[lucas-labs]

Is that the desktop version of VS Code or the browser version? I've just tested it in a browser and all the icons look proper. This might be an issue that only affects desktop users (which is the majority).

I'm using the Desktop version.

I enabled Developer: Toggle Developer Tools, and inspected the css of an icon in the desktop version of VS Code...

Looks the same here. Weird.

I'm honestly clueless 😒 I've been reading antialiasing, GPU acceleration and some GPU configs might cause issues like this one, but idk... I think the fonts should look blurry too if that was the issue and it doesn't seem to be the case here.

[lucas-labs]

Btw, I also noticed that your icons in v4.34 are also being displayed 1px smaller than what they really were. Which strangely make them look a bit better compared to mine.

(above is yours, below is mine)

[samualtnorman]

this is turning into a rabbit hole