How to Extract SVG Icons from a PNG or JPG Image

Extract the icon before converting it. Turning an entire icon board into one SVG does not automatically give you separate icon files. In IconSplit, detection creates the individual results; SVG conversion then rebuilds the selected artwork as vector geometry.

1. Start with a source that suits vector conversion

A simple, clearly separated icon with flat fills is a useful first test. Very small images, soft shadows and heavy texture leave more interpretation to the converter. A JPG source can work, but compression artifacts are part of its pixels and may become unwanted shapes.

If you have both a source PNG and a screenshot of it, use the original PNG. Renaming a JPG to PNG or SVG does not recover lost detail or turn its pixels into paths.

2. Separate the icons, then open the SVG workflow

1. Upload and review detection. Check that each result contains the complete intended icon, without a neighboring fragment. Remove unwanted selections before conversion.
2. Inspect one representative icon. Open its editor and compare the extracted shape with the source. Keep meaningful holes and fine details; avoid applying strong cleanup to the whole set without review.
3. Switch to SVG. Use the SVG workspace and review Vector style. Balanced is a reasonable starting point; compare Compact when you can accept less detail, or Detailed when small shapes matter. These are alternatives to inspect, not guarantees about file size or fidelity for every image.
4. Open Export and inspect the final preview. Confirm the format is SVG and check the framing. Review a small icon at its intended use size as well as enlarged.
5. Export the selected result. Give the file a meaningful name. For a full set, review all selected results before packaging them together.

The SVG extraction tool guide explains the available conversion workflow. SVG export requires Pro or Lifetime; Free lets you inspect extraction and try one PNG per sheet, not download your own SVG set for free.

3. Compare a real source PNG and SVG

We used the mail icon from our original six-icon geometric fixture. On September 15, 2026, the browser export pipeline converted it with Balanced style, no additional Repair, original dimensions and 0% padding. The source is 138 × 108px.

Download the source PNG and download the exported SVG. The SVG is 1,270 bytes, contains one path element and no image elements, and has viewBox="0 0 138 108". These facts are recorded in the export test receipt.

One path can contain multiple subpaths, so one path does not necessarily mean one solid silhouette. Compare the envelope opening and rounded corners with the PNG. Vector conversion does not promise pixel-identical reconstruction.

These fixed demonstration files are available to inspect without a plan. They do not change the paid export requirement for your own images.

4. Keep the raster version when it serves the artwork better

SVG is not automatically the best format for every icon. Converting a shaded AI illustration may turn gradients into many filled regions. A tiny irregularity in the source may become a persistent vector contour. Increasing detail may preserve more of those irregularities rather than repair them.

If the vector result loses important texture or changes the character of the icon, keep PNG or WebP for that asset. A mixed delivery set is often more honest than forcing every image into a vector workflow.

Before handoff, use the SVG quality checklist to check paths, transparency, scaling and framing. For the difference between smoothing a PNG and creating paths, see Vector smoothing versus SVG.