Icons are the most re-used asset in a game. The same sword icon becomes a hotbar button, an inventory thumbnail, a store listing image and a notification symbol. Each of those surfaces has its own size requirement, and exporting one size to rule them all is a mistake. This guide maps the sizes that matter across mobile, Steam, consoles and the web, and explains how to work with them from a single source.
The master resolution principle
The professional workflow is simple: design everything at one large size, then export down. Pick a master size of 1024×1024 (or 512×512 if you are memory-constrained). All smaller sizes are generated from the master with downscaling. This keeps the set consistent and lets you regenerate any size later without redrawing. When you use an icon generator, always export at the largest size the tool offers, then downscale for specific platforms.
Mobile: the iOS and Android tables
Mobile is the most demanding platform because one icon is used at dozens of sizes. App store icons are the famous case — iOS requires a 1024×1024 marketing icon, and Android expects adaptive icons with separate foreground, background and safe-zone layers.
| Surface | Size | Notes |
|---|---|---|
| iOS App Store icon | 1024×1024 | No transparency, no rounded corners (Apple adds them) |
| Android adaptive icon | 1080×1080 | Foreground 66% safe zone, background fills |
| iOS in-app icons | Small 29 / 40 / 58 / 76 px | Standard, Retina and Super Retina variants |
| Android launcher | 48 / 72 / 96 / 144 / 192 dp | Mipmap density buckets |
| Notification icons | 24 dp / ~48 px | Monochrome, alpha channel only |
Inside the game, hotbar and HUD icons on mobile typically run 32–64 px at 1x density, which means 96–192 px at 3x. Design for the physical size on screen, not the pixel size: a 44×44 dp touch target is the same physical size on every device.
Steam and desktop stores
Steam asks for a specific set of store assets, and the library icon is what players see every time they open their library.
| Surface | Size | Notes |
|---|---|---|
| Steam library capsule | 600×900 | Portrait — the icon players see daily |
| Header capsule | 460×215 | Store page header |
| Small capsule | 231×87 | Search results and shelves |
| Main capsule | 616×353 | Store page hero image |
| Steam library logo | 128×128 | Transparent PNG for the grid |
A common mistake is designing only the header capsule and letting the library capsule be a crop. Design each capsule as its own composition — the library capsule is portrait, the header is landscape, and the small capsule is a wide, tiny strip where only the center third reads.
Consoles: the stricter systems
Console platforms have the most rigid requirements because they certify assets during submission. A few numbers that consistently trip up developers:
- PS5: 820×820 store icon, 512×512 trophy icons
- Xbox: 300×300 box art icon, 64×64 small tile
- Nintendo Switch: 512×512 software icon on the home menu (the icon is often shown at 256×256, so design for that)
- All consoles: no rounded corners, no transparency in store assets unless specified
The Switch home-menu icon deserves special attention: it sits inside a rounded frame on the home screen, so keep the safe margin or your art will be cut at the corners.
Web and browser games
Web icons are cheap but everywhere: favicons, PWA icons, social share images and in-game UI on desktop browsers.
| Surface | Size | Notes |
|---|---|---|
| Favicon | 16 / 32 / 48 px | Also used in browser tabs and bookmarks |
| PWA icon | 192 / 512 px | Required for installable web apps |
| OG / social share | 1200×630 | Social media preview image |
| In-browser HUD icons | 32–64 px | Match desktop DPI scaling |
Favicons are the ultimate small-size test — 16 pixels is almost nothing. Use a single bold symbol, not a detailed illustration.
In-game inventory and UI grids
Your in-game grid sizes depend on the UI framework, but the physical sizes cluster in a narrow band:
- Hotbar / quick slots: 32–48 px at 100% UI scale
- Inventory grid: 48–96 px per cell
- Equipment slots: 64–128 px
- Minimap and status icons: 16–32 px
- Tooltips / item previews: 128–256 px
The rule: design icons at 2x the display size. A 64 px display icon should be authored at 128 px and downscaled — this gives the engine room for UI scaling and crispness on high-DPI monitors.
Testing sizes before you commit
Size requirements are guesses until you test them in context. The cheap test that saves real pain: build a mockup of your worst-case surface — the smallest hotbar, the most crowded inventory grid, the narrowest store listing — and drop your icons in at their real sizes. Look at the result on a phone and on a desktop monitor, because the physical size of a 48 px icon changes completely between a 5-inch screen and a 27-inch monitor.
The two failure modes to watch for: icons that lose their silhouette at the small end (redesign, do not compensate with labels), and icons that waste space at the large end (they look like a thumbnail sitting in a frame). If your small capsule or hotbar icon is unreadable, no amount of engine scaling tricks will fix it — that is a design problem, not an export problem. Fix the icon, then re-run the export ladder.
A second test worth running is the DPI test. The same mobile game runs on 1x, 2x and 3x density devices, and an icon that looks sharp on your 2x testing device can look soft on a 3x flagship or chunky on a cheap 1x tablet. Author at the master resolution, export the full density ladder, and verify at least one device per density class. Most players will never tell you an icon is soft — they will just feel the game is slightly less polished than the next one.
A sane export pipeline
Practical workflow that avoids size chaos:
- Keep one master PNG per icon at 1024×1024 with transparency
- Generate a standard set: 512, 256, 128, 64, 48, 32, 16
- Name files with the size suffix (icon_sword_512.png)
- Generate platform-specific crops from the master (portrait capsule, landscape capsule, square)
- Re-run the pipeline when you change the icon, never re-export by hand
If you are using a generator, export the master at 1024, keep the transparent version, and batch-produce the standard set from it. Platforms change their requirements slowly; your master resolution will not. Design big, export small, and keep one source of truth.