Image Size Reducer
PNG outline tool

Add an Outline to PNG

This tool walks the silhouette of whatever sits inside the PNG and draws a colored line along it. The stroke follows the shape of the artwork rather than the rectangle of the file, so a cut-out keeps its contour and the empty space around it stays empty.

  • The line follows the shape, not the file
  • Outline color from a full picker
  • Thickness on a slider
  • Soft edges for smoother contours
  • Transparency kept in the export
Open the outline tool

What Is a PNG Outline Adder

A canvas tool that traces a colored stroke along the contour of the artwork inside a PNG and leaves the inside of the shape untouched.

You load a PNG, choose a color, and the tool finds the boundary between the opaque pixels and the empty ones. It draws the stroke outward from that boundary at a thickness you set, so the line hugs every curve of the silhouette instead of sitting in a rectangle around it. Soft edges rounds the corners of the line where the artwork itself is smooth, and the transparent regions outside the stroke are still transparent when the file is downloaded. The difference between this and a frame is worth being clear about. A frame is drawn around the edge of the canvas: it turns a cut-out into a bordered rectangle. An outline follows what is inside the picture, which is what a sticker needs, what an icon needs when it has to hold up on a dark toolbar, and what a logo needs when it is placed on top of a photograph. When the requirement is to add an outline to PNG artwork rather than to contain it, the line has to follow the shape.

Why Add an Outline to PNG in the Browser

A contour, a color, and a weight: the three things that decide whether a traced line strengthens the artwork or buries it.

Outline color you can specify exactly

Pick a shade visually or type the value from a brand guide. One number reused across a set is what makes a family of cut-outs look deliberate.

Thickness that suits the artwork

The slider runs from a hairline that only adds definition to a heavy band that changes the character of the shape, and the canvas shows which one the drawing can carry.

Soft edges for smooth contours

Rounds off the pixel-level staircase left by tracing a boundary, which matters most on curving shapes and on artwork that was cut out of a photograph.

The line goes outside the shape

The stroke is drawn outward from the silhouette, so nothing inside the artwork is covered and the transparent margin around it stays transparent in the export.

Contour visible while you tune it

The outline redraws as the color and thickness change, which is the only practical way to judge a line whose correct weight depends on how much detail sits inside the shape.

ImageSizeReducer

ImageSizeReducer

@imagesizereducer

The artwork has to read as a sticker

Sticker style is mostly a matter of the edge. The drawing is unchanged, but a bold line around the silhouette plus a little breathing room is the visual grammar that makes a shape look like something die-cut and peelable. Tracing the contour is what produces that grammar on a cut-out file. The line wraps around the drawing rather than boxing it in, so the result reads as a sticker at any size and still sits on a transparent background ready for a sheet.
Outline this PNG
Cut-out drawing with a bold sticker-style line around its contour
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

The icon disappears against a dark toolbar

Interface icons drawn for a pale surface are usually thin, single-tone marks, and on a dark bar that same file loses its edges. The shape is present and the eye struggles to resolve it. A thin stroke in a contrasting shade gives the mark the boundary it lacks. Because the line follows the icon's own contour, a complex glyph gains definition without turning into a blob, and the thickness can stay small enough that the icon still reads as a line drawing rather than a filled shape.
Outline this PNG
Thin icon on a dark bar with a contrasting stroke around it
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

The mark is placed on a photograph and loses its boundary

A logo dropped onto a photograph competes with every texture underneath it. Where the photo is dark the mark holds, and where it is busy the shape dissolves into the detail behind it. A hard traced line separates the two surfaces more decisively than a soft halo would. The line is an edge rather than an atmosphere, which suits marks that need to look printed on top of the picture rather than lit from behind it, and the stroke color can be lifted straight from the surrounding design.
Outline this PNG
Logo traced with a firm line placed over a photograph
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

The line has to be a specific brand color

An outline in an approximate shade looks like a mistake next to the asset it is supposed to match. Brand guides give exact values, and a stroke that is one step off is the first thing a reviewer notices on a printed proof. The picker takes the value rather than asking for a guess, so the line can be the exact accent from a palette. That same number can then be applied to every outline in a set, which is what keeps a family of stickers or icons looking like it came from one place.
Outline this PNG
Color picker open beside a cut-out with a brand-colored stroke
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

The traced edge comes out jagged

A contour is found pixel by pixel, so a curve that looks smooth at full size is a staircase when the outline is drawn along the raw boundary. On a small icon or a shape with long curves, the roughness is the first thing the eye finds. Soft edges rounds that transition instead of leaving the hard match in place. Switching it on costs nothing and fixes the case where the line was placed correctly and only its quality needed smoothing — which is what usually happens when you add an outline to PNG artwork cut out of a photograph rather than drawn as a shape.
Outline this PNG
Zoomed comparison of a jagged contour and a smoothed one
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

A thick line swallows a thin-stroke icon

Thickness is not a setting where more is consistently better. Eight pixels around a solid silhouette is a confident edge; eight pixels around an icon drawn with two-pixel strokes closes the gaps and turns the glyph into a filled lump. The right value depends on how much internal detail the artwork has. Marks with fine strokes generally want the line kept close to the weight of the drawing itself, while solid shapes and bold illustrations can carry something much heavier without losing anything.
Outline this PNG
Thin-stroke icon compared at a light and a heavy outline weight
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

Every sticker in a pack needs the same width

A pack assembled over several sessions drifts. The line is slightly heavier on the later files, slightly lighter on the first, and a sheet of them side by side shows the inconsistency even though each one looks right alone. Holding the color and the thickness fixed while the files change is what keeps a set together. Since the stroke is generated from the artwork rather than drawn by hand, the same two numbers produce a consistent result on every shape in the folder, from a simple circle to a detailed figure.
Outline this PNG
Sheet of stickers sharing one identical outline weight
ImageSizeReducer

ImageSizeReducer

@imagesizereducer

The illustration wants the flat look of print

Editorial illustration often calls for a drawn outline as part of the style itself — the look of ink on paper rather than a photograph of a shape. Drawing those lines by hand for every piece is slow work that also risks inconsistency. Generating the line from the existing artwork gets most of the way there in one pass. Paired with a flat palette it produces the printed feel, and the weight can be raised on the pieces that need to carry the style harder than the rest of the set.
Outline this PNG
Illustration given the flat outlined look of a printed page

How to Use the Outline Tool

Four steps, and the thickness is the one worth checking at the size the image will finally be seen.

Step 1

Load the PNG

Drop the cut-out onto the input canvas. The artwork appears at full size with its transparent regions already showing as empty.

Step 2

Choose the outline color

Open the picker and select a shade, or type a value from a brand guide. The traced line on the output canvas takes the new color immediately.

Step 3

Set the thickness and soften the edge

Move the slider until the line sits well against the artwork, then switch on soft edges if the contour still looks stepped along its curves.

Step 4

Check the edge and download

Confirm the line is not clipped at the canvas boundary, then save the PNG. Dimensions and transparent areas are unchanged.

Who Traces a Line Around a Shape

Four kinds of work where the edge is doing the job, not the drawing.

SD

Sticker designers

artwork that has to read as peel-off rather than printed

A traced line plus a transparent margin is what makes a sheet look die-cut, and keeping one weight across the pack stops the last sticker looking heavier than the first.

SC

Social media creators

cut-outs dropped onto busy photographs

A firm line separates a mark from whatever is behind it, and choosing the stroke color from the surrounding design keeps the composition feeling like one piece of work.

PS

Print shop operators

files that need a visible cut line for the client

Showing the contour as a thin stroke makes it obvious what the die will follow, and the same file can be reused for the finished version by changing the color to match the artwork.

GU

Game UI artists

interface elements that must stay legible over gameplay

A dark stroke around a pale icon keeps it readable against moving backgrounds, which costs one slider move where a dedicated sprite variant would cost a whole asset pipeline.

Frequently Asked Questions

What to check before tracing a line around a cut-out for the first time.

Give that shape a definite edge

Load the PNG, choose the outline color, set the thickness, and download the traced file with its cut-out intact.

Outline this PNG
Raster Line

This stroke is pixels, not a vector path

The outline is generated from the pixels in the file, so it is only as smooth as the artwork it traces and it softens when the result is enlarged. For a mark that has to stay sharp at any size in print, have the line drawn as a vector path in a layout tool instead of tracing it from a bitmap.

Smaller files, same picture.