> 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.

# WallyIcon

Wally, the mascot for Wallarm’s AI assistant — the mark that signals an AI surface rather than a general-purpose icon, so keep it for the assistant and reach for the icon set for everything else. `simple` is the bare mark and `circle` wraps it in its own badge so it can sit on a coloured surface; both are sized by height from 16px to 64px, with the width following.

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

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

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

## Usage

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

## Examples

### Styles

The two variants side by side. The badge is what lets the mark keep its edge on a coloured or busy surface; on a plain panel the bare mark is enough.

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

export const Styles = () => (
  <HStack gap={32} justify='around' align='start'>
    <VStack gap={8} align='center'>
      <WallyIcon variant='simple' />
    </VStack>
    <VStack gap={8} align='center'>
      <WallyIcon variant='circle' />
    </VStack>
  </HStack>
);
```

### Sizes

`xs` to `xl` in both variants. Worth reading down the columns to see where the detail in the bare mark gives out and the badge stops helping.

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

export const Sizes = () => (
  <HStack gap={48} justify='center' align='stretch'>
    <VStack gap={16} align='center'>
      <WallyIcon variant='simple' size='xs' />
      <WallyIcon variant='simple' size='sm' />
      <WallyIcon variant='simple' size='md' />
      <WallyIcon variant='simple' size='lg' />
      <WallyIcon variant='simple' size='xl' />
    </VStack>

    <VStack gap={16} align='center'>
      <WallyIcon variant='circle' size='xs' />
      <WallyIcon variant='circle' size='sm' />
      <WallyIcon variant='circle' size='md' />
      <WallyIcon variant='circle' size='lg' />
      <WallyIcon variant='circle' size='xl' />
    </VStack>
  </HStack>
);
```

## Props

| Prop     | Type                                                              | Default  | Description |
| -------- | ----------------------------------------------------------------- | -------- | ----------- |
| variant  | `WallyIconStyle \| undefined`                                     | `simple` |             |
| id       | `string \| undefined`                                             |          |             |
| tabIndex | `number \| undefined`                                             |          |             |
| onChange | `ChangeEventHandler<T, Element> \| undefined`                     |          |             |
| type     | `string \| 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; }` | `md`     |             |