# Brand

> Upload your logo, mark and favicon as SVG files in DS Manager, see how they are sanitized, and where your brand name and logo appear in ProBlocks.

Canonical: https://www.shadcndesign.com/docs/ds-manager-brand

The Brand page holds three SVG slots: your logo, your mark and your favicon. They show on the canvas previews and in ProBlocks, and they publish with your system as files plus a ready-made `Logo` component.

## Upload a logo

1. Open **Brand** in the left nav.
2. In a slot, click **Choose SVG**, or drop an SVG file onto the slot.
3. DS Manager cleans the file and shows it on a light and a dark surface side by side.
4. Optionally, rename the asset in the name field next to the button.

<RichImage
  src="/docs/ds-manager/brand.webp"
  alt="DS Manager Brand page with a logo, mark and favicon uploaded, each previewed on a light and a dark surface, and the brand assets shown in their slots and in a product header on the canvas"
  width="899"
  height="618"
  quality="90"
/>

To swap a file, click **Replace SVG**. To clear a slot, click **Remove logo**, **Remove mark** or **Remove favicon** in its header. **Remove all brand assets** in the command menu clears all three. The page header counts how many of the three slots are filled.

## The three slots

| Slot | What it is for | Installs to |
| --- | --- | --- |
| **Logo** | The full lockup, mark plus wordmark | `public/logo.svg` |
| **Mark** | The square glyph on its own, for tight spaces | `public/logo-mark.svg` |
| **Favicon** | The browser-tab icon. Keep it legible at 16px | `app/icon.svg` |

You do not need all three. Where a preview asks for the logo and you only uploaded a mark, it draws the mark, and the other way round.

The canvas has two sections. **Brand assets** shows each slot as a card, uploaded or still empty. **In context** places them where you judge a logo: a product **Header**, a **Sign in** card and a **Favicon** in a browser tab.

## Light and dark

There is no separate dark mode logo slot. Each slot previews your file on a light and a dark surface, and the canvas's light and dark toggle shows the whole page in either mode.

DS Manager inlines your SVG markup in the page, so CSS reaches inside it. A shape filled with `currentColor` takes the surrounding text color, which makes a one-color mark read on both light and dark backgrounds. The published `Logo` component inlines the same markup, so this works in your project too.

## SVG rules and sanitizing

An SVG is a document that can carry scripts and links, and your logo ends up in other people's projects. DS Manager cleans every file before it is stored, using an allowlist of what a logo needs.

- **SVG only**, up to 256 KB. A full lockup is usually a few KB.
- The file must be valid XML with an `<svg>` root element.
- Removed with everything inside them: `<script>`, `<foreignObject>`, `<iframe>`, embedded images (`<image>`) and animation elements.
- Removed attributes: event handlers such as `onload` and `onclick`, and links to anything outside the file. Internal `#fragment` references stay.
- Links (`<a>`) are unwrapped: the link goes, the artwork inside stays.
- `<style>` blocks stay, as long as they do not load anything from outside the file. Logos exported from Illustrator and Figma keep their class-based colors.
- Comments and processing instructions are removed.

After an upload, the slot lists what it took out under "Stripped on the way in:". If a file is rejected, the slot says why: it is empty, over the size limit, not valid SVG, has a root other than `<svg>`, or had nothing left to draw after cleaning. A too-large file usually means an embedded bitmap. Export the artwork again as plain SVG with outlines and paths.

## Brand name

The Brand page has no name field. Your brand name is your system's name.

- The canvas prints it on the **Sign in** card ("Sign in to Acme") and in the favicon tab's title.
- ProBlocks footers print it in their copyright line. An installed footer has the name written in as plain text.
- A system with no name, or still called "Untitled system", gets "Your company" instead.

To change it, open the system switcher in the top bar, choose **Manage systems…** and rename the system. Names can be up to 100 characters. Renaming does not move your registry address.

## Your logo in ProBlocks

The [ProBlocks](/docs/ds-manager-problocks) that draw a logo (the navbars, the footers, and a few comparison and coming-soon blocks) use your uploaded logo, or the mark when that is all you uploaded. With nothing uploaded they draw a neutral placeholder. Logo clouds keep their generic placeholder logos, since those stand for your customers.

**ProBlocks** and **Lint** sit under **Brand** in the left nav. See [ProBlocks](/docs/ds-manager-problocks) and [Lint locks](/docs/ds-manager-lint).

## What publishes

When you [publish](/docs/ds-manager-publish), each uploaded asset becomes a file at the path in the table above, and DS Manager generates `components/logo.tsx`. It exports a `Logo` component, plus `LogoMark` when your mark is a different file. The component is regenerated on every publish, so edit the asset in DS Manager, not the file.

<Callout type="info">
The favicon targets `app/icon.svg`, which the Next.js App Router serves as the site icon with no extra setup. In a project that uses a `src/` directory, it still lands in `app/icon.svg` at the project root, so move it to `src/app/icon.svg`.
</Callout>