Logo Mockup Previewer

Logo mockup generator — preview on a tee, mug, card & sign

Drop in your logo and preview it composited onto a t-shirt, coffee mug, business card, and storefront sign — then download each as a PNG. Every scene is drawn in your browser; nothing is uploaded by the core tool (the optional AI edit assistant sends your vector when used).

no logo loaded Light studio
Mockups4
Logo loaded
Source--
Your mockups
T-shirt
Mug
Business card
Sign

Illustrative previews. Every scene is drawn in your browser with vector-drawn shapes — no photography, no uploads. Great for pitching a design or testing a colour. Want a cleaner logo first? Try Logo Rescue or the Converter.

Need the full web-ready asset kit?

Turn the same logo into favicons, dark/light variants, a CSS snippet, and a React component.

Open Logo Kit

How the mockups are built

Four hand-drawn canvas scenes, not stock photography — your logo is composited into each one live.

Each of the four product scenes is drawn from scratch on an HTML5 canvas using gradients, shadows, and shape paths — there's no underlying product photo being overlaid. The t-shirt scene builds a heather-fabric silhouette with a collar, sleeves, and a subtle center fold, then places your logo at roughly 28% of the shirt's width on the chest at slightly reduced opacity to read like a printed design. The mug scene draws a ceramic body with a handle and rim, then applies a horizontal squash transform (82% scale) to your logo before compositing it, so it visually wraps around the mug's curved surface instead of looking pasted flat. The business-card scene renders a 3.5:2 card at a slight rotation with your logo top-left and faux contact-detail bars for scale reference. The sign scene sets your logo centered inside a framed panel mounted on two posts against an outdoor sky/ground gradient. All four redraw instantly when you toggle between a light or dark studio background, and each canvas exports independently to PNG, or all four bundle into one zip.

Logo Mockup Previewer FAQ

Is this free to use?

Yes — it's free to try in your browser. All four mockups render as soon as you load a logo, and you can download any or all of them from the same free session.

Are these real photos of a t-shirt or mug?

No — every scene is drawn procedurally with canvas gradients and shapes, not photography. They're illustrative previews meant for pitching a design or checking a color, not a replacement for a real photo shoot or a print proof before production.

What products can I preview?

Four scenes are built in: a t-shirt with a chest print, a coffee mug with the logo wrapped to the curved surface, a business card with top-left placement, and a framed storefront/yard sign.

Is my logo uploaded anywhere?

No — your logo is loaded as a local browser image and drawn directly onto each canvas scene. Nothing is uploaded and no external images are fetched to build the mockups.

What file types can I use?

SVG, PNG, JPG, and WebP. Raster files are automatically auto-vectorized before being composited into the scenes.

Can I see how it looks on a dark background?

Yes — a Light studio / Dark studio toggle redraws all four scenes with a different background and surface tone, which is a fast way to check contrast before finalizing a print color.

Related tools