Create a SVG spritesheet

This application generates SVG spritesheets from individual icon SVG files.


Name editor


Color editor

Color edit

Stroke editor

Stroke edit

Variable editor

How to use variables

The variable editor can be used to create and edit CSS variables (custom properties) that can be used in the color and stroke editors. These variables do not affect the finished spritesheet in any way. They are used for testing purposes. Once your spritesheet is done, you should create the same variables in your project CSS.

Edit variable