Make a sprite sheet with JSON or CSS coordinates, or an SVG 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.
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.
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.

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.

Related guides

• ICONS & SPRITES
  Export favicons and app icons for web, iOS, Android, Windows and macOS 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 IMAGES
  Export Figma layers as WebP, PNG, JPG or SVG Select layers, pick a format and scale in Optimizely's Export tab, and download them as files or one ZIP.
  →