Logo Maker 🎨

A modern React-based Logo Maker that allows users to create customized logos using icons and a collection of editing controls.

Choose an icon, customize its appearance, adjust the background and border, modify its position, and preview the result in real time. The project is designed as a simple and interactive browser-based tool for creating custom icon-based logos.

🚀 Live Demo

👉 Explore Logo Maker

📸 Screenshots

Choose an Icon and Edit	Background Edit
Border Edit	Logo Created by "LogoMaker"

✨ Features

• 🎨 Create custom logos using icons
• 🔍 Browse and select available icons
• 🖼️ Real-time logo preview
• 🎯 Customize icon appearance
• 🌈 Customize background colors
• 🎨 Support gradient color selection
• 🖌️ Customize logo borders
• 📐 Adjust border properties
• ↔️ Move and position logo elements
• 🎛️ Interactive editing controls
• 🧩 Reusable React components
• 📱 Responsive user interface
• 💾 Generate logo images from the preview
• 🖼️ Export/render the logo using html2canvas
• 🧭 Client-side routing with React Router
• ⚡ Fast development experience with Vite

The source code is organized around dedicated components such as BackgroundControl, BorderControl, IconControl, IconListModal, LogoPreview, MovementControl, Navbar, Sidebar, and Slider.

🛠️ Tech Stack

Frontend

• React 18 — UI development
• JavaScript (ES6+) — Application logic
• Vite — Development server and build tool
• Tailwind CSS 3 — Utility-first styling
• React Router DOM — Client-side routing

UI & Utilities

• Lucide React — Icons and UI iconography
• React Best Gradient Color Picker — Gradient/color customization
• html2canvas — Converting the logo preview into an image

These dependencies are defined in the project's package.json.

📦 Dependencies

Production Dependencies

{
  "html2canvas": "^1.4.1",
  "lucide-react": "^0.381.0",
  "react": "^18.2.0",
  "react-best-gradient-color-picker": "^3.0.7",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.23.1"
}

Development Dependencies

{
  "@types/react": "^18.2.66",
  "@types/react-dom": "^18.2.22",
  "@vitejs/plugin-react": "^4.2.1",
  "autoprefixer": "^10.4.19",
  "eslint": "^8.57.0",
  "eslint-plugin-react": "^7.34.1",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.6",
  "postcss": "^8.4.38",
  "prettier": "^3.2.5",
  "prettier-plugin-tailwindcss": "^0.5.14",
  "tailwindcss": "^3.4.3",
  "vite": "^5.2.0"
}

📋 Prerequisites

Before running the project locally, make sure you have:

• Node.js — LTS version recommended
• npm — Comes with Node.js
• Git
• A modern web browser

Check your installed versions:

node --version
npm --version
git --version

⚙️ Installation

1. Clone the repository

git clone https://github.com/NazmulHossain2905/react-logo-maker.git

2. Navigate to the project

cd react-logo-maker

3. Install dependencies

npm install

4. Start the development server

npm run dev

Vite will provide a local development URL, typically:

http://localhost:5173/

Open the URL in your browser to start using the Logo Maker.

🏗️ Production Build

To create a production-ready build:

npm run build

To preview the production build locally:

npm run preview

The project provides the following npm scripts:

Command	Description
npm run dev	Start the Vite development server
npm run build	Create a production build
npm run lint	Run ESLint
npm run preview	Preview the production build

🔐 Environment Variables

No environment variables are currently required to run this project.

The repository does not currently require an API key, database connection, or external backend configuration.

Therefore, you do not need to create a .env file for local development.

If environment-specific configuration is introduced in the future, Vite environment variables can be configured using a .env file:

VITE_API_URL=your_api_url

Never commit private API keys, passwords, tokens, or other sensitive credentials to GitHub.

📁 Project Structure

react-logo-maker/
│
├── public/
│   ├── about_bg.png
│   ├── favicon.jfif
│   ├── logo-1.png
│   ├── logo-2.png
│   ├── logo-3.png
│   ├── ...
│   └── logo-13.png
│
├── src/
│   ├── assets/
│   │   └── images/
│   │
│   ├── components/
│   │   ├── BackgroundControl.jsx
│   │   ├── BorderControl.jsx
│   │   ├── BorderTest.jsx
│   │   ├── CustomColorPicker.jsx
│   │   ├── IconControl.jsx
│   │   ├── IconListModal.jsx
│   │   ├── LogoPreview.jsx
│   │   ├── LucideIcon.jsx
│   │   ├── MovementControl.jsx
│   │   ├── MovementTest.jsx
│   │   ├── Navbar.jsx
│   │   ├── Sidebar.jsx
│   │   └── Slider.jsx
│   │
│   ├── context/
│   ├── data/
│   ├── pages/
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
│
├── .eslintrc.cjs
├── .gitignore
├── .prettierrc
├── index.html
├── package.json
├── package-lock.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
└── README.md

The current repository contains separate directories for components, context, data, pages, and application assets, reflecting a component-oriented React architecture.

🎨 Logo Customization

The application provides dedicated controls for customizing different parts of a logo.

Icon

Users can select an icon from the available icon collection.

The project includes:

• Icon selection
• Icon preview
• Icon controls
• Icon list modal
• Lucide-based icons

Background

The background can be customized using the application's background controls and color picker.

Border

The logo border can be edited through dedicated border controls.

Movement

The movement controls allow users to adjust the positioning of the logo/icon within the preview area.

🖼️ Logo Export

The project includes html2canvas, which can be used to render the logo preview as an image. This makes it possible to turn the customized logo interface into a downloadable image rather than simply displaying it inside the browser.

🧩 Component Architecture

The project uses reusable React components instead of implementing the entire application in one component.

Some of the main components include:

Component	Purpose
Navbar	Application navigation
Sidebar	Main editing/control area
IconControl	Icon customization
IconListModal	Icon selection interface
LogoPreview	Displays the customized logo
BackgroundControl	Background customization
BorderControl	Border customization
MovementControl	Logo positioning controls
CustomColorPicker	Color/gradient selection
Slider	Adjustable control values
LucideIcon	Lucide icon rendering

🧹 Code Quality

The project includes ESLint and Prettier configurations for maintaining code quality and consistent formatting.

Run ESLint with:

npm run lint

The project also includes the Tailwind CSS Prettier plugin for formatting Tailwind utility classes consistently.

🔗 Useful Links

• 🌐 Live Demo
• 💻 GitHub Repository
• ⚛️ React Documentation
• ⚡ Vite Documentation
• 🎨 Tailwind CSS Documentation
• 🧩 Lucide React
• 🖼️ html2canvas Documentation
• 🧭 React Router Documentation

🎯 Learning Objectives

This project demonstrates practical concepts in modern React development, including:

• Building reusable React components
• Managing application state
• Creating interactive UI controls
• Building a design/editor interface
• Working with icon libraries
• Implementing color and gradient controls
• Using React Router
• Using Tailwind CSS
• Rendering DOM elements as images
• Organizing a React application into reusable modules
• Creating responsive interfaces
• Using Vite for modern frontend development

🚀 Future Improvements

Potential improvements for future versions could include:

• 📥 Download logos as PNG
• 📐 Export logos as SVG
• 🖼️ Upload custom icons/images
• 🔤 Add custom text to logos
• 🔠 Font selection and typography controls
• 🎨 Advanced gradient controls
• ↻ Undo/redo functionality
• 💾 Save multiple logo designs
• 📋 Copy/share logo designs
• 📱 Improve mobile editing experience
• 🌙 Dark mode
• 🗂️ Logo templates
• ⭐ Favorite designs
• 📤 Social sharing
• 🔗 Generate shareable logo URLs

🤝 Contributing

Contributions, suggestions, and improvements are welcome!

1. Fork the repository

Create your own fork of the project on GitHub.

2. Clone your fork

git clone https://github.com/YOUR_USERNAME/react-logo-maker.git

3. Create a feature branch

cd react-logo-maker
git checkout -b feature/your-feature

4. Install dependencies

npm install

5. Make your changes

Run the development server while working:

npm run dev

6. Check the project

npm run lint
npm run build

7. Commit your changes

git add .
git commit -m "Add your feature"

8. Push your branch

git push origin feature/your-feature

Then open a Pull Request.

---

👨‍💻 Author

Nazmul Hossain

• GitHub: @NazmulHossain2905
• Repository: react-logo-maker

⭐ Support

If you find this project useful or helpful for learning React, consider giving the repository a ⭐ on GitHub.

---

Built with ❤️ using React, Vite & Tailwind CSS.