App Image Kit — User Documentation
Step-by-step instructions for uploading images, editing on the canvas, choosing an export platform, and unpacking the ZIP into your Android, iOS, Flutter, or React Native project.
Quick start
- Open the tool and upload one or more images (PNG, JPEG, SVG, or WebP).
- Select an image in the sidebar, then use the Editor tab to position and scale it on the canvas.
- Use the Adjust tab for background colour, filters, and canvas dimensions.
- Check the images you want in the ZIP, click Export, pick a platform and densities, then download.
1. Upload and manage images
On desktop, drag files onto the upload area or click to browse. On mobile, open the Images tab first, then tap the upload control. Each file appears as a thumbnail in the sidebar.
- Select for export — use the checkbox on each thumbnail; the master checkbox selects all.
- Active image — click a thumbnail to edit that image on the canvas.
- Clear All — removes every image from the session (does not delete files on disk).
Tip: start from your highest-resolution source (e.g. xxxhdpi or @3x). The tool scales down for smaller densities. See What is DPI?.
2. Canvas and adjustments
The canvas size defines your 1× / mdpi baseline. All exported variants are multiples of this size.
- Drag the image to set offset; pinch or use controls to scale.
- Set a solid or transparent background — useful for icons on coloured launcher tiles.
- Filters: grayscale, sepia, invert, brightness, contrast, blur (applied before export render).
3. Export dialog
Click Export when at least one image is selected. Choose a platform and which density scales to include. The ZIP filename reflects the platform (e.g. android-export.zip).
Each image in the batch is rendered at every selected scale, then packed into one archive.
4. ZIP folder layouts
Paths inside the ZIP match what App Image Kit generates in useExport.ts. Copy folders into your project as shown below.
Android
Merge drawable-* folders into app/src/main/res/. File name = image name in the sidebar.
drawable-mdpi/icon.png drawable-hdpi/icon.png drawable-xhdpi/icon.png drawable-xxhdpi/icon.png drawable-xxxhdpi/icon.png
Android Nine-Patch
Same folder structure; files use the .9.png extension. Configure stretch regions in the export dialog.
drawable-mdpi/panel.9.png drawable-xhdpi/panel.9.png drawable-xxxhdpi/panel.9.png
iOS
Place files in Assets.xcassets or your bundle; @2x and @3x suffixes map to scale factors.
icon.png [email protected] [email protected] [email protected] [email protected]
Flutter
Copy under assets/images/ and declare in pubspec.yaml.
assets/images/logo.png assets/images/1.5x/logo.png assets/images/2.0x/logo.png assets/images/3.0x/logo.png assets/images/4.0x/logo.png
React Native
Place next to your JS bundle; Metro resolves @1.5x, @2x, @3x at build time.
icon.png [email protected] [email protected] [email protected]
5. Platform-specific notes
Android
Use mdpi as 1× baseline. Launcher icons often belong in mipmap-*; general bitmaps go in drawable-*.
Read the full guide →Nine-Patch
Draw stretch zones on the preview before export. Black pixels on the 1px border mark stretchable and padding areas.
Read the full guide →iOS
Modern iPhones need @2x and @3x. Xcode can generate smaller sizes from a single 1024px master for app icons.
Read the full guide →6. Troubleshooting
Export button is disabled
Select at least one image using the checkbox on its thumbnail. On mobile, switch to the Images tab to check boxes.
Output looks blurry on device
Your canvas may be too small for the target density. Increase canvas size or import a higher-resolution source image.
SVG import looks wrong
Complex SVGs are rasterised at import. Flatten intricate vectors in your design tool first, or export PNG from Figma/Sketch.
ZIP paths do not match my project
Rename files in the sidebar before export — the filename (without extension) becomes the asset name in the ZIP.
Browser tab freezes on large batches
Export fewer images at a time, or reduce selected density count. All rendering is CPU-bound in the browser.