Skip to main content

SVG Spritesheet

Generate an SVG Spritesheet with a JSON Map

Arrange SVG icons on a custom grid and export one PNG, WebP, or SVG spritesheet with a JSON frame map. Control the columns, cell size, padding, spacing, alignment, scale, and sort order.

Drop files here
Grid

0 means automatic. With both at 0 the icons go on a square grid; set one and the other follows from the file count.

Padding is empty space inside a cell; spacing is the gap between cells. Frames in the JSON map cover the whole cell, padding included, and never reach into the spacing.

Sorting
Cell contents
Horizontal alignment
Vertical alignment

How much of the padded cell the artwork fills after it has been fitted.

Writes each file's name under its cell. The label row adds to the sheet height and stays outside the frames.

Output
Output format

PNG works everywhere. WebP is smaller wherever the browser can encode it. SVG keeps every icon as vector and scales without blurring.

Background

Preview

No preview. Add and select files to see results.

No files yet. Drop files above or click SELECT FILES.

What is an SVG spritesheet?

A spritesheet is one image holding many smaller images on a grid, plus a map that says where each one sits. Here the sources are SVG files: each is drawn into its own cell and the finished sheet is exported as PNG, WebP, or a single SVG canvas.

It is not the same thing as an SVG symbol sprite. A symbol sprite is one SVG file with a <symbol> per icon that pages reference by id with <use>, so each icon stays vector markup and CSS can still color it. A spritesheet is a visual canvas: whatever consumes it slices frames out by coordinates. Pick the symbol sprite for HTML icons, the spritesheet for canvas, WebGL, or CSS background sprites.

When to use a spritesheet

A spritesheet collapses many small images into one file, so a game or an app makes a single request and keeps every frame in one texture. Canvas and WebGL renderers draw from it by rectangle, CSS positions it with background-position, and the JSON map supplies the coordinates so nothing has to be measured by hand. Reach for it whenever the consumer works in pixels; if you want icons that scale and inherit colour inside HTML, build an SVG symbol sprite instead.

How to build a spritesheet from SVG files

  1. 1

    Drop your SVG files, or click SELECT FILES, to add them to the queue. Up to 40 at a time.

  2. 2

    Set the grid (columns, rows, cell size, padding, spacing), then the alignment, scale, sorting, and output format. The sheet redraws as you change them.

  3. 3

    Click SAVE ALL to download one ZIP holding the sheet and its JSON frame map.

Privacy: your files never leave your browser

Conversion runs locally in your browser using JavaScript and WebAssembly. There is no file upload or server-side conversion, so the files you add stay on your device.

Local processing helps protect confidential logos, internal documents, and unreleased client artwork. Pages and conversion code are cached as you use them, so tools you have already opened can continue working without a network connection.

Frequently asked questions

Should I use a spritesheet or an SVG symbol sprite?

Use a symbol sprite when the icons go into HTML: it stays vector, inherits the CSS color property, and each icon is referenced by id with <use>. Use a spritesheet when something draws pixels from coordinates, such as a canvas or WebGL game or a CSS background sprite. The spritesheet's JSON map gives you the x, y, width, and height of every frame.

What is in the JSON map?

One entry per icon, keyed by the file name without its extension, for example {"home":{"x":0,"y":0,"width":64,"height":64}}. The rectangle covers the whole cell, padding included, so drawing that rectangle reproduces the icon exactly where it was placed. Duplicate names get -2 and -3 suffixes so every key stays unique.

How large can the sheet be?

The canvas is capped at 16,384 px per side and 64 megapixels in total, so 40 icons in 256 px cells sit comfortably inside the limit. Past it the tool reports the size instead of writing a blank image. WebP also depends on the browser: where it cannot encode WebP you get an error rather than a PNG carrying the wrong extension.