Logo Maker
Design your logo with a drag-and-drop canvas editor. Text, icons, shapes, 15 Google Fonts, 100 icons — export PNG/SVG/ZIP in your browser.
Loading canvas…
Layers
Properties
Select an element to edit its properties
Technology
Finance
Healthcare
Food
Nature
Minimalist
Bold
Pastel
Monochrome
Earth
What it does
Drag-and-drop canvas editor
Powered by Fabric.js — move, resize, and rotate every element with selection handles. Each element can be freely repositioned and scaled.
15 Google Fonts
Fonts load dynamically when selected — only the ones you use are downloaded. Includes Montserrat, Poppins, Playfair Display, Bebas Neue, and more.
100-icon library
SVG icons organized into 8 categories: Tech, Business, Nature, Abstract, Shapes, Food, Health, and Education. Click any icon to add it to the canvas.
Full color control
HSL sliders, hex input, 10 predefined brand palettes, and a 16-slot recent colors row — all in a single compact color picker.
Layer management
Reorder layers with up/down arrows, show or hide individual elements, and delete anything — all from the layer panel below the canvas.
Multi-format export
Export as transparent or white-background PNG at 256, 512, or 1024px; as a scalable SVG; or as a ZIP package containing all PNG sizes plus the SVG.
How to use Logo Maker
- 1Start from a template or blank canvas
Click the Templates tab in the left panel to pre-populate the canvas with a starter layout, or use the Text/Icons tabs to build from scratch.
- 2Add and customize elements
Select Text from the left sidebar to add your company name or tagline. Browse the Icons tab to add an SVG icon, or use the Shapes panel to add geometric shapes.
- 3Style with colors and fonts
Click an element to select it. The right panel shows context-sensitive controls — font family, size, weight for text; fill and stroke for shapes; color and scale for icons.
- 4Arrange with layers and alignment
Use the layer panel below the canvas to reorder elements. Use the alignment buttons in the right panel to center or align elements precisely to the canvas.
- 5Export your logo
Click the Export button in the top bar. Choose PNG (pick a size), SVG, or ZIP package. Select background (transparent, white, or custom color) and download.
When to use this
Startup brand identity
Pick the Startup Stack template, update the company name and tagline text, apply your brand colors from the right panel, and export a 1024px PNG and SVG.
YouTube channel art
Use the Bold Badge template, change the text to your channel initials, set your channel colors, and export a transparent PNG for overlaying on thumbnails.
Social media profile icon
Use the Monogram Square template, type your two-letter abbreviation in Playfair Display, and export a 512px PNG for profile picture dimensions.
App icon prototype
Build a simple icon with one Shape and one Icon layer, set a solid background color, and export the ZIP package to get 256, 512, and 1024px versions.
Event or product logo
Use the Nature Organic or Script Elegant template as a starting point, replace the text and icon, and download the SVG for vector-quality printing.
Common errors & fixes
- Font doesn't update immediately after selecting
- Google Fonts load asynchronously. Click off the text element and back onto it — the re-render will use the loaded font.
- Icon appears as a plain shape without detail
- Some icons use multi-path SVGs. If the icon looks wrong, try changing the color in the right panel — this re-applies the fill to all paths in the icon group.
- Exported PNG has a white background when Transparent was selected
- Verify the Background control in the export modal is set to Transparent. If the canvas has a background rectangle shape, delete it from the layer panel first.
- Canvas content disappears after changing canvas size
- Changing canvas dimensions resizes the canvas but preserves all objects. If objects appear to move, select them and use the alignment tools to re-center.
- Undo jumps back too many steps
- Each element addition, move, resize, and property change is a separate history entry. Use Redo (Ctrl+Y equivalent) to step forward again after an undo.
Technical details
| Canvas engine | Fabric.js v6 (dynamically imported, client-only) |
| Font loading | Google Fonts via dynamically injected <link> tags — only loaded fonts are requested |
| Icon format | Inline SVG path data (no external requests) — 100 icons across 8 categories |
| Export PNG | canvas.toDataURL() with multiplier scaling to 256, 512, or 1024px |
| Export SVG | canvas.toSVG() — full vector with embedded text and path data |
| Export ZIP | JSZip v3 — bundles all PNG sizes + SVG, generated entirely in browser |
| Undo / Redo | Custom JSON snapshot stack — canvas.toJSON() / loadFromJSON() |
| Processing location | 100% client-side — nothing is uploaded to any server |
Why vector export matters for logo files
A logo is used across many surfaces: a website favicon at 16px, a business card at 50mm, a banner at 2 metres. Raster PNGs are fixed-resolution — a 1024px PNG looks sharp on screen but blurs when printed at A4 size at 300 DPI (which requires about 2480px minimum).
SVG (Scalable Vector Graphics) stores shapes as mathematical paths rather than pixel grids. The file produced by this tool's SVG export describes every element — the font paths, icon outlines, shape fills — as coordinate data that any renderer can draw at any scale without loss. This is why professional logo files are distributed as SVG or PDF rather than PNG. Always download the SVG alongside your PNG when designing a production logo.
How Fabric.js enables browser-based canvas editing
Fabric.js is an abstraction layer on top of the HTML5 Canvas API that adds object model semantics to what is otherwise a stateless pixel buffer. Without it, a canvas is like a bitmap: you draw to it, and the drawing is just pixels — there is no concept of 'the circle' or 'the text box' that you can later select, move, or edit.
Fabric.js maintains an internal list of FabricObject instances (IText, Rect, Circle, Path, Group). Each object knows its own position, scale, rotation, and style properties. Clicking the canvas hits a test on every object to find which one was clicked. Dragging moves the object's left/top properties and re-renders. This makes a fully interactive design tool possible in the browser with no server involvement.
Frequently Asked Questions
Is the logo maker completely free with no watermarks?
- Yes. There is no signup, no account, and no watermark added to exported files. All features are free to use.
Can I use the exported logo commercially?
- Yes. The icons embedded in this tool use open-source SVG path data, and the export is your original work. You own the resulting logo files.
What is the maximum export resolution?
- PNG exports at up to 1024×1024 pixels. For larger prints, use the SVG export — it is a vector format and scales to any size without quality loss.
Can I edit text directly on the canvas?
- Yes. Double-click any text element on the canvas to enter inline editing mode. You can also update the content via the properties panel on the right.
Does it work on mobile?
- The canvas editor works on tablet-sized screens. On small phone screens the three-column layout stacks vertically. A desktop or large tablet is recommended for logo design.
How do I remove the white background from my exported logo?
- In the Export modal, set Background to Transparent (None). Then download as PNG — the resulting file will have a transparent background that shows correctly on any colored surface.
Related Tools
Color Palette
Extract colors from images or generate harmonious palettes.
SVG Converter
Convert SVG to PNG at any resolution or ICO for favicons.
QR Generator
QR codes for URLs, WiFi, vCards, and text. PNG & SVG download.
CSS Gradient
Visual CSS background generator & code.