---
title: Logos
description: 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:
1. **theSVG.org** — A curated registry of brand SVGs, searched first
2. **Simple Icons** — Community-maintained brand-canonical SVGs
3. **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 `` link tag conventions:
```html
```
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:image, PWA manifest — with paths and format guidance. Drop the skills file into your project and reference it in your agent prompt.
## Related
- [Editing a Brand Stack](/brand-stacks/editing-a-stack) — Edit Identity, Voice, Typography, and Color
- [Downloading assets](/brand-stacks/downloading-assets) — Bundle builder, presets, and file formats
- [Generating a Brand Stack](/brand-stacks/generating-a-stack) — How the generation pipeline works