Pipecat Logo

The PipecatLogo component renders the Pipecat logo as an SVG. It supports customizable size, color, and styling while maintaining the correct aspect ratio.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<PipecatLogo />

Component Variants

PipecatLogo

The PipecatLogo component renders the Pipecat logo SVG.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<PipecatLogo />

Prop	Type	Default
`width?`	`number`	`200 (if height not provided)`
`height?`	`number`	`100 (if width not provided)`
`color?`	`string`	`"currentColor"`
`className?`	`string`	`""`
`alt?`	`string`	`"Pipecat Logo"`

Usage

Basic Usage

Display the logo with default size and color.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<PipecatLogo />

Custom Size

Specify custom width and height.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<div className="flex gap-4 items-center">
  <PipecatLogo width={100} height={58} />
  <PipecatLogo width={200} height={116} />
  <PipecatLogo width={300} height={174} />
</div>

Custom Color

Change the logo color.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<div className="flex gap-4 items-center">
  <PipecatLogo color="currentColor" />
  <PipecatLogo color="#3b82f6" />
  <PipecatLogo color="#10b981" />
  <PipecatLogo color="#ef4444" />
</div>

Width Only

Specify only width, height will be calculated automatically.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<PipecatLogo width={150} />

Height Only

Specify only height, width will be calculated automatically.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<PipecatLogo height={80} />

Custom Styling

Apply custom classes for additional styling.

import { PipecatLogo } from "@pipecat-ai/voice-ui-kit";

<PipecatLogo 
  className="opacity-50 hover:opacity-100 transition-opacity"
  width={200}
/>

Aspect Ratio

The logo maintains a 45:26 aspect ratio. When only width or height is specified, the other dimension is automatically calculated to preserve this ratio.

Default Size

If neither width nor height is provided, the logo defaults to:

Width: 200px
Height: 100px (calculated to maintain aspect ratio)

Color

The default color is currentColor, which means the logo will inherit the text color of its parent element. This makes it easy to style with theme colors.

Integration

The PipecatLogo component is a standalone SVG component that doesn't require any context providers. It can be used anywhere in your application for branding purposes.

On this page