leandro32x/app-icon-generator-public

App icon generator

Summary

App Icon Generator is a browser-based design tool that builds app icons and exports the platform-specific asset bundles an iOS or Android project expects. Built in TypeScript with React 19 and Vite 6, it provides controls for composing the foreground, tuning the background, and packaging the result for native iOS and Android projects.

What it is useful for

Producing a complete icon asset bundle without leaving a browser tab. Engineers can pick a foreground from Iconify's catalog (with style switching for families like Phosphor, Solar, Material Symbols, Fluent UI, and Heroicons), drop in a transparent PNG or SVG, or set a letter or monogram using any of the 2,100+ open-source fonts in Fontsource. Background and icon colors support solid fills and multi-stop gradients, with padding, corner radius, drop shadow, cast shadow, and a "score overlay" effect available. The tool also exposes direct manipulation: drag to move the foreground, arrow keys to nudge, double-click to recenter, with undo/redo on every change. Sessions can be saved and restored in the browser, so a work-in-progress design survives a reload.

For handoff, it generates iOS ZIPs containing AppIcon.appiconset/ with Contents.json for Xcode 14 or newer — including iOS 18 dark and tinted appearances when enabled — plus legacy-sizes/ with every explicit iPhone and iPad size. Android ZIPs include play_store_512.png, adaptive icon XML, background, foreground, monochrome, and legacy density launcher icons. Every exported ZIP carries an ATTRIBUTION.md resolving license metadata from Iconify and Fontsource for the selected icon and font.

How engineers can use it

Clone the repo, install dependencies, and start the dev server:

npm install
npm run dev

To produce a static site that can be hosted anywhere, run npm run build; the README notes the build emits to build/.

A practical workflow: sketch variants with the shuffle button, lock in one you like, then download the iOS or Android ZIP. For iOS, add AppIcon.appiconset/ to your Xcode project's asset catalog (compatible with Xcode 14 or newer). For Android, wire the adaptive icon XML and layer files into your app module's resources. If your design uses a brand or product logo pack, double-check trademark rights before shipping — the README explicitly flags that brand restrictions sit outside the icon pack license. Uploaded artwork likewise needs to be rights-cleared; the tool surfaces this reminder on export. If anything in the workflow is unclear beyond the commands above, the README's Usage section walks through each step.