Pixelated UI icons when scaling down in Godot 4

Help
, ,
1

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:

Zoomed In (Editor)
Zoomed In (Editor)1530×522 56.4 KB

Zoomed out (Editor)
Zoomed out (Editor)426×268 9.5 KB

In-Game Pixelization
In-Game Pixelization426×268 7.76 KB

4

I had the same issue, but I found enabling generate mipmaps in the textures import settings then setting the texture filter to linear mipmap seemed to work for me

5

Mipmapping your import is usually the way to go, although that will increase the size of your imports somewhat.

You could of course try if the scalable SVG UI textures in the Scalable Vector Shapes 2D plugin work for you :slight_smile:

I’d advise to just try it out and only extract only this functionality if it works for you.