Convert SVG to CSS background

No. The conversion runs entirely in your browser. The file never leaves your device – there is no server that could see it. Once the page has loaded, the tool even works offline.

One rule: .your-class { width; height; background-image: url("data:image/svg+xml,…"); background-repeat: no-repeat; background-size: contain; }. Width and height are the SVG's own size in pixels – change or delete them as you like; with background-size: contain the icon scales to whatever box you give it.

For single-colour icons that should follow the text colour. The rule sets background-color: currentColor and uses the SVG as mask-image (with the -webkit- prefix for older Safari), so the icon is drawn in the element's color and changes on hover or in dark mode with one CSS property. Only the SVG's shape is used – its own fills are ignored. Multi-colour graphics need the normal background variant.

From the file name unless you type one: “Arrow Left.svg” becomes .arrow-left. Names are lower-cased, unsafe characters become hyphens and a leading digit gets an “svg-” prefix, so the selector is always valid.

Scripts and external references are always stripped, the XML prolog and comments are dropped, and unless you switch off “Optimise first” the SVG is minified. The drawing itself stays the same.