Quickly turn any SVG icon or illustration into a ready-to-use CSS snippet — right inside VS Code.
What it does
- Paste your SVG into the input area
- Pick a format (CSS background, custom property, img tag, or raw URI)
- Done — the result is copied to your clipboard automatically
A live preview shows you the SVG so you can confirm it's the right one.
Output formats
| Format | What you get |
|---|---|
| background-image | background-image: url("data:image/svg+xml,…"); |
| Raw data URI | data:image/svg+xml,… |
| CSS custom property | --icon: url("data:image/svg+xml,…"); |
| HTML img tag | <img src="data:image/svg+xml,…" /> |
How to open
Click the SVG icon in the activity bar (left sidebar) to open the panel.
Why use this?
- No need to leave your editor
- No external websites or tools
- Produces the smallest possible encoded output
- Clipboard-ready in one step