> ## Documentation Index
> Fetch the complete documentation index at: https://docs.summerengine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to make game icons and item sprites with AI

> Make a matching set of inventory icons and item sprites with AI: one style anchor, the same style words and seed, a reference picture for every icon, transparent backgrounds, the right sizes, pixel art, and simple sprite animation. Exact CLI, API and MCP steps and what it costs.

One icon is easy. Forty icons that sit in one inventory grid without a single odd one out is hard. Prompt each item on its own and the sword gets a thin outline, the potion a thick one, the shield is seen from the front and the bow from the side, and one of them comes back on a painted checkerboard. At 64 pixels, every one of those differences shows. This guide locks the style on one anchor icon, makes the whole set from that anchor with the same words, the same seed and a reference picture, cuts out real transparency, and then covers sizes, pixel art and a simple animated pickup.

## The chain

| Step | Model | Why this model | Cost |
| - | - | - | - |
| 1. Style anchor, four takes | [Recraft V4.1](https://docs.summerengine.com/api/models/image/recraft-4-1.md) `image/recraft-4.1` | Built for inventory icons and item art in one consistent style, with clean shapes and tight composition; four takes give you a real choice of anchor. | \$0.14 |
| 2. The icon set x 24 | [Nano Banana 2.1](https://docs.summerengine.com/api/models/image/nano-banana-2-1.md) `image/nano-banana-2.1` | Edits from the anchor picture, so outline, shading, angle and padding carry into every item, and on Nano Banana models the seed holds the look steady. | \$1.392 |
| 3. Pickup spin frames x 4 | [Nano Banana 2.1](https://docs.summerengine.com/api/models/image/nano-banana-2-1.md) `image/nano-banana-2.1` | Small edits from one finished icon keep the item the same in every frame, which a single picture of a whole sheet rarely does. | \$0.232 |
| | | **Total** | **\$1.764** |

**\$1.764 for the whole chain**, at each model's list price:

* Style anchor, four takes: \$0.14 (\$0.035 per image)
* The icon set x 24: \$1.392 (\$0.04 per image, 24 jobs)
* Pickup spin frames x 4: \$0.232 (\$0.04 per image, 4 jobs)

A failed job costs nothing. Before you run anything, price each step exactly and for free: `summer api estimate <model> --input '<json>'`, or `POST /v1/estimate` with the same body as the job. Prices come from [`GET /v1/models`](https://docs.summerengine.com/api/reference/get-models) and change only when the provider's price does.

## Before you start

Sign in once, so your agent or your terminal can run jobs on your Summer account:

```bash theme={null}
npx -y summer-engine@latest login
```

Your browser opens the Summer sign-in. Pick a spend limit for this computer and choose **Allow**. Using a coding agent? Paste this guide's URL and say "make my inventory icons"; the [quickstart for your agent](https://docs.summerengine.com/api/agents.md) connects it in one command.

Decide these before the first job:

* **The item list.** One line per item, with its material and colour: "iron short sword, brown leather grip".
* **The style words.** One block you copy into every prompt: angle, outline, shading, palette, padding, background. In this guide: "Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text."
* **The smallest size.** The size the icon shows at in the busiest screen, such as 48 px in a hotbar. Design for that size, not for the 1024 px picture.

## Step 1: one anchor icon that sets the style

Pick an item with a clear shape and a few materials, such as a potion: glass, liquid, cork. [Recraft V4.1](https://docs.summerengine.com/api/models/image/recraft-4-1.md) is the model for this step. It is built for icons and item art in one style, and it costs \$0.035 per image.

The words that make icons work:

* **"Three-quarter view"** for every item. It reads better than a flat side view, and one angle across the set is what makes a grid look designed.
* **"Bold silhouette that reads at 32 px"** pushes the model toward big shapes and away from fine detail that turns to noise when small.
* **One outline rule and one shading rule.** "Thick dark brown outline, flat cel shading with one soft highlight." Every icon gets the same.
* **"Centered with even padding"** keeps every item the same size inside its square, so the grid lines up.
* **"No frame, no text."** Draw the slot frame and the stack count in the UI, not in the picture. Then rarity colours and numbers can change in the game.
* **A plain light grey background, not "transparent".** Models asked for transparency paint a grey checkerboard as part of the picture.

`numImages: 4` makes four takes in one job. Pick the one that best fits your game. Keep it on its plain background: it is the reference for the set.

```bash CLI theme={null}
npx -y summer-engine@latest api run image/recraft-4.1 \
  --input '{"prompt":"Inventory icon of a red health potion: round glass flask, cork stopper, glowing red liquid. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.","aspectRatio":"1:1","numImages":4,"title":"Icon anchor: health potion"}' \
  --download .
```

```bash curl theme={null}
curl https://www.summerengine.com/v1/jobs \
  -H "Authorization: Bearer $SUMMER_TOKEN" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: $(uuidgen)" \
  -H "Prefer: wait=60" \
  -d '{"model":"image/recraft-4.1","input":{"prompt":"Inventory icon of a red health potion: round glass flask, cork stopper, glowing red liquid. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.","aspectRatio":"1:1","numImages":4,"title":"Icon anchor: health potion"}}'
```

```ts TypeScript theme={null}
const res = await fetch("https://www.summerengine.com/v1/jobs", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.SUMMER_TOKEN}`,
    "Content-Type": "application/json",
    "Idempotency-Key": crypto.randomUUID(),
    Prefer: "wait=60",
  },
  body: JSON.stringify({
    "model": "image/recraft-4.1",
    "input": {
      "prompt": "Inventory icon of a red health potion: round glass flask, cork stopper, glowing red liquid. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.",
      "aspectRatio": "1:1",
      "numImages": 4,
      "title": "Icon anchor: health potion"
    }
  }),
});
const { job } = await res.json();
console.log(job.state, job.id);
```

```python Python theme={null}
import os, uuid, requests

res = requests.post(
    "https://www.summerengine.com/v1/jobs",
    headers={
        "Authorization": f"Bearer {os.environ['SUMMER_TOKEN']}",
        "Idempotency-Key": str(uuid.uuid4()),
        "Prefer": "wait=60",
    },
    json={"model": "image/recraft-4.1", "input": {"prompt": "Inventory icon of a red health potion: round glass flask, cork stopper, glowing red liquid. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.", "aspectRatio": "1:1", "numImages": 4, "title": "Icon anchor: health potion"}},
)
job = res.json()["job"]
print(job["state"], job["id"])
```

```js MCP theme={null}
// Summer's MCP server: npx -y summer-engine@latest setup <agent> --yes
summer_api_run({
  model: "image/recraft-4.1",
  input: {
    prompt: "Inventory icon of a red health potion: round glass flask, cork stopper, glowing red liquid. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.",
    aspectRatio: "1:1",
    numImages: 4,
    title: "Icon anchor: health potion"
  },
  out: "assets",
})
```

## Step 2: the whole set, from the anchor

Now every other item is an edit of the anchor. Three things together hold the style:

* **The reference picture.** `referenceImageUrl` is the anchor. The model copies its outline, shading, angle and padding.
* **The same style words**, word for word, after the item description.
* **The same seed.** On Nano Banana models the seed keeps the look steady between jobs. Write it down with the style words.

`removeBackground: true` cuts the background away after the picture is made and returns a PNG with real alpha.

```bash CLI theme={null}
npx -y summer-engine@latest api run image/nano-banana-2.1 \
  --input '{"prompt":"A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: an iron short sword with a brown leather grip. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.","referenceImageUrl":"<fileUrl of style anchor, four takes>","aspectRatio":"1:1","seed":811,"removeBackground":true,"title":"Icon: short sword"}' \
  --download .
```

```bash curl theme={null}
curl https://www.summerengine.com/v1/jobs \
  -H "Authorization: Bearer $SUMMER_TOKEN" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: $(uuidgen)" \
  -H "Prefer: wait=60" \
  -d '{"model":"image/nano-banana-2.1","input":{"prompt":"A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: an iron short sword with a brown leather grip. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.","referenceImageUrl":"<fileUrl of style anchor, four takes>","aspectRatio":"1:1","seed":811,"removeBackground":true,"title":"Icon: short sword"}}'
```

```ts TypeScript theme={null}
const res = await fetch("https://www.summerengine.com/v1/jobs", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.SUMMER_TOKEN}`,
    "Content-Type": "application/json",
    "Idempotency-Key": crypto.randomUUID(),
    Prefer: "wait=60",
  },
  body: JSON.stringify({
    "model": "image/nano-banana-2.1",
    "input": {
      "prompt": "A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: an iron short sword with a brown leather grip. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.",
      "referenceImageUrl": "<fileUrl of style anchor, four takes>",
      "aspectRatio": "1:1",
      "seed": 811,
      "removeBackground": true,
      "title": "Icon: short sword"
    }
  }),
});
const { job } = await res.json();
console.log(job.state, job.id);
```

```python Python theme={null}
import os, uuid, requests

res = requests.post(
    "https://www.summerengine.com/v1/jobs",
    headers={
        "Authorization": f"Bearer {os.environ['SUMMER_TOKEN']}",
        "Idempotency-Key": str(uuid.uuid4()),
        "Prefer": "wait=60",
    },
    json={"model": "image/nano-banana-2.1", "input": {"prompt": "A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: an iron short sword with a brown leather grip. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.", "referenceImageUrl": "<fileUrl of style anchor, four takes>", "aspectRatio": "1:1", "seed": 811, "removeBackground": True, "title": "Icon: short sword"}},
)
job = res.json()["job"]
print(job["state"], job["id"])
```

```js MCP theme={null}
// Summer's MCP server: npx -y summer-engine@latest setup <agent> --yes
summer_api_run({
  model: "image/nano-banana-2.1",
  input: {
    prompt: "A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: an iron short sword with a brown leather grip. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.",
    referenceImageUrl: "<fileUrl of style anchor, four takes>",
    aspectRatio: "1:1",
    seed: 811,
    removeBackground: true,
    title: "Icon: short sword"
  },
  out: "assets",
})
```

Make the anchor item part of this batch too, so it gets a transparent copy in exactly the same pipeline as the rest.

Look at all 24 icons in a grid at the size the game shows them. A grid shows what one icon at a time hides: one item that is larger, a different angle, an outline that is thinner. Run that one again; it costs \$0.04 per image plus the cut-out.

**Other models for this step.** [Muse Image](https://docs.summerengine.com/api/models/image/muse-image.md) makes many fast icon variations at a very low price (\$0.01 per image) and also takes a reference picture. [FLUX 3 Klein](https://docs.summerengine.com/api/models/image/flux-3-klein.md) is the fast, small model for drafts (\$0.009 per image). For a badge or a card with exact numbers or words on it, use [GPT Image 2.5](https://docs.summerengine.com/api/models/image/gpt-image-2-5.md), which draws exact text.

## Sizes, padding and atlases

The pictures come back at the model's normal size, about 1024 px. Downscale, never upscale:

```bash theme={null}
magick sword.png -resize 128x128 sword_128.png
```

* **Make each size you ship** from the full picture: 64, 128 and 256 px are common. Export twice the display size for high-density screens.
* **Check the smallest size by eye.** If two icons look the same at 48 px, change one silhouette, not its colour.
* **Pack the set into one atlas** to save draw calls:

```bash theme={null}
magick montage icons/*.png -tile 8x -geometry 128x128+0+0 -background none icons_atlas.png
```

**Summer Engine.** Import the PNGs and turn mipmaps off for UI pictures. Show an icon with a `TextureRect` set to keep aspect centered. For an atlas, make one `AtlasTexture` per icon with its region. The [`ui-graphics`](https://docs.summerengine.com/skills/ui-graphics) skill makes the slot frames, buttons and panels in the same style and wires them in. **Any other engine.** The PNG has real alpha. Import it as a UI sprite without compression on the edges.

## Pixel-art icons and sprites

Pixel art has hard rules that image models break by default: a fixed grid, a small palette, no soft edges. The model cannot draw a true 32 by 32 picture. It draws a large picture in pixel style, and you make the real pixels by downscaling.

Change the style words to the pixel rules, and name the palette by its colours:

```text theme={null}
Pixel art inventory icon of a red health potion, 32x32 sprite, PICO-8 palette, hard 1 px outline in the darkest palette colour, 3-tone shading, three-quarter view, no anti-aliasing, no blur, sharp pixel edges, no smooth gradients. Centered, plain light grey background, no text.
```

Then downscale with nearest-neighbour, so no new colours appear:

```bash theme={null}
magick potion.png -filter point -resize 32x32 potion_32.png
```

Look at the result at 400 percent and fix stray pixels by hand. At 16 and 32 px, five minutes in a pixel editor beats another take. In Summer Engine, set the default texture filter to Nearest in the project settings, so the whole game stays crisp. The [`pixel-art`](https://docs.summerengine.com/skills/pixel-art) skill has the full prompt table and the palette rules.

## Step 3: a simple animated pickup

A coin that spins or a gem that pulses makes a pickup feel alive. Make each frame as a small edit of the finished icon: the reference is the icon, and the prompt changes one thing, "the coin turned 45 degrees", "the gem a little brighter".

```bash CLI theme={null}
npx -y summer-engine@latest api run image/nano-banana-2.1 \
  --input '{"prompt":"This same gold coin icon, frame 2 of 4 of a spin: the coin turned 45 degrees so it looks narrower, same size, same position in the picture, same outline, shading and colours. Plain light grey background, no other objects, no text.","referenceImageUrl":"<fileUrl of the icon set>","aspectRatio":"1:1","seed":811,"removeBackground":true,"title":"Coin spin 2"}' \
  --download .
```

```bash curl theme={null}
curl https://www.summerengine.com/v1/jobs \
  -H "Authorization: Bearer $SUMMER_TOKEN" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: $(uuidgen)" \
  -H "Prefer: wait=60" \
  -d '{"model":"image/nano-banana-2.1","input":{"prompt":"This same gold coin icon, frame 2 of 4 of a spin: the coin turned 45 degrees so it looks narrower, same size, same position in the picture, same outline, shading and colours. Plain light grey background, no other objects, no text.","referenceImageUrl":"<fileUrl of the icon set>","aspectRatio":"1:1","seed":811,"removeBackground":true,"title":"Coin spin 2"}}'
```

```ts TypeScript theme={null}
const res = await fetch("https://www.summerengine.com/v1/jobs", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.SUMMER_TOKEN}`,
    "Content-Type": "application/json",
    "Idempotency-Key": crypto.randomUUID(),
    Prefer: "wait=60",
  },
  body: JSON.stringify({
    "model": "image/nano-banana-2.1",
    "input": {
      "prompt": "This same gold coin icon, frame 2 of 4 of a spin: the coin turned 45 degrees so it looks narrower, same size, same position in the picture, same outline, shading and colours. Plain light grey background, no other objects, no text.",
      "referenceImageUrl": "<fileUrl of the icon set>",
      "aspectRatio": "1:1",
      "seed": 811,
      "removeBackground": true,
      "title": "Coin spin 2"
    }
  }),
});
const { job } = await res.json();
console.log(job.state, job.id);
```

```python Python theme={null}
import os, uuid, requests

res = requests.post(
    "https://www.summerengine.com/v1/jobs",
    headers={
        "Authorization": f"Bearer {os.environ['SUMMER_TOKEN']}",
        "Idempotency-Key": str(uuid.uuid4()),
        "Prefer": "wait=60",
    },
    json={"model": "image/nano-banana-2.1", "input": {"prompt": "This same gold coin icon, frame 2 of 4 of a spin: the coin turned 45 degrees so it looks narrower, same size, same position in the picture, same outline, shading and colours. Plain light grey background, no other objects, no text.", "referenceImageUrl": "<fileUrl of the icon set>", "aspectRatio": "1:1", "seed": 811, "removeBackground": True, "title": "Coin spin 2"}},
)
job = res.json()["job"]
print(job["state"], job["id"])
```

```js MCP theme={null}
// Summer's MCP server: npx -y summer-engine@latest setup <agent> --yes
summer_api_run({
  model: "image/nano-banana-2.1",
  input: {
    prompt: "This same gold coin icon, frame 2 of 4 of a spin: the coin turned 45 degrees so it looks narrower, same size, same position in the picture, same outline, shading and colours. Plain light grey background, no other objects, no text.",
    referenceImageUrl: "<fileUrl of the icon set>",
    aspectRatio: "1:1",
    seed: 811,
    removeBackground: true,
    title: "Coin spin 2"
  },
  out: "assets",
})
```

Rules that keep frames steady:

* **Edit every frame from the same finished icon**, not from the frame before it. Chains of edits drift.
* **Small changes only.** A turn, a glow, a bob. Big pose changes break the item.
* **"Same size, same position in the picture"** in every prompt, so the frames line up without a wobble.
* **Four frames are enough** for a spin or a pulse. Play them at 8 to 12 frames per second.

Character sprites with walk cycles and attacks are a bigger job. The [`sprite-sheet`](https://docs.summerengine.com/skills/sprite-sheet) skill covers the three ways to make them, frame by frame from a reference, one sheet that is sliced into frames, or by hand, and wires the frames into an `AnimatedSprite2D`. For a 3D-looking character, the [3D character](https://docs.summerengine.com/api/guides/3d-character.md) guide makes a rigged model you can render from any angle.

## Make every icon in the game

A finished game has a lot of icons: items, abilities, status effects, currencies, map markers, achievements. Write them as one JSONL file, one job per line, each with the anchor as `referenceImageUrl`, the same seed and the same style words:

```jsonl theme={null}
{"model": "image/nano-banana-2.1", "input": {"prompt": "A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: a round wooden shield with an iron rim. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.", "referenceImageUrl": "<fileUrl of the anchor>", "seed": 811, "removeBackground": true, "title": "Icon: wooden shield"}}
{"model": "image/nano-banana-2.1", "input": {"prompt": "A new inventory icon in exactly the same style, outline, shading, palette, angle and padding as this picture: a rolled parchment map tied with red string. Game UI icon, three-quarter view, bold silhouette that reads at 32 px, thick dark brown outline, flat cel shading with one soft highlight, warm fantasy palette. Centered with even padding, plain light grey background, no frame, no text.", "referenceImageUrl": "<fileUrl of the anchor>", "seed": 811, "removeBackground": true, "title": "Icon: map"}}
```

```bash theme={null}
npx -y summer-engine@latest api run --batch icons.jsonl --download art/icons
```

A batch takes up to 500 jobs, is priced when it arrives and runs all or none, so you know the total before anything starts ([batches](https://docs.summerengine.com/api/jobs.md#run-many-jobs-batches)). Each job's `title` names the icon in your library.

## Common problems

| You see | Do this |
| - | - |
| A grey checkerboard behind the item | Remove "transparent" from the prompt, ask for a plain light grey background and set `removeBackground: true` |
| One icon is bigger than the rest | Add "centered with even padding" and run it again from the anchor |
| Mixed angles across the set | Put "three-quarter view" in the style words of every prompt |
| Thin outlines on some icons | Send the anchor as `referenceImageUrl` and keep the same seed and style words |
| The model drew a frame or a number | Add "no frame, no text"; draw slots and counts in the UI |
| Mush at 32 px | Ask for a "bold silhouette that reads at 32 px" and less detail; downscale, never upscale |
| Pixel art has soft edges and extra colours | Downscale with `-filter point`, use a named palette, set the texture filter to Nearest |
| Spin frames wobble | Edit every frame from the same finished icon, and say "same size, same position" |

## Questions

**Can I make icons from my own art style?** Yes. Upload one of your icons ([send a picture](https://docs.summerengine.com/api/jobs.md#send-a-picture)) and use it as the anchor in step 2.

**What size should I ship?** The display size, times two for high-density screens. Make every size from the full picture.

**Can I use the icons in a commercial game?** Yes. Every model on the Summer API allows commercial use of what it makes.

**Do I need a plan?** No. Jobs are paid from your paid Summer credits, your plan's credits or a top-up. Each connected agent has its own spend limit in Settings > Connected apps.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.