Sprite Sheet Packer
Pack many icons into one PNG sprite with CSS + JSON metadata.
Overview
The Sprite Sheet Packer combines many individual icon PNGs into a single sheet, with accompanying CSS background-position rules and a JSON manifest mapping each frame to its rectangle. Upload a collection of small images, pick a layout strategy, and the tool returns a ZIP containing the packed PNG and the metadata files.
It is the right move for game-engine asset pipelines, web UIs that load dozens of small icons (one HTTP request instead of fifty), and CSS sprite workflows where each glyph is a background-position lookup. The CSS + JSON output means you can drop the result into a build pipeline or a runtime icon component with minimal glue.
How it works
The packer arranges every input rectangle inside one larger rectangle using a 2-D bin-packing algorithm. The default strategy is a greedy "max-rects" approach: each new sprite is placed into the most efficient remaining free rectangle, then the surrounding space is partitioned into smaller free rectangles for subsequent placements.
The output PNG is the smallest power-of-two square (or rectangle, depending on configuration) that holds every sprite without overlap. The accompanying CSS file declares one class per sprite with the right background-position and width/height, while the JSON manifest emits an object keyed by filename whose value is { x, y, w, h } — easy for a renderer or build tool to consume.
Examples
Inputs: 60 icon PNGs (each 32x32, transparent backgrounds)
Output ZIP:
sprites.png (256x256 packed PNG)
sprites.css (.icon-home, .icon-search, ... background-position rules)
sprites.json (manifest mapping filename → rect)
Inputs: 200 game tile PNGs (mixed 16x16 and 32x32)
Output: single 1024x1024 sheet with optimal packing,
manifest for a tile-renderer to consume.
Inputs: 12 logo variants
Output: 512x256 horizontal strip + manifest.
FAQ
Does the packer leave padding between sprites?
A configurable inter-sprite gutter (default 2 px) avoids bleed when the sheet is scaled or used as a texture atlas. Drop the gutter for the smallest possible sheet if no downstream scaling will happen.
What sheet sizes are supported?
Output dimensions are rounded up to a power of two by default, which is friendly to GPU texture allocation. Plain rectangles without the power-of-two constraint are also available for plain web use.
Will it deduplicate identical sprites?
By default each input becomes a separate rectangle. Hash-based deduplication is a build-pipeline concern — preprocess inputs if duplicate-detection matters.
Can it produce CSS variables instead of classes?
The CSS output uses class selectors per sprite. For a custom format, parse the JSON manifest and emit whatever shape your stylesheet expects.
Are SVGs supported as inputs?
This packer targets raster PNG inputs. SVG packing requires a different approach — typically a <symbol>-based SVG sprite file rather than a positional sheet.