How does thinning actually work?

It uses a morphological erosion: every opaque pixel that lies within the chosen radius of a fully transparent pixel — or of the canvas edge, which is treated as background — is cleared to transparent. The net effect is that the icon's visible strokes and shapes shrink inward evenly.

What happens to icon content that touches the canvas edge?

The canvas border is treated as transparent background for erosion purposes, so any opaque content right at the edge erodes away just like it would next to a transparent pixel.

What radius should I use?

Start with 1 pixel for a subtle thinning effect; larger radius values will erode thin strokes away completely, which can be intentional (to remove fine detail) or a sign you've gone too far.

Can thinning delete an icon's content entirely?

Yes, if the radius is large relative to the icon's stroke width — thin lines and small shapes can be eroded away completely, leaving a fully (or mostly) transparent result.

Icon Thinner - Make an Icon's Strokes Slimmer Online

Overview

Introduction

This tool shrinks an icon's visible strokes to make it look thinner, entirely in your browser, using a morphological erosion over the icon's alpha channel.

It's the direct inverse of the Icon Thickener, and a genuinely new pixel operation for this site's icon tools.

What Is Icon Thinner?

A client-side icon-slimming tool that reads an uploaded icon's pixel data and, for every opaque pixel, checks whether any pixel within the chosen radius is fully transparent or falls outside the canvas.

If so, that opaque pixel is cleared to fully transparent, shrinking the icon's visible shape inward from every edge.

How Icon Thinner Works

For each opaque pixel, the tool scans every position within the requested radius (using squared-distance comparisons to approximate a circle); if any of those positions is transparent or off-canvas, the pixel is marked for erosion.

Interior pixels more than the radius away from any transparent pixel or the canvas edge are left completely untouched.

When To Use Icon Thinner

Use it to create a lighter-weight variant of a bold icon, matching a thinner visual style elsewhere in a design system.

It's also useful for cleaning up small stray artifacts or fringe pixels around an icon's main shape.

Often used alongside Icon Thickener and Icon Space Remover.

Features

Advantages

Runs entirely client-side; the uploaded icon is never sent to a server.
Simple, predictable radius control over how much to erode.
The direct mathematical inverse of the Icon Thickener, so the two pair naturally.

Limitations

Strokes thinner than twice the chosen radius can be eroded away completely rather than just thinned.
Content touching the canvas edge always erodes there, since the edge is treated as background — pad the icon first if you want edge-touching content to survive.

Examples

Slim a bold line icon

Input

A 64x64 icon with thick strokes, radius 1

Output

A 64x64 PNG with visibly thinner strokes

Every opaque pixel within 1px of a transparent pixel is cleared, shrinking the stroke width by roughly 1px on every side.

Erode a small shape away entirely

Input

A 4x4 solid square icon, radius 3

Output

A mostly or fully transparent PNG

When the radius is large relative to the shape's size, erosion can remove the entire visible shape.

Best Practices & Notes

Best Practices

Add space around the icon first with the Icon Space Adder if you don't want edge-touching content to erode.
Start with a radius of 1 and check the result before trying larger values, since thin strokes disappear quickly.

Developer Notes

This is genuinely new pixel math (a proximity-to-transparent-or-edge morphological erosion over the alpha channel), not a re-derivation of an existing tool, since no erode/thin operation existed elsewhere in this category; it reuses the shared PixelBuffer helpers (clonePixelBuffer/getPixel/setPixel) rather than reimplementing pixel access.

Icon Thinner Use Cases

Creating a lighter-weight variant of a bold icon
Cleaning up small stray fringe pixels around an icon's edge
Matching a thinner stroke style across an icon set

Common Mistakes

Using too large a radius and accidentally eroding the entire icon away.
Forgetting the canvas edge counts as background, which erodes edge-touching content even if it wasn't near any transparent pixel.

Tips

Pad the icon with the Icon Space Adder first if edge-touching content needs to survive erosion.
Try radius 1 first — it's often enough to visibly slim an icon without losing detail.

Icon Thinner