---
title: Redpanda Logo
description: The canonical Redpanda brand logo — horizontal, stacked, and mark-only lockups from the 2025 rebrand.
icon: /brand/redpanda-mark.svg
author:
  name: redpanda-data
  url: https://github.com/redpanda-data
sidebar:
  badge: New
mode: wide
---

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

```package-install
npx shadcn@latest add @redpanda/redpanda-logo
```

<ComponentPreview name="redpanda-logo-demo" description="The three brand lockups: horizontal, stacked, and mark." />

## Usage

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

```tsx lineNumbers
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.

<ComponentPreview name="redpanda-logo-theme-demo" description="The currentColor wordmark on default and inverted surfaces, plus monochrome mode." />

```tsx lineNumbers
// 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`](/brand/redpanda-logo-horizontal.svg) — ink wordmark, for light backgrounds
- [`/brand/redpanda-logo-horizontal-white.svg`](/brand/redpanda-logo-horizontal-white.svg) — white wordmark, for dark backgrounds
- [`/brand/redpanda-logo-stacked.svg`](/brand/redpanda-logo-stacked.svg) — stacked, ink wordmark
- [`/brand/redpanda-logo-stacked-white.svg`](/brand/redpanda-logo-stacked-white.svg) — stacked, white wordmark
- [`/brand/redpanda-mark.svg`](/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](/docs/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

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant?` | `'horizontal' \| 'stacked' \| 'mark'` | `'horizontal'` | Which brand lockup to render: horizontal (mark + wordmark), stacked (mark above wordmark), or mark (logomark only) |
| `monochrome?` | `boolean` | `false` | Render the mark in currentColor too, for single-color placements |
| `className?` | `string` | - | Standard SVG props are forwarded; size the logo with a height class such as h-8 w-auto |