Rasterloom · UI

One white icon, five button states

You do not need five copies of an icon for normal, hover, pressed, disabled and "selected". One white texture and Unity's colour tint do all of it, with no extra memory and no extra draw calls. Here is how it works, and the one case where it does not.

Why white

A UI Image multiplies every pixel of its sprite by its Color. White is (1, 1, 1), so white times any colour is exactly that colour. A white icon can therefore become gold, red, grey or any brand colour by changing one field, and the alpha channel keeps the anti-aliased edge.

A coloured icon cannot do this: multiplying a blue icon by red gives near-black, not red. That is why icon sets meant for UI ship white.

Two tints, multiplied together

A Button with Transition = Color Tint tints its Target Graphic. The final colour on screen is:

final = sprite pixel  x  Image.color  x  Button state colour (x Color Multiplier)

So set the icon's base colour on the Image (say, gold) and let the button states be shades of white and grey:

Normal       (1.00, 1.00, 1.00)   gold as set on the Image
Highlighted  (0.90, 0.90, 0.90)   slightly deeper
Pressed      (0.78, 0.78, 0.78)   a darker gold
Selected     (0.96, 0.96, 0.96)
Disabled     (0.78, 0.78, 0.78, 0.5)   faded

Because the state colours are neutral, the same ColorBlock works for every icon in the game, whatever its base colour.

Doing it from code

using UnityEngine;
using UnityEngine.UI;

public class IconState : MonoBehaviour
{
    public Image icon;
    public Color normal  = new Color(1f, 0.77f, 0.24f);   // gold
    public Color danger  = new Color(0.95f, 0.30f, 0.30f);
    public Color locked  = new Color(0.55f, 0.58f, 0.65f, 0.6f);

    public void SetNormal() { icon.color = normal; }
    public void SetDanger() { icon.color = danger; }
    public void SetLocked() { icon.color = locked; }
}

Changing Image.color changes vertex colours only. The sprite, the material and the batch stay the same, so a hundred icons in a hundred colours can still draw in one batch.

Import settings, or the tint looks dirty

• Compression None. Block compression shifts colours along the one-pixel edge of a flat shape; once tinted, the shift shows as a coloured fringe.
• Generate Mip Maps off. Mips are what make UI icons go soft when the canvas scales.
• Alpha Is Transparency on, Wrap Mode Clamp, Mesh Type Full Rect.

When you need a black set instead

Tinting only darkens. Taking a white icon down to near-black for a light interface works on the solid parts, but the anti-aliased edge pixels are partly transparent white, and against a light background they read as a grey halo. For light UI, use an icon drawn in black and tint it lighter greys or colours from there. That is why good UI icon sets ship both a white and a black version of every icon.

Ready-made sets

The Rasterloom icon sets ship every icon in white and black with these import settings already applied, plus a demo scene that cycles the tint so you can see it working. There is a free sampler of sixty icons as well as the full set; both are on the packs page.