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-primary-brand-600 theme token (a unit test keeps them aligned), so UI elements that need to match the brand red should use that token 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-muted-foreground" />

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