Instant Icon

A web app for designing and exporting Progressive Web App (PWA) icon sets. Design your icon in the browser, then download a ZIP with every standard size, splash screens, manifest.json, and ready-to-paste HTML meta tags. Built with Next.js 15, TypeScript, and Tailwind CSS v4.

Features

• Foreground sources: Lucide icon library, a curated icon set, custom text/typography, or upload your own SVG.
• Backgrounds: solid color, linear/radial/conic gradients, repeating patterns (dots, grid, stripes, etc.), and grain/noise texture.
• Live preview modes: hero grid of all sizes, iPhone home-screen mockup, Safari browser mockup, and full export-size grid.
• Projects: save, duplicate, delete, and switch between multiple designs (persisted to localStorage). Uploaded SVGs persist in IndexedDB.
• Import / Export .icon files: round-trip a whole project (including uploaded assets) as JSON.
• Undo / Redo: per-project history with keyboard shortcuts.
• Complete PWA export: all standard icon sizes (16×16 → 1024×1024), Apple touch + splash screens, maskable icons, manifest.json, and HTML meta tags — bundled as a ZIP.

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone https://github.com/zlatanpham/mvp-icon-generator.git
cd mvp-icon-generator

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm dev

4. Open http://localhost:4004 in your browser

Usage

1. Select an Icon: Browse or search for an icon from the library
2. Customize:
   • Adjust background and icon colors using the color pickers
   • Set border radius with the slider (0% for square, 50% for circle)
   • Control icon size relative to the background
3. Preview: See real-time updates in multiple sizes
4. Download: Click "Download" to get a ZIP file with all icon sizes

Generated Files

The download package includes:

• Icons: All standard PWA icon sizes from 16x16 to 1024x1024
• favicon.ico: Multi-resolution favicon
• manifest.json: Pre-configured web app manifest
• html-meta-tags.txt: Ready-to-use HTML meta tags
• README.txt: Installation instructions

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Icons: Lucide React
• Testing: Vitest

Development

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm test - Run tests
• pnpm add:ui - Add new shadcn/ui components

Project Structure

src/
├── app/                       # Next.js App Router pages
│   ├── layout.tsx             # Root layout
│   ├── page.tsx               # Studio (wraps providers)
│   └── globals.css            # Tailwind v4 theme + tokens
├── components/
│   ├── studio/                # Studio shell (topbar, sidebar, canvas, properties, overlays)
│   ├── upload/                # Custom-SVG upload UI
│   ├── ui/                    # shadcn/ui primitives
│   ├── copy-button.tsx
│   └── icon-renderer.tsx
└── lib/
    ├── utils.ts               # cn() classname merger
    ├── icon-generator.ts      # JSZip export pipeline
    ├── svg-processor.ts       # SVG sanitization (DOMPurify)
    ├── svg-storage.ts         # IndexedDB for uploaded SVGs
    └── studio/
        ├── projects.ts        # ProjectsProvider (localStorage)
        ├── design.ts          # DesignProvider (undo/redo)
        ├── history.ts         # Undo/redo helpers
        ├── projects-io.ts     # .icon import/export
        ├── canvas-painter.ts  # Browser-canvas rendering
        ├── export.ts          # ZIP download trigger
        ├── data/              # Fonts, gradients, icons, patterns, swatches
        └── render/            # CSS + SVG generators (backgrounds, grain, patterns)

See AGENT.md for architecture notes targeted at AI coding agents.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

Made with ❤️ by Zlatan Pham

License

This project is open source and available under the MIT License.