FertiJourney Dev Tools 🏠← All tools

CSS Sprites Generator

Combine many small icons into a single PNG sprite sheet and generate ready-to-use .icon CSS classes with background-position.

Pick multiple small images (icons / emoji / buttons). Choose a layout — Horizontal arranges them in one row, Vertical in one column, Grid wraps after N columns. Optional gap adds transparent pixels between sprites. The tool draws all images onto a single Canvas, exports sprites.png, and generates one .icon- class per image with the right width / height / background-position. Filenames are sanitized (lowercase, [a-z0-9-]); duplicates get a numeric suffix. Copy CSS, download the PNG, drop both into your project — done.