Redpanda Logo

The canonical Redpanda logo as a single theme-aware component. The wordmark renders in currentColor so it follows the surrounding text color, while the logomark keeps the canonical brand red in both light and dark mode — one component replaces the separate "default" and "white" static assets apps used to carry.

Installation

Usage

Size the logo with a height class and let the width follow the lockup's aspect ratio.

import { RedpandaLogo } from "@/components/redpanda-ui/redpanda-logo"

// Horizontal lockup (default) — headers, expanded sidebars
<RedpandaLogo className="h-8 w-auto" />

// Stacked lockup — square placements, splash screens
<RedpandaLogo variant="stacked" className="h-24 w-auto" />

// Mark only — collapsed sidebars, avatars, loading states
<RedpandaLogo variant="mark" className="size-8" />

Theming

There is no separate "white logo" import: the wordmark inherits currentColor, so setting a text color is all it takes to place the logo on any surface. Use monochrome to render the mark in currentColor too — for single-color placements like watermarks or muted footers.

The mark's red is the same value as the --color-brand token of the source palette (a unit test keeps them aligned). That rung is internal, so UI elements that need to match the brand red should reach for the semantic brand token — bg-brand, text-brand — rather than a hardcoded hex.

// On a dark surface, the equivalent of the old white asset:
<div className="bg-foreground p-4">
  <RedpandaLogo className="h-8 w-auto text-background" />
</div>

// Single-color placement
<RedpandaLogo monochrome className="h-8 w-auto text-subtle" />

Raw brand assets

When a React component can't be used — boot screens rendered before hydration, <img> tags, favicons, emails, external tools — use the raw SVGs served by this site. They carry the same path data as the component; a unit test in the registry keeps the two in sync.

• /brand/redpanda-logo-horizontal.svg — ink wordmark, for light backgrounds
• /brand/redpanda-logo-horizontal-white.svg — white wordmark, for dark backgrounds
• /brand/redpanda-logo-stacked.svg — stacked, ink wordmark
• /brand/redpanda-logo-stacked-white.svg — stacked, white wordmark
• /brand/redpanda-mark.svg — logomark only

Updating the brand

These assets originate from the brand team's shared asset folder (see UX-1404). To roll out updated branding:

1. Replace the SVGs in packages/docs/public/brand/ with the new exports. Strip any background <rect> the export tool adds — assets must stay transparent.
2. Mirror the new path data into packages/registry/src/components/redpanda-logo/index.tsx.
3. Run bun run registry:build. The redpanda-logo unit tests fail if the component and the raw assets drift apart.

Consumers then pick up the change by re-installing the redpanda-logo item — no app-side asset hunting required.

Deprecated exports

RedpandaLogo and RedpandaIcon in the icons collection are deprecated re-exports of this component and will be removed in a future major version. Import from redpanda-logo directly.

API Reference

RedpandaLogo