# Logo
- **Category:** Media (`media`)
- **Slug:** `media/logo`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Logo } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/media/logo
> The Protocore faceted-core mark, with an optional mono wordmark.
## When to use it
**Logo** is the Protocore brand mark — use it in the top bar, footer, auth screens, and empty states that need brand presence. Mark-only for tight chrome (a collapsed sidebar, a favicon-adjacent slot); the full `wordmark` lockup where there's room to breathe. It represents **the product/brand**, distinct from **Avatar** (a person or account) and **LineArt** (ambient imagery). For a scrolling wall of *third-party* logos, feed marks into **LogoMarquee** instead of stamping many Logos by hand.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `label` | `string` | no | `Protocore` | Accessible label for the mark. |
| `size` | `enum` | no | `md` | Mark height: sm 20 · md 24 · lg 30. |
| `style` | `CSSProperties` | no | — | — |
| `wordmark` | `boolean` | no | `false` | Render the wordmark text beside the mark. |
| `wordmarkText` | `string` | no | `Protocore` | Wordmark text. |
## Examples
### Basics
The faceted-core mark on its own, as inline SVG. It fills via `currentColor`, so it inherits ink from its container — no color prop needed.
```tsx
import { Logo } from "@protocore/pds";
export default function Demo() {
return ;
}
```
### With wordmark
Set `wordmark` to render the mono wordmark beside the mark (the full brand lockup). Override the text with `wordmarkText` for a sub-brand. Because the mark is `currentColor`, setting `color` retints the whole lockup.
```tsx
import { Logo, VStack } from "@protocore/pds";
export default function Demo() {
return (
{/* The full brand lockup */}
{/* Custom wordmark text for a sub-brand */}
{/* The mark tints via currentColor — set color on a parent to recolor
the whole lockup (mark + wordmark) */}
);
}
```
## Do & don't
**Do**
- Let the mark inherit `currentColor` — set `color` on a parent to retint it.
- Use the mark alone in tight spaces and the full `wordmark` lockup where there's room.
- Keep a clear-space margin around the lockup so it reads cleanly.
- Rely on the built-in `label` (default "Protocore") for the accessible name.
**Don't**
- Don't recolor the mark with a hardcoded hex — use theme tokens via `color`.
- Don't use Logo to represent a person or account; that's Avatar.
- Don't stretch or set a non-uniform scale on the SVG — resize via `size`.
- Don't hand-roll a row of Logos for a partner wall; use LogoMarquee.
## Accessibility
**Notes**
- The wrapper is `role="img"` with an `aria-label` (default "Protocore"); override `label` if the context needs a different name.
- The inner `