Your files never leave your device. All processing happens locally in your browser.
How do I make a logo online for free without uploading anything?
Open the Logo Maker, pick a starting template (icon + name, badge, wordmark, monogram, emblem or minimal), then edit it as a stack of layers: choose an icon from a curated inline-SVG set, add editable text blocks (font, weight, size, letter-spacing, italic, alignment) and simple shapes, and colour every layer with a solid or two-stop gradient fill on a 512×512 artboard. A live preview updates as you go, and you export a scalable SVG or a crisp PNG (256–2048px, transparent where the background is) — everything is composed and rendered on your device, so nothing is ever uploaded.
Six starter templates you edit as layers — no blank-canvas paralysis
Icons from a hand-drawn inline-SVG set (no external stock imagery)
Editable text: web & system fonts, weight 400–900, spacing, italic, multi-line
Solid or two-stop gradient fills, per-layer position / rotation / opacity / reorder
Export scalable SVG or PNG at 256–2048px, transparent or coloured background
100% client-side — the only optional network call is loading a chosen Google font
What is
Logo maker (browser-based vector logo editor)
A logo maker is a design tool for composing a brand mark — typically an icon or symbol paired with a wordmark — from editable elements such as icons, text and shapes. A client-side logo maker performs all composition and rendering in the web browser: the design is held as a document of layers that is serialised to SVG (a resolution-independent vector format) for the live preview and download, and rasterised on an in-canvas <canvas> to PNG at a chosen pixel size. Because logos must scale from a favicon to a billboard, vector output (SVG) is preferred, and good practice favours simplicity, a limited colour palette and legibility in monochrome.
No. Your design is a small document of numbers, colours and text held in the page, serialised to SVG and rasterised to PNG entirely on your device. There is no upload, no server-side rendering and no stock-image or AI service. The only optional network request is fetching a Google font you pick, and your text is never sent with it.
The Logo Maker is 100% client-side. Your logo is represented as a JavaScript document — a list of layers with positions, sizes, colours and text — that a pure engine serialises to an SVG string; that same SVG drives the live preview and the SVG download, and it is drawn onto an in-memory <canvas> to produce the PNG. Nothing about the document is transmitted: there is no upload endpoint, no server-side image generation, and no external stock-photo or AI logo service in the loop. The single, optional network use is loading a Google font you choose from the dropdown, purely so the on-screen preview and the exported PNG show that font’s real shapes; only the font family name is requested (as with any webfont), never your design. Prefer zero network requests? Choose one of the system fonts. The tool works offline once cached and discards everything when you close the tab.
Download SVG when you need an infinitely scalable master (print, signage, the web) or want to keep editing in a vector app. Download PNG when you need a ready-to-drop-in raster image; pick a large size (1024–2048px) for print, and it is transparent wherever the artboard background is transparent.
SVG is a vector format: it stays razor-sharp at any size, from a 16px favicon to a large-format print, so it is the best master to keep and the format most design tools can re-open and refine. Choose SVG for that scalability and editability. PNG is a fixed-resolution raster: convenient because it drops straight into documents, slide decks, social profiles and apps that don’t accept SVG, and it preserves transparency when your artboard background is set to transparent. Because a PNG has a set pixel count, export a size that comfortably exceeds where you’ll use it — 256–512px for on-screen avatars, 1024–2048px for print or high-DPI displays. This tool renders the PNG from the very same SVG on an in-canvas draw, so the two always match; note that the SVG references fonts by name, so for maximum portability of the SVG itself you may want to convert text to outlines in a dedicated vector editor.
Because the SVG references each font by family NAME rather than embedding the glyph outlines. It renders correctly on machines that have that font (and in the PNG, which is rasterised with the loaded font), but a computer without the font substitutes a different one. To make the SVG fully portable, convert its text to outlines in a vector editor.
To keep your text editable, the Logo Maker writes each text layer into the SVG as real text with a font-family reference — it does not bundle a font parser to trace the letters into vector paths. That means the SVG looks exactly right anywhere the referenced font is installed, and the PNG export always looks right because it is rasterised in your browser using the font it has loaded (we wait for a chosen Google font before rendering the PNG). But if you open the SVG on a device that lacks the font, the browser or app substitutes a fallback and the wordmark shifts. The fix for a truly portable SVG is to open it in a vector editor (such as Inkscape or Illustrator) and “convert text to outlines / paths”, which freezes the letter shapes into vectors independent of any installed font. If you only need a picture, the PNG sidesteps this entirely.
No. It is a manual editor, not an AI generator, and it uses a small curated set of hand-drawn inline-SVG icons rather than an infinite stock library. You compose the logo yourself from templates, icons, text and shapes — which keeps it private and offline, but means a distinctive result depends on your design choices.
By design this is a hands-on vector editor: it does not invent a brand mark with AI, and it deliberately avoids any external stock-imagery service so that nothing needs to leave your browser. Instead you start from one of six templates and shape it with a curated library of geometric, recolourable inline-SVG icons, editable text and basic shapes. The trade-off is honest: the icon set is finite (not a stock marketplace), and originality comes from how you combine and customise elements rather than from a generator. For a logo you intend to trademark or use as a primary brand identity, treat this as a fast drafting and iteration tool, then have a designer refine it and run the appropriate trademark checks — good logo practice still favours simplicity, a limited palette and legibility at small sizes and in monochrome.
Detailed Explanation
📖How It Works
What the Logo Maker Does
The Logo Maker is a browser-based vector editor for composing a brand mark from editable layers: an icon (from a curated inline-SVG set), text blocks, and simple shapes on a 512×512 artboard. It ships with six starter templates — icon-plus-name, badge, wordmark, monogram, emblem and minimal — that the user then customises: recolour any layer with a solid or two-stop linear-gradient fill, set per-layer position, rotation, opacity, visibility and stacking order, and edit typography (family, weight 400–900, size, letter-spacing, italic, alignment and multi-line text). A live preview updates instantly and the design exports to SVG or PNG.
Layer-based editor: icon + text + shape layers on a 512×512 artboard
Six starter templates you edit rather than a blank canvas
Solid or two-stop gradient fills; per-layer transform, opacity and reorder
Typography: web & system fonts, weight 400–900, spacing, italic, multi-line
Exports scalable SVG and rasterised PNG; 100% in the browser
⚙️Methodology
SVG as the Single Source of Truth
A pure engine (logoMakerEngine.ts) serialises the whole layer stack to one standalone SVG string, and that same SVG is used for BOTH the live preview and the exports. Icons are hand-authored on a 0–100 grid using currentColor so a layer’s fill drives their colour; text layers become real <text> elements with a font-family reference and per-line <tspan> for multi-line blocks; shapes map to <rect>/<circle>/<ellipse>/<line>. Gradients are emitted as <linearGradient> defs with x1/y1/x2/y2 derived from a CSS-style angle. Because the engine is deterministic string maths, the preview and both export formats can never diverge.
One serialised SVG drives the preview, the SVG download and the PNG
Icons use currentColor so layer fill sets their colour
Text becomes real <text> + <tspan>; gradients become <linearGradient> defs
CSS-style gradient angle converted to SVG x1/y1/x2/y2 unit coordinates
Deterministic engine → preview and exports always match
🔧Technical Details
Exporting: SVG Verbatim, PNG via Canvas
SVG export downloads the serialised string verbatim (with an XML prolog) — infinitely scalable, ideal for print, signage and the web, and re-editable in vector apps. PNG export converts the SVG to a UTF-8-safe data URL, loads it into an <img>, and draws it onto an in-memory <canvas> sized to the chosen dimension (256, 512, 1024 or 2048px), then reads it back with canvas.toBlob(). Using a same-origin data URL (never a cross-origin fetch) guarantees the canvas is never tainted, so toBlob() always succeeds. The PNG is transparent wherever the artboard background is transparent.
SVG downloaded verbatim with an XML prolog — scalable and re-editable
PNG: SVG → data URL → <img> → <canvas> → toBlob() at 256–2048px
Same-origin data URL keeps the canvas untainted so export never fails
PNG transparency preserved when the background is transparent
Larger sizes (1024–2048px) recommended for print / high-DPI
📋Use Cases
Fonts: Referenced by Name, Not Outlined
To keep text editable, the tool writes each text layer as real text referencing a font FAMILY, rather than tracing letters into vector paths (no font parser is bundled). The consequence is a portability caveat for the SVG: it renders correctly wherever the font is installed, and the PNG always looks right because it is rasterised with the browser’s loaded font — the exporter awaits the chosen Google font (the only optional network use) before drawing. For a fully portable SVG, convert text to outlines in a vector editor such as Inkscape or Illustrator. Choosing a system font avoids any network request entirely.
Text is real <text> with a font-family reference — not outlined to paths
PNG waits for the chosen Google font so it matches the preview
Portable SVG requires converting text to outlines in a vector app
System-font option makes the tool fully offline (zero network)
Loading a Google font sends only the family name, never your design
⚠️Limitations
Honest Limitations
This is a manual editor, not an AI logo generator, and it uses a curated, finite set of hand-drawn inline-SVG icons rather than an infinite stock library — deliberately, so nothing needs to leave the browser. Originality therefore depends on the user’s design choices. It does not embed fonts into the SVG, does not vectorise raster images, and offers no auto-layout or brand-guideline generation. For a legally protectable primary brand mark, it is best used as a fast drafting and iteration tool, after which a designer should refine the result and run trademark checks; good practice still favours simplicity, a limited palette and legibility at small sizes and in monochrome.
Manual editor — no AI generation and no infinite stock icon library
Curated hand-drawn icon set; originality is up to the user
No font embedding, no image vectorisation, no brand-guideline output
Best as a drafting tool; have a designer refine & trademark-check
Follow logo best practice: simple, limited palette, works in monochrome
🔒Privacy & Security
Private by Design
Everything happens on the user’s device. The logo is a small document of numbers, colours and text held in the page; a pure engine serialises it to SVG and rasterises it to PNG locally, with no upload endpoint, no server-side rendering and no stock-image or AI service in the path. The built-in icons are hand-authored inline SVG, so even they trigger no download. The single, optional network request is fetching a Google font the user selects, and only the font family name is requested — never the design. The tool works offline once cached, keeps no accounts and sets no tracking, and discards the design the moment the tab is closed.
Design held as numbers/text in the page; SVG & PNG rendered locally
No upload, no server-side rendering, no stock-image or AI service
Built-in icons are inline SVG — no image download
Only optional network call: loading a Google font you choose
Works offline once cached; no accounts, no tracking; discarded on close
SVG vs. PNG export from the Logo Maker
Aspect
SVG
PNG
Type
Vector (resolution-independent)
Raster (fixed pixel grid)
Scalability
Sharp at any size, favicon to billboard
Sharp only near the exported size
Best for
Print, signage, web, re-editing in a vector app
Slide decks, social, apps that reject SVG
Transparency
Native
Preserved when the background is transparent
Fonts
Referenced by name (convert to outlines for portability)
Baked in — rasterised with the loaded font
Recommended size
n/a (scales freely)
256–512px screen; 1024–2048px print/high-DPI
Both formats are generated on your device from the same serialised SVG; PNG is drawn on an in-memory canvas. As of July 2026.