SVG Spirit

Create a SVG spritesheet

This application generates SVG spritesheets from individual icon SVG files.

or

Name editor

Test name Test result

Edit Action Parameter 1 Parameter 2

Color editor

Color edit Original

Replacement

Stroke editor

Stroke edit Original Replacement

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 Name Value