# Make a sprite sheet with JSON or CSS coordinates, or an SVG sprite

> Pack selected icons into one image with a JSON or CSS file of their positions, or export them as SVG files and an SVG symbol sprite.

## Goal

Ship many small icons as one file for a game, a web page or an icon system.

## Before you start

- The icons as separate layers or frames, selected on the canvas.

## Steps

1. **Choose Whole Sprite Sheet** On the Icons & Sprites tab, pick Whole Sprite Sheet (PNG/WebP/JPG) in the preset list.
   ![Icons & Sprites tab: four map-legend icons and an app icon selected, Whole Sprite Sheet (PNG/WebP/JPG) as the preset.](https://raiken.io/assets/kb/optimizely/optimizely-sprite-sheet/sprite-sheet.png)
2. **Set the options** Output Format: PNG or JPEG. Metadata Format: JSON, CSS or JSON + CSS. Icon Padding: 0 to 32 px between icons (2 by default). Packing: Grid (Recommended), Auto (Smart) or Shelf (Horizontal). Turn on Power-of-2 dimensions if your engine needs sizes like 512 or 1024 px.
   ![Sprite sheet settings: Output Format PNG, Metadata JSON + CSS, Icon Padding 2, Packing Grid, Power-of-2 off.](https://raiken.io/assets/kb/optimizely/optimizely-sprite-sheet/sprite-sheet-options.png)
3. **Export the sheet** Click Export Icons. Optimizely downloads the sprite image and its metadata as separate files, and a message tells you how many icons the sheet holds and its size in pixels.
4. **Match the file name** The JSON and CSS refer to the image as sprite.png (or sprite.jpg), but the download is called sprite-<N>-icons-<number>.png. Rename the image to sprite.png, or change the name in the metadata.
5. **Or export an SVG sprite** Pick Modern Favicons, switch from Pixel Icons to SVG, then choose SVG Sprite Sheet. With two or more icons you get one .svg of <symbol> elements; use an icon with <svg><use href="sprite.svg#icon-name" /></svg>. Individual SVGs exports one file per icon instead.
   ![SVG mode with SVG Sprite Sheet (SVG) chosen: all icons in one sprite with symbols, Export SVG (5).](https://raiken.io/assets/kb/optimizely/optimizely-sprite-sheet/svg-sprite.png)

## Tips

- Each icon keeps its own width in the sheet (at least 24 px), so size the icons in Figma the way you want them in the sprite.
- The JSON lists every icon's name, x, y, width and height; the CSS gives each icon a class with its background position.

## Result

One sprite image plus coordinates for every icon, or an SVG sprite you can reference by icon name.

## If something goes wrong

- **My WebP sprite sheet is really a PNG.** -> The WebP option writes PNG data in the current version. Choose PNG, and convert the sheet to WebP afterwards if you need it.
- **A frame called sprite_<number> flashed on the canvas.** -> Optimizely builds the sheet in a temporary frame and deletes it after the export. Nothing is left behind.

## Common questions

### What is a sprite sheet?

One image that holds many small images side by side, plus a list of where each one sits. Games and websites load the single file and show the part they need.

### Does a sprite sheet count towards the daily limit?

Yes. On the free plan, each icon in the sheet counts as one of the 6 daily icon exports.

## Related guides

- [Export favicons and app icons for web, iOS, Android, Windows and macOS](https://raiken.io/kb/optimizely/optimizely-export-icons): Pick a platform preset on the Icons & Sprites tab and get a ZIP with every PNG size, plus a combined favicon.ico or AppIcon.icns where the platform uses one.
- [Export Figma layers as WebP, PNG, JPG or SVG](https://raiken.io/kb/optimizely/optimizely-export-images): Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP.

---

Source: https://raiken.io/kb/optimizely/optimizely-sprite-sheet (Optimizely help centre). Reviewed: 2026-10-30.