Making Icons

Every objective in a goal set needs an icon. Players read a board by its images, usually at a glance and often on a small screen, so icon quality has a real effect on how a game plays.

Poor quality icons will be rejected

Icons that are blurry / poor quality or don’t follow the guidelines below will not be accepted. A goal set with poor icons will be sent back for changes or turned down.

The Short Version

Size

512x512 if you’re in any doubt. 256x256 only if you know what you’re doing.

Format

PNG or WEBP. Never JPEG.

Spacing

Transparent background, with a clear margin. The artwork must not fill the whole square.

Naming

game/short_name.webp, lowercase, no spaces, descriptive.

Sharpness

Start from the best source you can find. Don’t stretch a small image up to hit a size.

Consistency

Every icon in a set should look like it belongs to the same set.

Ownership

Your own work only. Never someone else’s art.

---

Size

Icons must be exactly 256x256 or 512x512, and sharp at that size.

Size	When to use it
512x512	The default. Use this if you’re in any doubt.
256x256	Only if you know what you’re doing and the icon is sharp at that size.

Take care when scaling up

Try starting from the best source you can find. Scaling up poor quality icons will result in a blurry icon.

See Resizing & Resamplers and Upscaling for more information on how to avoid this.

---

Format

PNG and WEBP are both fine. Use whichever your editor exports most easily. Avoid JPEG.

Icons should have a transparent background rather than a white or coloured one. Both PNG and WEBP support transparency, and the transparent area matters. See Spacing.

---

Naming

Every icon in a set should share the same prefix, so a game’s icons stay grouped together. For Super Mario Odyssey, all icons would sit under smo/:

smo/collect_moons.webp
smo/get_outfits.webp
smo/checkpoints.webp

Names should be short but descriptive so they’re searchable, all lowercase, with no spaces or special characters:

Good

smo/final_boss_no_damage.webp
smo/purple_coins_sand.webp
smo/capture_gushen.webp

Bad

smo/Icon 1 (final).webp
smo/goal_47.webp
smo/image_copy_2.webp

---

Adding Icons to Your Game

Icons are attached to objectives in the editor. In the icon section of a goal, click + Add Blank, then click the icon it adds to rename it.

Once they’re all assigned, run the Image Validator. You select your image files and it compares them against the goal set, checking for:

• Goals that reference an image you don’t have
• Filenames that differ only by casing
• Images missing their category prefix
• Files you made but never used
• Goals with no image at all
• Images used by more than one goal

Check it on a board first

The validator’s Goal Preview shows an icon on a mock board at its real size, surrounded by other goals and in each claim colour. Use it to check that an icon is readable when small, and that nothing important sits under the progress or range indicators.

---

Ownership

Every icon must be your own work. You make it yourself, either from scratch or by using and modifying existing “fair use” game assets such as official sprites, models, renders or screenshots.

Icons are not made for you, and a goal set without a complete set of images can’t be added to the site.

You cannot use art made by someone else

This rule has no exceptions. Do not use without permission:

• Fan art, or any artwork drawn by another person
• Icons or assets taken from another site
• Images pulled from an image search, Pinterest, a stock site, or any other source
• Anything you’re not certain you have the right to use

Crediting the original artist does not make it allowed. Editing or recolouring someone else’s art does not make it yours. If you can’t confirm where an image came from, don’t use it, make your own instead.

---

Layout & Spacing

The image below shows how the space in an icon is used. The artwork sits inside a main icon area with a clear margin around it, and the corners are reserved.

Image by

Ike Design

Spacing

An icon is not a tile. When a goal is completed the cell is filled with the colour of the player who claimed it, and that colour needs to be visible around the artwork. If the artwork runs to the edges there’s nowhere for the colour to show, and the board becomes hard to read at a glance.

Safe Zones

Parts of every icon are covered during a game, so keep those areas clear. Avoid placing anything important in the:

• top right (used to mark progress during a game)
• bottom left (used to indicate the range/amount for a goal)

The top left is usually a good place to indicate anything specific or unique for similar goals, e.g. Collect 10 outfits might use a top left icon for the location.

Example

This is 15 unique bananas in Freezer layer:

• Bananas is indicated in the middle
• The top left ice icon indicates the location “freezer layer”
• The range 15 is shown in the bottom left
• The current progress of 6 is shown in the top right
• Nothing is needed in the bottom right in this case

---

Resizing & Resamplers

When you change an image’s size, your editor has to create pixels that weren’t there or discard pixels that were. The resample setting (sometimes called interpolation) controls how it does that. It’s usually a dropdown next to the width and height boxes in your editor’s resize dialog.

Using the wrong one is a common cause of blurry icons.

Your image	Resample setting
Pixel art, or anything blocky and hard edged	Nearest Neighbour
Scaling up by a whole number (2x, 3x, 4x)	Try Nearest Neighbour first, then Bilinear
Everything else	Bilinear or Bicubic

Nearest Neighbour copies pixels instead of blending them, so hard edges stay hard. On smooth artwork it produces jagged, stair-stepped edges. On pixel art, anything else turns crisp blocks into mush.

Bilinear and Bicubic blend neighbouring pixels together, which is what you want for smooth artwork, logos, renders and photos.

The names vary between editors. Nearest Neighbour may be listed as Nearest, None or Pixel Art, and Bicubic may be listed as Smooth, Cubic or Lanczos (Lanczos is fine).

Work large, shrink last

Do your editing at the largest size you have, and resize down to the final size once, at the end.

Every resize loses a little detail, so resizing repeatedly, or scaling up and then back down, loses more each time.

---

Upscaling

If the artwork you have is smaller or lower quality than you need, work down this list in order.

1. Find a better source

   This is usually the best option and only costs time. Look for a higher resolution version: game files, a wiki, an official render, a promotional asset, or retaking a screenshot at a higher resolution.

2. If it’s pixel art, just resize it

   Pixel art doesn’t need upscaling. Resize it with Nearest Neighbour, ideally by a whole number like 2x or 4x, and it will stay sharp. Running pixel art through an AI upscaler will ruin it.

3. Make the icon yourself

   If there’s no good source to be found, draw or build one. An icon you made that’s clear and sharp beats a scraped image that’s blurry, and it will always pass review where the blurry one won’t.

4. As a last resort, use an upscaler

   Only worth trying when you have artwork that’s genuinely close to good enough. Upscayl is free and runs on Windows, macOS and Linux.

Upscayl Settings

• Set the output scale to no more than 2x. Every Upscayl model is built as a 4x upscaler, so 4x is what you get unless you lower it yourself. On a low quality source, 4x invents a lot of detail that isn’t there.
• Try both the Digital Art and High Fidelity models and keep whichever looks better. Neither is better in every case.
• Check the result at the size it will be used, not zoomed in. Upscalers often add fake texture that looks fine at 100% zoom and wrong on a board.

After upscaling, you may then need to clean up the image to remove any artifacts or noise that the upscaler introduced.

Upscalers guess

An upscaler can’t recover detail that was never there, it can only guess at it. On a low quality source the result can look smooth but wrong, with melted text and smeared edges. If it looks worse than what you started with, use what you started with.

---

Software

Use what you already have

If you already have an image editor you’re comfortable with, use it. The settings described on this page exist in most image editors, they’re just in different places.

If you don’t have an editor, Affinity is a reasonable option. It’s free, runs on Windows and macOS, and covers everything described here. This is not an endorsement of Affinity, it’s just a reasonable option.

---

Guidelines

• It’s expected that players, to start with, may need to learn what the goal images represent. Therefore, although images should be clear and easy to understand, they don’t need to be instantly recognisable.
• Images should be unique for each goal. For instance, you should be able to take a screenshot of any board and be able to identify every goal just by the images, with no ambiguity.
• Avoid images that contain specific hard-baked details. For example for the objective Collect 100 Coins, don’t place the text 100 over an image of the coins. This restricts any future changes or re-use of the image, i.e. it’s later changed to Collect 150 Coins. The site can show values for you.

Tip

Take advantage of loading up existing games in the editor and see how their icons are done.

However, some games may have icons that predate the site’s guidelines and would not be suitable if submitted today.

---

Before You Submit

1. Every objective has an icon, every icon is unique, and every icon is entirely your own work

2. Every icon is exactly 256x256 or 512x512, and sharp at that size

3. Everything is PNG or WEBP, nothing passed through JPEG

4. Backgrounds are transparent

5. The artwork has a clear margin around it and doesn’t fill the whole square

6. Nothing important sits in the top right or bottom left

7. Filenames are lowercase, prefixed with your game, and descriptive

8. The correct icon is set on each goal in the game data

9. The Image Validator shows no missing images, case mismatches or missing category prefixes

10. Viewed together, the icons look like one set

Once that’s all done, see Submitting a Game for the rest of the process.

Icons are reviewed

Icons that don’t meet the requirements on this page will be rejected, and not all images are guaranteed to be used on the site.