MVP Icon Generator

A modern, intuitive web application for generating Progressive Web Application (MVP) icons with customizable colors, sizes, and styles. Built with Next.js 15, TypeScript, and Tailwind CSS.

Features

• Icon Library: Browse and search through 1000+ icons from Lucide
• Real-time Preview: See your icon changes instantly with multiple size variations
• Customization Options:
  • Background color with color picker
  • Icon color with color picker
  • Border radius adjustment (0-50%)
  • Icon size control (30-90%)
• Complete MVP Package: Generates all required icon sizes and formats:
  • Favicons (16x16, 32x32, favicon.ico)
  • Apple Touch Icon (180x180)
  • Android Chrome icons (192x192, 512x512)
  • MVP icons (48x48 to 1024x1024)
  • Maskable icons for Android
  • manifest.json file
  • HTML meta tags
• One-click Download: Get all icons in a convenient ZIP file

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:3000 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 MVP 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
├── components/       # React components
│   └── ui/          # shadcn/ui components
├── lib/             # Utility functions
│   ├── utils.ts     # Helper functions
│   └── icon-generator.ts  # Icon generation logic

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.