Pixelated UI icons when scaling down in Godot 4

Godot Version

Godot 4.5

Question

Hey everyone,

we’re currently running into an issue with pixelated UI icons in Godot 4, and after quite a bit of testing we’re a bit stuck.

We have UI icons that look fine when viewed at full size / zoomed in, but become noticeably pixelated when scaled down in the UI, zooming out in the editor, and during runtime at smaller sizes. So the issue seems to appear mainly during downscaling / zooming out, not at native resolution.

We’ve tried different formats (PNG, SVG), adjusted import settings like compression (VRAM compressed, lossless / uncompressed), filter (linear, nearest, the latter looked worse as expected), and mipmaps turned on / off. These didn’t result in any significant improvement.

We also considered whether this could be related to how the original assets were created (different tools exporting slightly different anti-aliasing), but since the issue is strongly tied to zoom/scaling, I suspect it’s more on the rendering side.

Here are the relevant project settings:

  • 2D anti-aliasing: Disabled
  • Stretch mode: canvas_items
  • Snap controls to pixels: Enabled

As we don’t seem to find a solution, we’d like some of your input. Thanks in advance!

Example Icon:

Hey, thanks for your answer!

Our viewport is set to 1920 x 1080.

Currently. the icon assets are around 512 x 512, but are displayed at roughly 30 x 30 in the UI, so there’s quite a large downscale (c. 17x). However, we tested using the same size as is displayed, but to no avail. As said in the post, the pixelation also becomes more noticeable when zooming out in the editor, which is why we suspected it might be related to downscaling / minification rather than just the source assets.

We don’t necessarily expect it to be perfectly sharp at that size, though, don’t get me wrong, that would be nice, but the artifacts seem stronger than expected.