Why Do Same-Size PNG Icons Look Different Sizes?

Equal export settings do not necessarily produce equal-looking icons. The file canvas, the visible artwork and the space a UI reserves for the image are three different things. Decide which one must match before changing the source or stretching the PNG.

A 128px base size is not always a 128 × 128 canvas

In our September 7, 2026 export test, six icons used the same settings: PNG, base size 128px, 1x scale and 10% padding. Their longest edges match, but their aspect ratios do not. These dimensions come from the actual export records:

Preserving aspect ratio keeps the mail icon wide and the document icon tall. Treating the base size as a promise of square output would misread these settings. Inspect the dimensions in the export preview or file properties, rather than relying on the size label alone.

You can verify the table against the recorded test data and download the fixed demonstration ZIP. Its source is our original six-icon geometric sheet; it is not customer artwork.

Transparent pixels count toward file size

Even two 128 × 128 PNGs can contain different-sized artwork. Compare these actual exports of the same ring. Each file is 128 × 128px; only the padding setting changes.

The border shows the file boundary. More padding leaves less room for the ring inside it. Making every file square would not, by itself, make every visible shape equally large.

Check the source too. One icon may already have extra transparent margins. Before comparing artwork sizes, inspect both the original margins and the padding added at export.

For a web UI, reserve a consistent box without stretching

If the requirement is a tidy toolbar or grid, a fixed layout box may be all you need. This CSS fits each complete image inside a 64px square while preserving its proportions:

.icon-frame {
  width: 64px;
  height: 64px;
}
.icon-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="icon-frame">
  <img src="mail.png" alt="Mail">
</div>

The example above uses that CSS on the extracted source PNGs. It changes their display boxes, not the downloaded files. MDN documents how object-fit behaves: contain preserves the complete image, while cover can clip it and fill can distort its proportions.

CSS fits the whole image, including transparent margins. It cannot automatically make a thin ring look as heavy as a filled document. After normalizing margins and layout boxes, review the set at its intended display size and make small per-icon optical adjustments when needed.

Name the requirement before exporting

• Same layout footprint: use a consistent UI box and preserve the image aspect ratio.
• Same file dimensions: use an explicit fixed canvas or artboard setting and confirm the resulting width and height. A longest-edge setting alone is not sufficient.
• Same visible artwork size: compare non-transparent bounds and padding before adjusting scale.
• Same perceived weight: review strokes, filled areas and optical balance. Equal pixel dimensions are only a starting point.

For the exact export workflow, see the batch ZIP and padding example. For density variants, see 1x, 2x and 3x exports. Enlarging a raster image does not restore detail that was absent from the source.