Create stunning logos online with LogoTweak - the fastest free logo generator. Design professional logos with thousands of icons, custom colors, and instant downloads. No registration required. Make logos online like Canva but simpler and faster.

• Dual Icon Libraries: Choose from Lucide Icons and Tabler Icons
• Extensive Icon Collection: Access thousands of beautiful, customizable icons
• Real-time Preview: See changes instantly as you customize
• Icon Properties:
  • Size adjustment (0-500px)
  • Color customization with color picker
  • Border width control
  • Rotation (0-360°)
  • Fill color and opacity

• Gradient & Solid Colors: Advanced color picker with gradient support
• Shape Control: Adjust border radius (0-300px)
• Padding: Fine-tune spacing around the icon
• Shadow Effects: Choose from 5 shadow levels (XS to XL)
• Color Presets: Quick access to curated color palettes

• Multiple Formats: PNG, JPG, SVG
• Resolution Control: 0.5x to 8x, plus FullRes option
• High-Quality Output: Perfect for web and print use
• Instant Download: No server processing required

• Dark/Light Mode: Automatic theme switching
• Responsive Design: Works perfectly on desktop and mobile
• Intuitive Controls: Tabbed interface for organized customization
• Real-time Feedback: Live preview with hover effects

• Node.js 18+
• npm or yarn

1. Clone the repository

   git clone https://github.com/hellofaizan/TweakLogo.git
   cd logotweak

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

• Icon customization (size, color, border, rotation)
• Background customization (color, gradient, shadow, padding)
• Export as PNG, JPG, SVG
• Dark/Light mode
• Responsive design
• Custom icon upload (SVG)
• Add text overlay (with font options)
• More background patterns (stripes, dots, etc.)
• Save/load logo designs (local storage)
• Fun randomizer button (random logo generator)
• Shareable logo links
• Add more color presets
• Simple animation (spin, bounce, etc.)

This list is for fun and learning! If you have ideas, feel free to open an issue or PR.

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: Radix UI
• Icons: Lucide React & Tabler Icons
• Color Picker: react-best-gradient-color-picker
• Export: html-to-image

logotweak/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── layout.tsx      # Root layout with theme provider
│   │   ├── page.tsx        # Main application page
│   │   └── globals.css     # Global styles
│   ├── components/         # React components
│   │   ├── LogoPreview.tsx # Live logo preview component
│   │   ├── IconControls.tsx # Icon customization controls
│   │   ├── BackgroundControls.tsx # Background customization
│   │   ├── ModeToggle.tsx  # Theme toggle component
│   │   └── ui/            # Reusable UI components
│   ├── hooks/             # Custom React hooks
│   └── lib/               # Utility functions
├── public/                # Static assets
│   └── logos/            # Example logos
└── package.json          # Dependencies and scripts

1. Choose an Icon

   • Click the icon selector to browse thousands of icons
   • Switch between Lucide and Tabler icon libraries
   • Use the search function to find specific icons

2. Customize the Icon

   • Adjust size, color, and border width
   • Rotate the icon to your desired angle
   • Set fill color and opacity for filled effects

3. Style the Background

   • Choose between solid colors and gradients
   • Adjust border radius for different shapes
   • Set padding and shadow effects
   • Use preset color combinations

4. Export Your Logo

   • Select your preferred format (PNG, JPG, SVG)
   • Choose the resolution for your needs
   • Click download to save your logo

• For Web Use: Use PNG format with 1x or 2x resolution
• For Print: Use PNG or SVG with higher resolutions
• For Scalability: SVG format is best for logos that need to scale
• Color Harmony: Use the preset color combinations for professional results

We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Pull requests and ideas are welcome! For major changes, please open an issue first to discuss what you would like to change.

• Lucide Icons for the beautiful icon library
• Tabler Icons for additional icon options
• Radix UI for accessible UI components
• Tailwind CSS for the utility-first CSS framework

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the existing issues for solutions
• Join our community discussions

Made with ❤️ by Mohammad Faizan