Tool

SVG Icon Encoder

Convert an SVG into a self-contained data URI you can paste straight into the SM Folder CSS variables. Works reliably across preview, password-protected, and live published sites — no third-party hosting required.

Encoder

1 · Upload your SVG

Drop an SVG here, click to browse, or paste below .svg files only · single file

Or paste raw SVG markup

22px · actual size · backdrop auto-adjusts for visibility

2 · Copy the data URI

Drop an SVG above to generate the data URI.

3 · Paste into Custom CSS

Open your template's Custom CSS, find the matching @sm-folder-icon-N line, and replace the existing URL — including the surrounding quotes — with what you copied.

Before

@sm-folder-icon-3: url('https://example.com/old-icon.svg');

After

@sm-folder-icon-3: url("data:image/svg+xml,…");