Overview
Introduction
This tool reduces a solid, filled icon down to just its boundary outline, entirely in your browser, by keeping only the pixels that sit on the edge of the shape.
It's the direct inverse of the Outlined Icon to Filled Icon Converter, and reuses the same boundary-detection idea the site's Icon Outline Finder uses to count edge pixels, but builds a new image from it instead of just reporting a number.
What Is Filled Icon to Outlined Icon Converter?
A client-side icon-hollowing tool that reads an uploaded icon's pixel data and tests every opaque pixel to see whether it borders a transparent pixel or the canvas edge.
Pixels that pass the test — the shape's true boundary — are kept exactly as they were; every interior pixel is cleared to fully transparent.
How Filled Icon to Outlined Icon Converter Works
For each opaque pixel, the tool checks its four direct neighbors (up, down, left, right); if any neighbor is transparent, or the pixel itself sits on the canvas edge, it's classified as a boundary pixel.
Boundary pixels are copied to the output unchanged; every other opaque pixel is left at its default fully-transparent value in the freshly-created output buffer.
When To Use Filled Icon to Outlined Icon Converter
Use it to generate a matching 'outlined' variant of an icon set that currently only has 'filled' style icons, a common requirement for icon design systems that ship both styles.
It's also useful for creating a lighter-weight, line-art version of a heavy solid icon.
Often used alongside Outlined Icon to Filled Icon Converter and Icon Outline Adder.
Features
Advantages
- Runs entirely client-side; the uploaded icon is never sent to a server.
- Produces a clean, exactly one-pixel-wide boundary with no extra processing.
- Preserves the original boundary pixels' exact color and alpha.
Limitations
- The resulting outline is always exactly 1 pixel wide; use the Icon Thickener afterward if you need a bolder line.
- Multi-color filled icons produce a multi-color outline that follows each region's own boundary, which may look different from a hand-drawn single-color outline icon.
Examples
Best Practices & Notes
Best Practices
- Follow up with the Icon Thickener if a 1px outline reads too thin for your target display size.
- Use on single, clearly-defined shapes for the cleanest boundary — very noisy or speckled icons can produce a fragmented-looking outline.
Developer Notes
This is genuinely new pixel math (building a new image from a per-pixel boundary test) rather than a thin re-export, though it reuses the same 4-connected boundary logic the shipped `findPngOutline` tool uses to count boundary pixels; that existing tool only reports a count, so this one adapts the same test to produce a real output image instead.
Filled Icon to Outlined Icon Converter Use Cases
- Generating an outlined icon variant to match an existing filled set
- Creating a lightweight line-art version of a heavy solid logo
- Visualizing exactly which pixels form a shape's true edge
Common Mistakes
- Expecting a smooth, anti-aliased outline — the boundary test is a hard per-pixel check, so the result has the same crispness as the source's own edges.
- Running this on an already-outlined icon, which can erode a thin outline down to almost nothing since most of its pixels already touch transparency.
Tips
- If the result looks too thin, thicken it afterward with the Icon Thickener.
- Use the Outlined Icon to Filled Icon Converter to reverse the process if you need the solid version back.