How to Vectorize an Icon
6 min read
An icon lives at every size at once. The same file is a 16-pixel item in a menu, a 24-pixel button, a 512-pixel app tile and, occasionally, a poster. That only works when the geometry underneath is honest: few nodes, closed paths, and no leftover fringe from the anti-aliasing of whatever raster you started with.
Vectorizing an icon is therefore less about the conversion and more about what you feed it and what you prune afterwards. This guide covers both.
Start from the largest raster you have, then flatten it
Anti-aliasing is the enemy here. On a 32-pixel icon, the soft grey pixels along every diagonal are a large fraction of the image, and a tracer has no way to know they were meant to be a hard edge rather than a real intermediate tone. Give it a 512-pixel version and the same edge is a one-pixel transition against forty-nine clean pixels — the shape is unmistakable.
If the icon is monochrome, make it genuinely monochrome before converting: pure black on transparent, or pure black on white, with no soft shadow and no subtle inner glow. Every one of those effects becomes shapes in the output, and shapes in the output are nodes you have to find and delete.
Judge the result by node count, not by how it looks at 100%
At the size you are looking at it, almost any trace looks fine. The test that matters is the node count: open the path and count the points. A well-drawn icon has points only where the curve genuinely changes direction — a rounded square has eight, a circle has four, a chevron has three or six. If a simple shape has come back with sixty, the tracer was chasing pixel noise, and that shape will render slowly, edit badly and look subtly wrong when scaled.
On Pro and above, the detail control is what governs this directly: lower detail merges more aggressively and produces fewer, cleaner nodes. Push it down until corners just start to soften, then back off one step. Below Pro the level is chosen automatically, and the way to influence it is the quality of the source.
Align to the pixel grid afterwards, not before
Icon sets have a grid — usually 24×24 with a two-pixel safe margin, or 16×16 for dense interfaces. A traced path lands wherever the pixels were, which is close to that grid but not on it, and at small rendering sizes 'close' is what makes one icon in a row look half a pixel heavier than its neighbours.
Snap the finished paths to whole coordinates in your editor and set the SVG's viewBox to your grid. This is fiddly the first time and mechanical afterwards, and it is what separates an icon set that looks designed from one that looks converted.
One weight, one style, one file
If you are rebuilding a whole set, convert them all in one batch so they go through identical settings, then normalise the stroke weight by hand across the set. An icon family reads as a family because its strokes match; a set traced individually over several sessions will not match, and the mismatch is visible even when no single icon looks wrong.
Batch conversion starts on Pro, which takes 30 files at once. Below that the files convert one at a time, which for a set of twenty is a few minutes of clicking rather than a blocker.
Step by step
- 01
Get the largest raster version
512 pixels or more if it exists. A 32-pixel source is mostly anti-aliasing, and anti-aliasing is what a tracer gets wrong.
- 02
Flatten to a single colour
Remove drop shadows, inner glows and gradients before converting. Each one becomes extra shapes in the output.
- 03
Convert to SVG
Upload and download the result. SVG is the native format for both web and app icons.
- 04
Check the node count
Open the path in your editor. A simple shape should have a handful of points, not dozens. If it has dozens, the source had noise.
- 05
Snap to your icon grid
Align the paths to whole coordinates and set the viewBox to your grid size, so the icon renders crisply at 16 and 24 pixels.
Common problems
- The icon looks blurry at 16 pixels even though it is a vector
- Its paths are not aligned to the pixel grid, so the renderer is anti-aliasing every edge. Snap the coordinates to whole numbers and set the viewBox to match your grid.
- A simple shape came back with dozens of nodes
- The source had anti-aliasing or JPEG noise the tracer read as detail. Use a larger, cleaner source; on Pro and above, lower the detail level.
- Corners are rounded that should be sharp
- Smoothing is set too high. On Pro and above, step it down — real corners stay sharp up to Strong, and only Maximum rounds everything.
- The icon has a faint outline of a different colour
- That is the anti-aliased fringe of the original, traced as its own thin shape. Delete it in the editor, and next time flatten the source to a single hard-edged colour first.
Frequently asked questions
- What size should the source icon be?
- As large as exists — 512 pixels or more is comfortable. Below about 64 pixels the anti-aliasing is a large fraction of the image and the tracer cannot tell a soft edge from a real one, which is what produces lumpy curves.
- Can I convert a whole icon set at once?
- Batch conversion starts on Pro, which takes 30 files at a time; Studio takes 50 and Agency 100. Converting a set in one batch matters for more than speed — every file goes through identical settings, so the icons come out consistent with each other.
- Will transparency survive?
- Yes, from a source that has it. Transparent areas of a PNG or WebP stay empty in the SVG. A JPEG has no transparency at all, so an icon from a JPEG arrives with its background as a solid shape you can delete.
- Should icons be SVG or a font?
- SVG. Icon fonts were a workaround for a browser era that ended: they cannot do multiple colours, they break with a missing font file, and screen readers read them as text. Convert to SVG and use it inline or as a sprite.
Related guides
- How to Vectorize a Logo — Rebuild a logo you only have as a small JPG into clean, print-ready curves with exact brand colours.
- How to Vectorize Blueprints and Technical Drawings — Convert scanned drawings and schematics into editable line work without inheriting the scanner's errors.
- How to Vectorize a Flyer or Poster for Large Format — Rescue a flat design for A1 and larger without the soft edges — and know which parts not to convert.