/// Media

Logo

The Protocore faceted-core mark, with an optional mono wordmark.

import { Logo } from "@protocore/pds";

View as Markdown

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.

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.

ProtocoreProtocore Ledger

Protocore

Sizes

Mark height presets: sm 20, md 24 (default), lg 30. The wordmark and mark scale together.

ProtocoreProtocoreProtocore

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.

Usage

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

The wrapper is `role="img"` with an `aria-label` (default "Protocore"); override `label` if the context needs a different name.
The inner `<svg>` is `aria-hidden` and `focusable="false"` so it isn't announced twice or tab-focused in older browsers.
The mark fills via `currentColor`, so it inverts with the theme and follows the surrounding text contrast automatically.
Server-safe and non-interactive — it carries no `"use client"` directive and never enters the tab order.

`Logo` props

Prop	Type	Default	Description
`className`	`string`	—
`label`	`string`	`Protocore`	Accessible label for the mark.
`size`	`enum`	`md`	Mark height: sm 20 · md 24 · lg 30.
`style`	`CSSProperties`	—
`wordmark`	`boolean`	`false`	Render the wordmark text beside the mark.
`wordmarkText`	`string`	`Protocore`	Wordmark text.