How to extract icons from a UI screenshot
A full interface often contains only a few icons, illustrations, and graphical controls that developers actually need. With a quick review, asset handoff becomes a short, repeatable process.
Start with a screenshot that suits detection
Slice Master works best on UI screenshots where icons, illustrations, and control graphics have clear boundaries. Upload the original-resolution image and keep enough space around each icon so the tool can separate assets from text, dividers, and background.
Detection, transparency processing, and export run in the current browser. Refreshing or closing the page does not save the image to Slice Master servers.
Four steps to a clean handoff
- Upload the UI screenshot. Drop a PNG, JPG, or WebP into the workspace.
- Review the detected elements. The tool looks for icons and illustrations first; text filtering and detection settings reduce false positives.
- Adjust the crop boxes. Click a slice to select it, drag the box to move it, resize from its edges or corners, or enter an exact width and height.
- Export selected assets. Download one asset for quick use, or export multiple items as a ZIP for a developer handoff.
Why review matters
Automatic detection finds candidates; human review makes their boundaries useful in production. When an icon sits beside text, backgrounds vary, or elements overlap, remove false positives and add a crop box manually. The resulting PNGs have cleaner transparent edges and are easier to place in a page.
Keep a set of icons consistent
Navigation icons, feature entries, and state graphics often need a shared export canvas. Select one slice, enter its exact dimensions, and save them as the default size for subsequent crops. You can also apply the current size to selected slices when standardising an existing set.
Start extracting UI assets
No account is needed. Open the tool and slice locally in your browser.