Icon design for games: sets that still work at 32 pixels

Silhouette first

Fill your icon with solid black and delete every internal detail. If it is still identifiable, the icon works. If it becomes a blob, no amount of shading, highlight or colour will save it at 32 pixels.

• Distinct outlines beat detailed interiors. A sword and a dagger with the same silhouette are the same icon to a player scanning a grid.
• Exaggerate the identifying feature. The part that makes a thing recognisable should be larger than reality allows. This is caricature, and it is the whole craft.
• Check the set together, not individually. Lay all of them out as silhouettes at final size. Any two that read the same are a problem, however different they look at 256px.
• Rotate to the most recognisable angle, which is rarely the realistic one. A helmet reads from the side, a potion from the front, a key at a slight angle.

The rules that make a set look like a set

Consistency is what separates a set from a folder of drawings, and it comes from a small number of decisions made once and defended everywhere.

• Optical size beats mathematical size. A circle at the same pixel height as a square looks smaller. Adjust by eye, then lock the result.
• Keep a safe margin inside the canvas so nothing touches the edge, or icons will collide with their own containers and with each other.
• Draw on the pixel grid at your base size, so strokes land on whole pixels and stay crisp.

Design at the size it ships

The most common failure in game icon work is designing at 512 pixels and admiring it at 512 pixels. Every decision that looks refined at that size is invisible or muddy at the size a player sees.

1. Work at your smallest real size, usually somewhere between 24 and 48 pixels, with a zoomed preview beside it rather than instead of it.
2. Check at every size you ship, including the largest, since some icons appear at 128px in a detail panel and 32px in a list.
3. Test on the target device. A handheld panel and a television are different problems.
4. Export at the densities you need and check the smallest one, not the biggest.
5. If it needs detail to read, it is the wrong drawing. Simplify the shape rather than adding pixels.

Icons are learned, not intuitive

Very few icons are genuinely universal. A magnifier, an X, a play triangle, a house, an arrow. Everything else is a convention players have learned from other software, and anything specific to your game is a convention you are asking them to learn now.

The reliable pattern: labels while the player is learning, icons once they are fluent, and both wherever the mistake is expensive. What the labels themselves should say is in the words in your game.

States, badges and overlays

An icon in a real game is rarely just an icon. Plan the layers before you draw, or you will retrofit them onto sixty finished files.

• States: default, hovered, selected, disabled, focused. Disabled is usually reduced opacity plus desaturation, never colour alone.
• Ownership and progress: locked, new, equipped, upgraded, favourited. Each one needs a position, and the positions must be consistent across the whole set.
• Counts and stacks, which need a reserved corner and a background plate so the number survives over any icon.
• Cooldowns and durations, usually a radial or linear wipe. That is a treatment applied over the icon, so it must not obscure the silhouette.
• Rarity or tier, which is where most sets accidentally become colour-dependent. Pair it with a border shape or a frame, per game UI accessibility.
• Reserve the corners deliberately. Four corners, four possible badges. Decide what owns each one once.

Colour in icons

• A monochrome base set is more flexible than a full-colour one, because it can be tinted per state, per team and per rarity without redrawing.
• Full colour suits item icons, where the object's own material identity is the point, and suits nothing else particularly well.
• Do not mix the two languages carelessly. Colourful item icons beside flat monochrome interface icons is fine and deliberate; a random mix within one row is not.
• Keep the accent for state. If your accent colour means selected, it cannot also be the colour of the fire icon.
• Check the whole set desaturated, which is the fastest way to find icons that only work because of hue.

A family that survives its two hundredth icon

Sets rarely fail at icon ten. They fail at icon eighty, when the original rules have been forgotten and a different person is drawing.

1. Write the rules down: canvas, margin, stroke, radius, angle, detail ceiling, corner reservations. One page.
2. Build a template file with the grid, the safe area and a live preview strip at every shipping size.
3. Keep a naming scheme that sorts: icon_item_sword, icon_ui_settings, icon_status_poison. Searchable beats readable, per prefabs, variants and a Unity UI kit.
4. Maintain a contact sheet of the entire set at final size, updated as it grows. It is the only way to spot drift.
5. Draw the hardest icons first. If the rules survive the abstract concepts, they will survive the swords.

Nobody notices a good icon set. They notice the one icon that was drawn by different rules.

Export and atlas

• Export at the sizes you ship, not one master that gets scaled at runtime, unless the engine handles it well and you have checked the smallest result.
• Consistent padding. Uneven trimming makes icons appear to shift position when they are swapped.
• Group into atlases by feature or screen, because a list drawing from six atlases breaks batching on every row. That is the draw-call cost in why your Unity menus tank the frame rate.
• Keep the vector source, organised and named to match the exports, so the set can be re-cut for a new platform without redrawing.
• Ship a monochrome variant if you have any chance of needing tinting later. Producing it up front is minutes; retrofitting it is a week.

An icon audit

1. Lay the whole set out at final size on one sheet. Does it look like one set?
2. Fill every icon black. How many pairs are now indistinguishable?
3. Desaturate the sheet. What stops working?
4. Measure the stroke weight on five icons. Do they match?
5. Find the most detailed icon and the simplest. Is the gap deliberate?
6. Check every badge and overlay position for consistency.
7. View the set at the smallest size you ship, on the target device.
8. Ask someone who has not played to name ten icons. Count the misses.
9. Check the disabled state is not colour alone.
10. Count how many atlases a single busy screen pulls from.