How does thickening actually work?

It uses a morphological dilation: every fully transparent pixel that lies within the chosen radius of an already-opaque pixel gets filled in, copying the color of its nearest opaque neighbor. The net effect is that the icon's visible strokes and shapes grow outward evenly.

Does the canvas size change?

No. Thickening grows the icon's shape within its existing canvas, so pixels that would dilate past the edge are simply clipped there — add space around the icon first with the Icon Space Adder if you need more room to grow into.

What radius should I use?

Start with 1-2 pixels for a subtle bold effect on small icons, and scale up for larger icons or a more dramatic effect; very high radius values can merge separate strokes together.

Does this work on multi-color icons?

Yes — each newly-filled pixel copies the color of its single nearest already-opaque neighbor, so multi-color icons keep their distinct color regions growing outward independently.

Icon Thickener - Bold an Icon's Strokes Online

Overview

Introduction

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

It's a genuinely new pixel operation for this site's icon tools, distinct from the outline adder (which draws a colored ring around the shape) and the shadow adder (which composites a blurred copy behind it).

What Is Icon Thickener?

A client-side icon-boldening tool that reads an uploaded icon's pixel data and, for every fully transparent pixel, searches a circular neighborhood of the chosen radius for the nearest already-opaque pixel.

If one is found within range, the transparent pixel is filled with that neighbor's color at full opacity, growing the icon's visible shape outward.

How Icon Thickener Works

For each transparent pixel, the tool scans every pixel within the requested radius (using squared-distance comparisons to approximate a circle) and tracks the closest opaque neighbor found.

That nearest neighbor's color is copied into the output at full opacity; pixels that were already opaque in the source are copied through unchanged.

When To Use Icon Thickener

Use it to make a thin-stroked line icon read more clearly at small display sizes, where fine details can disappear.

It's also useful for creating a bold variant of an icon set without redrawing the artwork from scratch.

Often used alongside Icon Thinner and Icon Space Adder.

Features

Advantages

Runs entirely client-side; the uploaded icon is never sent to a server.
Preserves multi-color icon regions while growing each independently.
Adjustable radius scales the boldening effect to the icon's size.

Limitations

The canvas size doesn't change, so growth near the edge of the canvas gets clipped; pad the icon first if you need extra room.
Very high radius values can merge separate nearby shapes together, losing fine detail rather than just bolding it.

Examples

Bold a thin line icon

Input

A 64x64 single-color line icon, radius 2

Output

A 64x64 PNG with visibly thicker strokes

Every transparent pixel within 2px of the original strokes is filled in, growing the line width by roughly 2px on every side.

Bold a multi-color icon

Input

A two-color icon, radius 1

Output

A PNG where both color regions grow by about 1px each, keeping their own colors

Each transparent pixel copies its single nearest opaque neighbor, so adjacent color regions grow independently rather than blending.

Best Practices & Notes

Best Practices

Add extra space around the icon first if you expect the thickened shape to approach the canvas edge.
Start with a small radius (1-2px) and increase gradually — large jumps can merge details you meant to keep separate.

Developer Notes

This is genuinely new pixel math (a nearest-opaque-neighbor morphological dilation over the alpha channel), not a re-derivation of an existing tool, since no dilate/thicken operation existed elsewhere in this category; it reuses the shared PixelBuffer helpers (createPixelBuffer/getPixel/setPixel) rather than reimplementing pixel access.

Icon Thickener Use Cases

Making a thin icon set legible at small sizes
Creating a bold variant of an existing icon without redrawing it
Simulating a heavier font-weight look for glyph-style icons

Common Mistakes

Using a radius so large that separate strokes merge into a blob, losing the icon's original detail.
Forgetting the canvas doesn't expand, so a thickened shape near the edge can get visibly clipped.

Tips

Pair with the Icon Space Adder beforehand if you're worried about edge clipping.
Compare a few radius values side by side before settling on the final thickness.

Icon Thickener