> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Logo

The Wallarm logo in its three forms — `icon`, `wordmark` and `full` — sized by height, with the width following. `color` is a decision about the surface rather than a style choice: `default` on light, `white` on a dark surface where the mark should keep its brand colour, and `full-white` only where the whole lockup has to be a single colour. It renders a bare `svg` with no accessible name, so pass an `aria-label` where the logo is the only thing naming a link, and leave it unlabelled where a heading beside it already does.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Logo) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/brand-logo--overview)

```tsx
import { Logo } from '@wallarm-org/design-system/Logo';

export const Basic = () => <Logo />;
```

## Usage

```tsx
import { Logo } from '@wallarm-org/design-system/Logo';
```

## Examples

### Types

The three forms at one height: the icon alone where space is tight, the wordmark where the mark already appears nearby, and the full lockup everywhere else.

```tsx
import { Logo } from '@wallarm-org/design-system/Logo';
import { HStack } from '@wallarm-org/design-system/Stack';

export const Types = () => (
  <HStack gap={96} justify='between' fullWidth>
    <Logo type='icon' />
    <Logo type='wordmark' />
    <Logo type='full' />
  </HStack>
);
```

### Styles

Each colour style on the surface it is for. `white` keeps the icon’s brand colour and turns only the wordmark white; `full-white` gives up the colour entirely.

```tsx
import { Logo } from '@wallarm-org/design-system/Logo';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Styles = () => (
  <VStack gap={16}>
    <div className='rounded-8 px-16 py-8'>
      <HStack gap={96} justify='between' fullWidth>
        <Logo type='icon' color='default' />
        <Logo type='wordmark' color='default' />
        <Logo type='full' color='default' />
      </HStack>
    </div>
    <div className='rounded-8 bg-slate-900 px-16 py-8'>
      <HStack gap={96} justify='between' fullWidth>
        <Logo type='icon' color='white' />
        <Logo type='wordmark' color='white' />
        <Logo type='full' color='white' />
      </HStack>
    </div>
    <div className='rounded-8 bg-slate-900 px-16 py-8'>
      <HStack gap={96} justify='between' fullWidth>
        <Logo type='icon' color='full-white' />
        <Logo type='wordmark' color='full-white' />
        <Logo type='full' color='full-white' />
      </HStack>
    </div>
  </VStack>
);
```

### Sizes

`xs` to `2xl`, 10px to 32px of height. The three forms sit side by side because the same height buys three very different footprints — 34, 75 and 118 units of viewBox width.

```tsx
import { Logo } from '@wallarm-org/design-system/Logo';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <HStack gap={96} justify='between' fullWidth>
    <VStack gap={16} align='start'>
      <Logo type='icon' size='xs' />
      <Logo type='icon' size='sm' />
      <Logo type='icon' size='md' />
      <Logo type='icon' size='lg' />
      <Logo type='icon' size='xl' />
      <Logo type='icon' size='2xl' />
    </VStack>
    <VStack gap={16} align='start'>
      <Logo type='wordmark' size='xs' />
      <Logo type='wordmark' size='sm' />
      <Logo type='wordmark' size='md' />
      <Logo type='wordmark' size='lg' />
      <Logo type='wordmark' size='xl' />
      <Logo type='wordmark' size='2xl' />
    </VStack>
    <VStack gap={16} align='start'>
      <Logo type='full' size='xs' />
      <Logo type='full' size='sm' />
      <Logo type='full' size='md' />
      <Logo type='full' size='lg' />
      <Logo type='full' size='xl' />
      <Logo type='full' size='2xl' />
    </VStack>
  </HStack>
);
```

## Props

| Prop     | Type                                                                             | Default   | Description |
| -------- | -------------------------------------------------------------------------------- | --------- | ----------- |
| type     | `LogoType \| undefined`                                                          | `full`    |             |
| color    | `LogoStyle \| undefined`                                                         | `default` |             |
| id       | `string \| undefined`                                                            |           |             |
| tabIndex | `number \| undefined`                                                            |           |             |
| onChange | `ChangeEventHandler<T, Element> \| undefined`                                    |           |             |
| name     | `string \| undefined`                                                            |           |             |
| href     | `string \| undefined`                                                            |           |             |
| target   | `string \| undefined`                                                            |           |             |
| height   | `string \| number \| undefined`                                                  |           |             |
| width    | `string \| number \| undefined`                                                  |           |             |
| max      | `string \| number \| undefined`                                                  |           |             |
| min      | `string \| number \| undefined`                                                  |           |             |
| size     | `{ xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }` | `lg`      |             |