Inline SVGs as CSS background images require URL-encoding the markup by hand, a task that is wrong on the first try and fragile on the second. The encoding is mechanical, so let a tool do it.
Paste SVG markup and get a CSS-ready background-image data URI. Use it for icons and small illustrations that should live in CSS, and keep the source SVG alongside for edits later.
Try it now: open the free tool, runs 100{b8b7921c843ac9e5edcbca134af59decad3ed340e0e3b2e6c286158f277affea} in your browser.
Bottom line: encode the SVG, drop the icon font.
Your turn: use the tool free here, no signup, nothing leaves your device.
How do you use SVG to Data URI?
Open the SVG to Data URI in your browser (Inline SVG as CSS background). Type or paste your input, adjust the options, and copy the result. Everything runs locally on your device with no account and nothing stored, so the three steps below take seconds even for confidential work.
- Paste the data or snippet you want to process.
- Run the tool and watch the output update.
- Copy the result for use in your own code.
Try SVG to Data URI free. It opens right in your browser.