---
title: Logo
description: Logos are visual elements that represent our customers and partner companies.
category: Display
related: [Icon, Image]
commonPatterns: [partner-logo, customer-logo, brand-logo]
---

Source: https://clickhouse.design/click-ui/logo

# Logo

Logos are visual elements that represent our customers and partner companies. They support different sizes, themes (light/dark), and can be customized with specific dimensions.

## Example

## Props

| Prop   | Type                                            | Default value | Description                                   |
| ------ | ----------------------------------------------- | ------------- | --------------------------------------------- |
| name   | `LogoName`                                      | `-`           | The name of the logo to display               |
| theme  | `"light" \| "dark"`                             | `'light'`     | The theme variant of the logo (light or dark) |
| size   | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"` | `'md'`        | The size of the logo                          |
| width  | `number \| string`                              | `undefined`   | Custom width for the logo (overrides size)    |
| height | `number \| string`                              | `undefined`   | Custom height for the logo (overrides size)   |

```tsx
import { Logo } from '@clickhouse/click-ui'

<Logo 
name="clickhouse"
size="md"
/>
```

## Quick start

```tsx
import { Logo } from '@clickhouse/click-ui'

function MyLogo() {
return (
  <Logo 
    name="clickhouse"
    size="md"
  />
)
}
```

## Related components

- **Icon**: For icon-based graphics instead of logos.
- **Image**: For general image display.

## Common use cases

### Partner logos

```tsx
import { Logo, Container } from '@clickhouse/click-ui'

function PartnerLogos() {
return (
  <Container orientation='horizontal' gap='lg' wrap='wrap'>
    <Logo name="airbyte" size="lg" />
    <Logo name="aws" size="lg" />
    <Logo name="google" size="lg" />
  </Container>
)
}
```

### Different sizes

```tsx
import { Logo, Container } from '@clickhouse/click-ui'

function LogoSizes() {
return (
  <Container orientation='horizontal' gap='md'>
    <Logo name="clickhouse" size="xs" />
    <Logo name="clickhouse" size="sm" />
    <Logo name="clickhouse" size="md" />
  </Container>
)
}
```

### Custom dimensions

```tsx
import { Logo, Container } from '@clickhouse/click-ui'

function CustomLogo() {
return (
  <Container orientation='horizontal' gap='md'>
    <Logo name="clickhouse" width={100} height={40} />
    <Logo name="clickhouse" width="150px" height="60px" />
  </Container>
)
}
```