The generated SVG is larger than expected
Bitmap files are embedded as Data URLs, which are text and often larger than binary files.
Use this for small icons and UI assets. Compress large images first or keep them separate.
SVG Spritesheet Builder
Combine SVG, PNG, JPG, WebP or GIF icons into one SVG spritesheet, then copy CSS background-position code and a JSON manifest. Everything runs locally in your browser.
SVG Spritesheet Builder overview
The SVG Spritesheet Builder combines multiple icons or small UI images into a single downloadable SVG spritesheet. Drop SVG, PNG, JPG, WebP or GIF files, choose a grid, horizontal or vertical layout, and the tool calculates each sprite position. It also generates CSS background-position rules and a JSON manifest with exact coordinates.
CSS sprites are still useful for legacy stylesheets, icon sets, small game UI assets and projects that want a single cached resource instead of many small files. Manually maintaining positions is tedious and error-prone. KitVerse performs image reading, layout, preview and export locally in the browser, so private product icons and unreleased UI assets are not uploaded.
How to use SVG Spritesheet Builder
- 1Drop or choose SVG, PNG, JPG, WebP or GIF files. Each file is read locally and added to the sprite list.
- 2Choose grid, horizontal or vertical layout. Adjust padding, grid columns, background and CSS class prefix.
- 3Rename sprite IDs to match your project naming style, then reorder or remove items if needed.
- 4Check the spritesheet preview and generated sheet dimensions.
Troubleshooting
CSS does not show the icon
The generated CSS references kitverse-spritesheet.svg by default.
Place the SVG next to your CSS file or update the background-image path.
Sprite positions look unexpected
Grid layout centers mixed-size images, and padding/columns affect coordinates.
Adjust layout settings and use the preview plus JSON manifest as the source of truth.
Spritesheet outputs compared
The same images produce three outputs: SVG for the asset file, CSS for webpage usage and JSON for build scripts or custom rendering.
| Output | Use | Strength | Note |
|---|---|---|---|
| SVG spritesheet | Store all small icons in one file | Downloadable, cacheable and transparent | Bitmap inputs are embedded as Data URLs |
| CSS | Use icons through classes | Includes width, height and background-position | References kitverse-spritesheet.svg by default |
| JSON manifest | Build scripts, Canvas or custom UI | Exact x/y/width/height data | Requires your own renderer |
| SVG symbol sprite | Pure SVG icon systems | Works with use references | Planned separately from this image spritesheet MVP |
SVG Spritesheet Builder examples
CSS sprite icon example
Input files
search.svg, bolt.svg, check.png
CSS output
.sprite-search { width: 48px; height: 48px; background-position: -6px -6px; }Place the downloaded SVG next to the CSS file and use the generated class.
JSON manifest example
Sprite ID
check
Manifest
{ "check": { "x": 114, "y": 6, "width": 48, "height": 48 } }Useful for build scripts, Canvas rendering or custom UI components.
Use cases
Frontend icon sets
Bundle small icons into one SVG file and reference them with CSS classes.
Legacy CSS sprite maintenance
Generate fresh background-position values for projects that still use sprites.
Game and UI assets
Organize badges, buttons and state icons into a manifest for custom rendering.
FAQ
Are my images uploaded?›
No. Reading, layout, preview and downloads run locally in your browser.
Which file formats are supported?›
Common browser-readable image formats are supported, including SVG, PNG, JPG, JPEG, WebP and GIF.
How is this different from an SVG symbol sprite?›
A symbol sprite is mainly for pure SVG icons and use references. This tool creates an image spritesheet that can mix SVG and bitmap inputs and outputs CSS positions.
Why does embedding bitmaps make the SVG larger?›
Bitmap files are stored as Data URL text inside the SVG, which is usually longer than the original binary file.
Can it export a PNG spritesheet?›
The first version exports SVG, CSS and JSON. PNG export, transparent trimming and 2x workflows can be added later.
Are images uploaded?›
No. Files stay in your browser and are embedded into the generated SVG locally.
Does it support PNG, JPG and WebP?›
Yes. Bitmap images are embedded as Data URLs inside the SVG spritesheet.
How do I use the generated CSS?›
Download the SVG next to the CSS file, then use the generated classes for each sprite.