Overview
Introduction
This tool adds empty space around an icon's edges, entirely in your browser, expanding the canvas without touching the icon's own pixels.
It's the same padding operation used by the site's general PNG space adder, applied here to icon-sized assets.
What Is Icon Space Adder?
A client-side icon padding tool that reads an uploaded icon's pixel data, creates a larger canvas sized to fit the original icon plus an equal margin on every side, and copies the icon's pixels unchanged into the center.
The new margin defaults to fully transparent but can be set to any solid RGBA color.
How Icon Space Adder Works
The tool computes new output dimensions equal to the icon's width and height plus twice the requested space value, fills the entire new canvas with the margin color, then copies every original pixel to its same relative position, offset by the padding amount.
Because the fill happens first and the original icon is copied on top, the icon's own transparency and colors are always preserved exactly.
When To Use Icon Space Adder
Use it before submitting an icon to a platform (app store, favicon generator, design system) that expects a specific safe margin around the glyph.
It's also useful for giving a tightly-cropped icon some visual breathing room before placing it in a layout.
Often used alongside Icon Space Remover and Square Icon Creator.
Features
Advantages
- Runs entirely client-side; the uploaded icon is never sent to a server.
- Adds space symmetrically without altering the icon's own pixels.
- Supports both transparent and solid-color margins.
Limitations
- Space is always added equally on all four sides; asymmetric padding requires a follow-up crop or a different tool.
- The output can't exceed the site's maximum PNG dimension, so very large icons with large padding requests may need a smaller margin.
Examples
Best Practices & Notes
Best Practices
- Check your target platform's icon guidelines for the exact safe-margin percentage before choosing a space value.
- Use a transparent margin unless you specifically need a solid-color border, since transparent margins adapt to any background.
Developer Notes
The pure padding math lives in a lib function that thinly re-exports the shared canvas-expansion function (also used by the general-purpose PNG space adder) under this icon-specific name, since an icon is just a PNG once uploaded and the underlying operation is identical.
Icon Space Adder Use Cases
- Adding a platform-required safe margin before submitting an app icon
- Giving a tightly-cropped icon breathing room in a layout
- Preparing consistent canvas sizes across a set of icons with different content sizes
Common Mistakes
- Adding padding and then expecting the icon to still fill the entire canvas — downstream code needs to account for the larger dimensions.
- Using a solid-color margin when the icon will be placed on varying background colors, which can create a visible box around it.
Tips
- Pair with the Icon Space Remover to first trim any existing margin before adding a precise, known amount back.
- If you need a perfectly square result regardless of the icon's aspect ratio, use the Square Icon Creator instead.