What coordinates does the crop use?

X and Y define the top-left corner of the crop rectangle in pixels from the icon's top-left corner, and width/height define the rectangle's size; all four values must be whole numbers.

What happens if my crop rectangle goes outside the icon?

The tool rejects it with an error — the crop rectangle (x, y, x+width, y+height) must lie entirely within the source icon's bounds, so double-check your coordinates against the icon's dimensions first.

Does cropping affect image quality?

No. Cropping is a direct pixel copy of the requested rectangle with no resampling, so the cropped region's pixels are identical to the corresponding pixels in the source.

Can I crop out a single icon from a sprite sheet?

Yes — this is a common use case. Set x/y/width/height to the exact grid cell of the icon you want to extract from a larger sprite sheet image.

Icon Cropper - Crop a Rectangular Region from a PNG Icon

Overview

Introduction

This tool crops a rectangular region out of an icon PNG by exact pixel coordinates, entirely in your browser using the HTML canvas API.

It's a precise way to trim an icon down to just its glyph, or to pull a single icon out of a larger sprite sheet.

What Is Icon Cropper?

A client-side icon cropper that reads an uploaded icon's pixel data and copies out the rectangle you specify by its top-left (x, y) corner and its width and height.

The output PNG's dimensions exactly match the width and height you requested.

How Icon Cropper Works

The tool validates that x, y, width, and height are whole numbers, that width and height are at least 1 pixel, and that the requested rectangle lies entirely within the source icon's bounds.

It then copies each pixel from the corresponding position in the source image into a new, smaller pixel buffer at the requested size.

When To Use Icon Cropper

Use it to trim excess transparent or blank space around an icon's glyph, or to pull one icon out of a grid-based sprite sheet.

It's also useful for isolating a specific detail from a larger icon or graphic for closer inspection or reuse.

Often used alongside Icon Resizer and Icon Edges Cleaner.

Features

Advantages

Runs entirely client-side; the uploaded icon is never sent to a server.
Exact pixel-coordinate control, with clear validation errors if the requested rectangle doesn't fit.
Direct pixel copy with no resampling, so the cropped region's quality exactly matches the source.

Limitations

Coordinates must be entered manually as numbers — there's no interactive drag-to-select crop handle in this tool.
The crop rectangle must lie entirely within the source image; partial or out-of-bounds crops are rejected rather than clamped.

Examples

Trim a padded icon

Input

A 128x128 icon PNG with the glyph centered in a 96x96 area, x=16 y=16 width=96 height=96

Output

A 96x96 PNG containing just the glyph with the padding removed

The crop rectangle exactly matches the glyph's bounding box, trimming the transparent padding around it.

Extract from a sprite sheet

Input

A 256x256 sprite sheet arranged as a 4x4 grid of 64x64 icons, x=64 y=0 width=64 height=64

Output

A 64x64 PNG containing just the second icon in the top row

Grid coordinates map directly to x/y/width/height for extracting one cell from a sprite sheet.

Best Practices & Notes

Best Practices

Check the source icon's exact dimensions first (with the PNG Dimensions Finder tool, for example) before entering crop coordinates.
Preview the result before downloading to confirm the crop rectangle captured the intended region.

Developer Notes

The pure crop logic is reused as-is from the base PNG Cropper's cropPng function (a plain function over a Uint8ClampedArray pixel buffer, no DOM); this tool is a thin, subject-relabeled wrapper (cropIcon) around that same lib function, since cropping an icon is identical pixel math to cropping any other PNG.

Icon Cropper Use Cases

Trimming transparent padding around an icon's glyph
Extracting one icon from a sprite sheet grid
Isolating a detail from a larger graphic for reuse

Common Mistakes

Entering a crop rectangle that extends past the icon's edge, which is rejected rather than silently clamped.
Forgetting that x/y/width/height must all be whole numbers — fractional pixel coordinates aren't valid.

Tips

Use the PNG Dimensions Finder tool first to confirm the source icon's exact width and height.
For sprite sheets, multiply the grid column/row index by the cell size to get x and y quickly.

Icon Cropper