Overview
Introduction
This tool centers a PNG icon within a new canvas of any size you choose, entirely in your browser, without scaling the icon's own pixels.
It's a focused, icon-labeled wrapper around the site's general-purpose PNG canvas-size-changer tool, using its center anchor.
What Is Icon Centerer?
A client-side icon centering tool that decodes an uploaded icon's pixel data and places it in the middle of a freshly created canvas at your specified width and height.
Growing the canvas pads the new border area with transparency; shrinking it crops evenly from every side around the icon's center.
How Icon Centerer Works
The tool computes the pixel offset needed to center the icon within the new canvas dimensions (half the difference between the new and original size, rounded down), then copies every source pixel to its offset position, skipping any pixel that falls outside the new canvas bounds when shrinking.
Because it's built on the same center-anchor logic as the general canvas-size-changer tool, growing and shrinking are handled by the exact same offset calculation, just with a positive or negative offset.
When To Use Icon Centerer
Use it to fit an icon onto a standard fixed canvas size (like 512x512 for an app icon requirement), to add even padding around an icon symmetrically, or to crop an oversized icon down to a smaller centered square.
It's especially useful when preparing icon assets for platforms with strict required canvas dimensions.
Often used alongside Icon Border Adder, Icon Border Remover and PNG Dimensions Finder.
Features
Advantages
- Runs entirely client-side; your icon is never uploaded to a server.
- Never scales pixels, so icon sharpness is fully preserved.
- Handles both growing (padding) and shrinking (cropping) with the same simple width/height inputs.
Limitations
- If the size difference between the icon and the new canvas is an odd number of pixels, perfectly even centering isn't possible and the icon sits one pixel off-center (toward the top-left).
- Shrinking the canvas below the icon's size permanently discards the cropped-away pixels; there's no way to recover them afterward.
Examples
Best Practices & Notes
Best Practices
- Check your target platform's exact required icon canvas size before centering, so you only need to run the tool once.
- If cropping, preview the result to confirm no important artwork near the icon's edges got cut off.
Developer Notes
This lib file is a thin wrapper of a thin wrapper: it re-exports centerPng from png-centerer.ts (itself a thin wrap of changePngCanvasSize's 'center' anchor case) under the icon-specific name centerIcon, following the same 'reuse, don't reimplement' pattern used throughout this codebase since an icon is just a PNG once uploaded.
Icon Centerer Use Cases
- Preparing an icon for a platform with a strict required canvas size
- Adding symmetric transparent padding around a tightly-cropped icon
- Cropping an oversized icon down to a centered square or rectangle
Common Mistakes
- Expecting the icon itself to shrink or grow to fit — this tool changes only the canvas size, never the icon's own pixel dimensions.
- Not noticing that shrinking the canvas crops away edge content, which can clip important details on an icon that isn't already centered on transparent padding.
Tips
- Combine with Icon Border Adder afterward to add a visible frame around the newly centered icon.
- Use PNG Dimensions Finder first to check your icon's current size if you're not sure how much padding or cropping a given target size will produce.