Logos

How Brand Stack sources, composes, and exports logos — real SVG marks for existing brands and shape-based logos for new brands. Covers the selection strip, logo editor, asset set, and download bundle.

Every Brand Stack produces a complete set of logo assets ready to use across your product, website, and design tools. How the primary mark is sourced depends on whether you generated an existing brand or a new brand.

Existing brands — real SVG marks

When you generate a Brand Stack using a website URL, Brand Stack searches public SVG databases to find your brand’s actual logo:

theSVG.org — A curated registry of brand SVGs, searched first
Simple Icons — Community-maintained brand-canonical SVGs
Site scrape — Discovers SVG favicons, mask icons, and /logo.svg probes from the brand’s own domain

Every candidate found is downloaded, scored by quality and format, and stored. The Logos section on the stack detail page shows a horizontally-scrollable strip of all candidates. The logo currently in use is highlighted with a selection ring. Click any thumbnail to swap it in — the full asset set is recomposed immediately.

If no SVG source is found, Brand Stack falls back to a generated wordmark.

New brands — shape catalogue

When you create a new brand using invent mode (a text description rather than a URL), your logo is built from an open-source shape catalogue (MIT-licensed). The pipeline picks an initial shape that fits the brand’s visual identity and fills it with your brand colors in both light and dark variants.

You can change the shape at any time from the logo settings panel. Picking a new shape regenerates every asset — symbol, wordmark, light version, dark version — consistently.

What gets generated

From a single source mark, Brand Stack composes the following asset set:

Asset	Format	Notes
Symbol (light)	SVG / PNG	Transparent background, square crop
Symbol (dark)	SVG / PNG	Reversed for dark surfaces
Wordmark (light)	SVG	Brand name in display font, full-width
Wordmark (dark)	SVG	Reversed for dark surfaces
Full logo (light)	SVG	Symbol + wordmark lockup
Full logo (dark)	SVG	Reversed for dark surfaces
Favicon 16 × 16	PNG
Favicon 32 × 32	PNG
Favicon 48 × 48	PNG
Favicon 96 × 96	PNG
Apple Touch Icon	PNG	180 × 180, with brand background
PWA icon 192	PNG	With brand background
PWA icon 512	PNG	With brand background
PWA icon 512 maskable	PNG	Safe-zone padded, brand background
favicon.ico	ICO	Multi-resolution (16/32/48)

Light-mode assets use a transparent background; dark-mode assets use the brand’s dark background token. Icons used in OS chrome (favicons, apple-touch, PWA) are always composed with a background so they read correctly on any OS surface.

Editing your logo

Change the active mark

Click the Change logo button in the stack header, or open the overflow menu on the Logos section header. This opens the logo settings panel.

Candidate strip — For existing brands, all fetched candidates are shown here. Click any thumbnail to make it the active mark. The assets section updates live.

Shape picker — For new brands (and any stack), the shape catalogue is shown here. Clicking a shape regenerates the full asset set with the new shape filled with your brand colors.

Swap from the Logos section

On the stack detail page, the Logos section contains the same scrollable candidate strip. Click any thumbnail directly in the section to swap without opening the settings panel.

Downloading logo assets

Logo assets are included in the Logos category of the download bundle. Open the download dialog from the stack header, check Logos, and click Download. The zip includes all variants organized into logos/ and favicons/ folders with canonical file names ready to drop into a codebase or design tool.

Favicon files are organized to match common <head> link tag conventions:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

A site.webmanifest file with the correct icon references is included in the bundle.

Using logos in Cursor or Claude

The AI handoff preset in the download bundle includes a logos.md skills file that tells an AI coding agent exactly which file to use for each surface — favicon, header logo, og, PWA manifest — with paths and format guidance. Drop the skills file into your project and reference it in your agent prompt.

Editing a Brand Stack — Edit Identity, Voice, Typography, and Color
Downloading assets — Bundle builder, presets, and file formats
Generating a Brand Stack — How the generation pipeline works