How does the tool know what's 'inside' the outline?

It runs a flood fill starting from every transparent pixel that touches the canvas border, spreading across connected transparent pixels. Anything that flood fill never reaches is an enclosed hole — like the inside of an outlined circle or letter — and gets filled.

What if my icon's outline isn't fully closed?

If there's a gap in the outline that connects the 'inside' to the canvas border, the flood fill will spread through it, and that region won't be treated as enclosed — it stays transparent along with the rest of the background. Close any gaps in the source outline first for a clean fill.

Can I choose the fill color?

Yes, any RGB color; it's applied at full opacity to every enclosed region found, while the original outline stroke pixels are left completely untouched.

What happens to a fully transparent icon?

Nothing gets filled, since every transparent pixel is connected to the border and none of them count as an enclosed hole.

Outlined Icon to Filled Icon Converter - Fill In Hollow Icons Online

Overview

Introduction

This tool fills in the enclosed interior of an outlined, hollow icon, entirely in your browser, using a flood-fill connectivity search.

It's a genuinely new pixel operation for this site's icon tools — a bucket-fill algorithm distinct from every other icon tool in this batch.

What Is Outlined Icon to Filled Icon Converter?

A client-side icon-filling tool that reads an uploaded icon's pixel data and identifies which transparent regions are enclosed by opaque stroke pixels versus which are part of the open background.

Enclosed regions get filled solid with a chosen color, converting a line-art 'outline' style icon into a 'filled' or 'solid' style icon.

How Outlined Icon to Filled Icon Converter Works

Starting from every transparent pixel on the canvas's outer border, a breadth-first search spreads across 4-connected transparent neighbors, marking every pixel reachable from the outside as background.

After the search completes, any transparent pixel that was never marked is, by definition, cut off from the outside by opaque pixels — an enclosed hole — and gets filled with the chosen color at full opacity.

When To Use Outlined Icon to Filled Icon Converter

Use it to generate a matching 'filled' variant of an icon set that currently only has 'outlined' style icons, a common requirement for icon design systems that ship both styles.

It's also useful for quickly previewing how an outline icon would look as a solid silhouette.

Often used alongside Filled Icon to Outlined Icon Converter and Icon Outline Adder.

Features

Advantages

Runs entirely client-side; the uploaded icon is never sent to a server.
Correctly distinguishes enclosed holes from open background using real connectivity analysis, not just a bounding box.
Leaves the original outline stroke pixels completely untouched.

Limitations

An outline with a gap connecting its interior to the background won't be treated as enclosed, since the flood fill can leak through the gap.
Anti-aliased or partially-transparent outline pixels (alpha between 1 and 254) aren't treated as fully transparent, so they don't participate in the flood fill and won't block or allow a leak the way a fully opaque or fully transparent pixel would.

Examples

Fill an outlined circle icon

Input

A ring-shaped icon (opaque circle outline, transparent center and background)

Output

A solid filled circle, with the enclosed center filled and the outer background left transparent

The flood fill from the border reaches the outer background but never the enclosed center, so only the center gets filled.

Attempt to fill an icon with a broken outline

Input

An outline icon with a small gap connecting inside to outside

Output

The interior stays transparent, since the flood fill leaks through the gap

Because the 'inside' and 'outside' are connected through the gap, the algorithm correctly treats them as one continuous background region.

Best Practices & Notes

Best Practices

Check the source outline for any gaps before converting, since even a 1-pixel break will prevent that region from filling.
Pick a fill color that matches your design system's 'filled' icon style for a consistent look.

Developer Notes

This is genuinely new pixel math (a border-seeded breadth-first flood fill over the alpha channel to distinguish enclosed holes from open background), not a re-derivation of an existing tool, since no flood-fill operation existed elsewhere in this category; it reuses the shared `pixelIndex`/`clonePixelBuffer` helpers rather than reimplementing pixel indexing.

Outlined Icon to Filled Icon Converter Use Cases

Generating a filled icon variant to match an existing outlined set
Quickly previewing a solid silhouette version of a line-art icon
Batch-converting a whole outline icon library to filled style

Common Mistakes

Assuming any outline icon will fill correctly without checking for gaps in the stroke first.
Expecting semi-transparent anti-aliased pixels along the outline's edge to be treated the same as fully transparent pixels — only alpha-0 pixels participate in the flood fill.

Tips

Zoom into the source outline first to check for accidental gaps before converting.
Use the Filled Icon to Outlined Icon Converter afterward if you want to go back the other direction.

Outlined Icon to Filled Icon Converter