LOCAL FILES. INSTANT WORKFLOW.

Icon to SDF

Convert PNG or SVG icons into signed distance field textures that stay crisp at any size.

See what you’ll get ↓

Add PNG or SVG icons
Choose size and spread
Preview and download the SDF set

● Local processing · Files clear on refresh

Start with your iconsDrag and drop here, or browse your device

PNG, or SVG shapes and paths without text, scripts, or embedded images · Up to 64 icons

Your preview will appear here

Start with your icons, then follow the settings below.

See an example of the output ↓

Adjust your result

Output size is the square texture side. Spread is how many pixels the distance covers on each side of the edge, and also the margin kept around the icon.

A useful tip

Try 64 px with a spread of 8. Use the preview sliders to test threshold, softness, and outline before you download; they do not change the files.

Choose a file above, then adjust these settings.

Output size (px)Spread (px)Store distance inShape comes from

Each icon is fitted inside the spread margin of a square texture. The edge is stored at 0.5 and the value rises toward the inside; the full range covers twice the spread.

Next: prepare your files, then download them below.

WHAT YOU’LL GET

One small texture. Sharp at any size.

Illustrative example

01 / INPUT

Flat icon artwork

02 / OUTPUT

Distance field + crisp scaled previews

Included in your download

SDF textures · PNG
Field settings · JSON
ZIP package

The edge sits at 0.5 and the value rises inside the shape. Store it in alpha or as grayscale, then threshold it in your engine's SDF material.

Example only. Your actual result appears in the workbench after you prepare it. Download before refreshing; files stay in this tab.