Does adding a border crop or scale my icon?

No. The canvas expands by the border thickness on every side, so the original icon pixels are preserved at full size and simply surrounded by the new border.

Can I make a transparent or semi-transparent border?

Yes. Set the alpha channel input below 255 (0 is fully transparent, 255 is fully opaque) to get a semi-transparent or invisible border.

What units is the border thickness in?

Pixels. A thickness of 10 adds a 10-pixel-wide border on the left, right, top, and bottom, so the output canvas grows by 20 pixels in both width and height.

Can I use a border thicker than the icon itself?

Yes, there's no upper relationship between border thickness and icon size, only the final output must stay within the 4096-pixel maximum canvas dimension.

Icon Border Adder - Add a Solid Border to a PNG Icon

Overview

Introduction

This tool adds a solid-color border around a PNG icon entirely in your browser, expanding the canvas so the original artwork is never cropped or scaled down to make room.

It's a focused, icon-labeled wrapper around the site's general-purpose PNG border tool.

What Is Icon Border Adder?

A client-side icon border generator that decodes an uploaded icon's pixel data, builds a new larger canvas filled with your chosen border color, and pastes the original icon centered inside it.

You control the border thickness in pixels and the border color's red, green, blue, and alpha channels independently.

How Icon Border Adder Works

The tool first fills an output canvas — sized to the icon's dimensions plus twice the border thickness — entirely with the chosen border color, then copies every pixel of the original icon into the middle of that canvas, offset by the border thickness on each axis.

Because the border is painted first and the icon copied on top, semi-transparent icon pixels correctly show the border color showing through at their edges.

When To Use Icon Border Adder

Use it to give a flat icon a visible frame before placing it on a busy background, to create a simple app-icon-style badge, or to add consistent padding-plus-color around a batch of icons.

It's also useful for quickly mocking up how an icon would look with a colored outline in a design system.

Often used alongside Icon Border Remover, Icon Centerer and PNG Rotator.

Features

Advantages

Runs entirely client-side; your icon is never uploaded to a server.
Never crops the original icon, since the canvas grows to fit the border.
Full control over border color including transparency, not just a fixed color.

Limitations

The border is always a uniform rectangle around the icon; it doesn't trace an irregular or rounded icon shape.
Very thick borders on an already-large icon can push the output past the 4096-pixel maximum canvas dimension, which the tool will reject with an error.

Examples

Add a thin black border to a 64x64 icon

Input

64x64 PNG icon, thickness 4, color black (0,0,0,255)

Output

A 72x72 PNG with a solid 4px black border on every edge

The canvas grows by 4 pixels on each of the 4 edges (8 total per axis).

Add a semi-transparent white border

Input

32x32 PNG icon, thickness 2, color white with alpha 128

Output

A 36x36 PNG with a soft, half-opaque white frame

Setting alpha below 255 produces a translucent border rather than a solid one.

Best Practices & Notes

Best Practices

Pick a border color that contrasts with both the icon and its eventual background so the frame stays visible.
Keep border thickness proportional to icon size — a 1-2px border tends to disappear on large icons, while a thick border can overwhelm a small one.

Developer Notes

This lib file is a thin wrapper: it re-exports the pure addBorderToPng function from png-border-adder.ts (the shipped 'PNG Border Adder' tool) under the icon-specific name addIconBorder, since an icon is just a PNG once uploaded and the border-compositing math doesn't need to be re-derived for a different subject noun.

Icon Border Adder Use Cases

Adding a visible frame to a transparent-background app icon
Creating consistent padding-plus-border around a set of toolbar icons
Mocking up a badge or sticker style around a logo mark

Common Mistakes

Forgetting that the output canvas is larger than the input — downstream code expecting the original dimensions needs updating.
Setting alpha to 0 and being confused that no visible border appears; that's fully transparent by design.

Tips

Use the Icon Border Remover tool afterward if you need to undo a border you added here.
Combine with Icon Centerer to place a bordered icon onto a larger fixed-size canvas.

Icon Border Adder