CleanorTools
SVG

SVG Icon Sizing Tool

Details

How to use SVG Icon Sizing Tool

What the tool does, how to run it, and what to expect from the result.

How to normalize an SVG icon

To normalize an icon, upload the SVG into the SVG Icon Sizing Tool, choose a target grid such as 16, 20, 24, or 32, and let it trim empty space and align the artwork. You can keep the content centered or switch to a top-left alignment, then export a clean, grid-ready SVG.

The whole process runs client-side in your browser, so your icon is never uploaded to a server. That keeps the workflow private and fast, with no signup and no waiting on a remote conversion.

  • Upload one SVG icon
  • Pick a 16, 20, 24, or 32 grid
  • Trim empty space and center or left-align
  • Export the normalized SVG locally

Why icon normalization matters

Icon sets look inconsistent when their artboards and viewBoxes are not aligned to a shared grid. One icon sits slightly larger, another drifts off-center, and the set feels untidy in product UI. The SVG Icon Sizing Tool focuses on that single cleanup step so icons feel intentional.

Normalizing onto a clean grid also makes icons predictable in code, since each file reports the same intrinsic size and centering. This tool is built for icon-like SVG assets rather than large illustrations, keeping the job narrow and reliable.

Tips

Getting a better result out of SVG Icon Sizing Tool

Specific settings and thresholds, not general advice.

  • Trim empty space measures the real rendered bounding box by mounting the SVG off-screen and reading getBBox, then rewrites the viewBox to those bounds. A full-bleed transparent background rect counts as content and will defeat the trim, so delete any invisible framing rect in the source first.
  • The artwork is scaled to touch the edge of the grid: the scale factor is the smaller of gridSize/bboxWidth and gridSize/bboxHeight, with no padding. Most icon systems want a live area inside the box, for example a 20 unit drawing inside a 24 unit grid, so if you need that breathing room, add it to the source artwork before running this.
  • The transform is applied with scale(), and scale() applies to stroke widths too. A 2 unit stroke on a 64 unit artboard becomes 0.75 units on a 24 grid, which renders soft and thin. Check stroke-width after normalizing, or set vector-effect="non-scaling-stroke" on the stroked paths.
  • The scale is uniform, so a wide icon centered on a square grid keeps empty space above and below. That is correct behaviour, not a bug: the alternative would distort the artwork. Use the Center alignment mode unless the icon is meant to hang from the top-left.
  • <defs> are hoisted outside the transform group, so gradients and clipPaths defined with gradientUnits="userSpaceOnUse" keep the original coordinate system and can land in the wrong place after the rescale. Gradients using objectBoundingBox units are unaffected.
Limits

What SVG Icon Sizing Tool does not do

The honest boundary, so you do not lose time finding it yourself.

  • Only four grids: 16, 20, 24, and 32. There is no 48 or 64 option.
  • No padding or live-area control. Artwork is always scaled to fill the grid.
  • No stroke-width normalization. Strokes scale with the artwork.
  • One icon per run. There is no batch normalizer and no sprite output.
At a glance

Who SVG Icon Sizing Tool is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Product teams and frontend engineers normalizing icon assets before they land in a design system or app UI.

Ideal for

Getting one icon SVG onto a cleaner grid without opening a full vector editor.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

How do I resize an SVG icon to a grid?

Upload the icon, choose a target grid like 16, 20, 24, or 32, and the SVG Icon Sizing Tool trims empty space, aligns the content, and exports a grid-ready SVG you can download locally.

Can I keep the artwork top-left instead of centered?

Yes. The tool supports both centered output and a top-left alignment mode, so you can match whichever convention your icon set uses.

Is this meant for large illustrations too?

No. The SVG Icon Sizing Tool is focused on icon-like SVG assets that need grid normalization, not large illustrations or complex scenes.

Does it upload my icon, and is it free?

No upload is involved. The tool runs entirely in your browser, your SVG stays on your device, and it is free with no signup.

Why does my icon touch the edges of the box?

Because the tool scales the artwork's bounding box to fill the grid, with no padding. Icon systems normally want a margin, for example a 20 unit live area inside a 24 unit box. Add that padding to the artwork in your editor, or run the icon onto a larger grid and set a smaller display size in CSS.

My strokes look thinner after normalizing. What happened?

The whole drawing is placed inside a group with a scale() transform, and strokes scale along with everything else. Coming from a 64 unit artboard down to a 24 grid multiplies every stroke width by about 0.375. Set the stroke-width to the value you want at the target grid, or add vector-effect="non-scaling-stroke".

Which grid should I pick?

Match whatever your design system already uses, because mixing grids is exactly what makes an icon set look inconsistent. 24 is the most common default in web and Android UI, 16 suits dense desktop toolbars and inline text, 20 is a common compromise, and 32 works for larger touch targets and settings rows.

Trim did nothing. Why?

Almost certainly because the SVG contains a transparent background rectangle covering the artboard. getBBox counts it as geometry, so the bounding box already fills the canvas and there is nothing to trim. Delete that rect in a vector editor and run the tool again.

Is the icon uploaded anywhere?

No. The measuring, rescaling, and export all run in your browser. The SVG is mounted off-screen inside your own page to measure its bounding box, then discarded.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

VIEW
UtilitySVG

SVG ViewBox Cleaner

Fix SVG viewBox

Fix missing or messy viewBox values, trim empty SVG space, and export a cleaner result locally.

SIZE
UtilitySVG

SVG Dimensions Checker

Inspect SVG geometry

Inspect one SVG for width, height, viewBox, intrinsic ratio, and missing geometry warnings.

SVGO
UtilitySVG

SVG Optimizer

Optimize SVG markup

Optimize one SVG locally, remove editor junk, and export cleaner markup with a smaller file size.

CODE
UtilitySVG

Inline SVG Cleaner

Clean inline SVG

Clean pasted SVG markup for inline frontend use, strip editor junk, and export a safer snippet.

SVG
UtilitySVG

SVG Blob Generator

Generate SVG blobs

Generate smooth, organic SVG blob shapes with adjustable points and contrast. Free, in your browser, copy the SVG.

FILL
UtilitySVG

SVG Color Replacer

Replace SVG colors

Detect fill and stroke colors in one SVG, replace them selectively, and export the updated markup.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing