How do you make small icons look good?

Question

I am running into an issue with my UI.

Basically I need to have a lot of small icons, similar to many other games, here is an example:

With Mip maps:

As you can see, these look awful. This is simply a UI Image with size 15x15, it seems when they get too small it simply does not look good. It has nothing to do with import options or anti-aliasing, I have tried everything there. I submitted it as a bug but according to Unity it simply will not look good when images are scaled down too much.I have tried both PNG with large resolutions and small, I have exported the .SVG vector image and tried using that, all look bad when scaled down.

So what are my options then when I need small icons? How do other games do it?

Here is a link to the actual .png file: https://ibb.co/nDG0hmD

For reference, here are the same icons zoomed in, as you can see, they look fine:

Im developing for PC.

Answer 1

This is an attempt to use font-hinting to give you more control over how your graphics are rendered when scaled down.

This is your UI with the icons implemented as a hinted font:

StackExchange scales images down, so double click the images

Same image as above in the center, but with your samples flanking it (double click it):

Same as above, but at 3X scale (double click it):

3X Animated GIF of icons translating downward by partial pixels (double click it):

Text Object vs TextMeshPro (seriously, double click it)

Again, StackExchange rescales and resamples everything, so double click the images to see them un-mangled.

I imported the regular fonts with "Hinted Smooth":

I'm not an expert at creating hinted fonts or how best to render them in Unity. If anybody has tips for using hinting in Unity more effectively than I've done here, please share.

The animated GIF suggests to me that hinting isn't applied effectively when text can be positioned between pixels like I was doing.

REF

• Tool used to create icons: FontForge

Answer 2

There are two easy ways to fix this issue in the import settings for your icon texture, each which has its own pros and cons:

1. Enable Mip Maps. This tells Unity to generate multiple versions of the texture at different smaller resolutions. This way the image will generally look much less aliased at lower resolutions. However, at some screen resolutions the texture may appear slightly blurry (e.g. the optimal size would be 40x40 but the closest mipmap is 32x32 so Unity scales up the 32x32 mipmap slightly). It also increases your build size slightly since the build has to include multiple versions of each texture (IIRC the rule of thumb is that the texture will take up 33% more space when mipmaps are enabled). If your texture is in an atlas, you will need to enable mipmaps for the atlas.

2. Reduce the "max size", which is effectively the same as reducing the size of your texture in an image editor before importing it into Unity. This can work well when the resolution of the final game is known - e.g. if it's a console game that will always run at exactly 720p. However, if your game will be on a platform where screen resolution can vary widely (e.g. mobile, PC), the new smaller size might be too small for some resolutions, causing the icon to look blurry.