# Logo
> Logo is a component for visual representation of the brand.

## Import

```js
import { Logo } from '@volue/wave-react';
```

## Examples

### Icon

An icon is a symbol that represents a brand, but does not contain the name of the brand.

```jsx
<Logo label="Volue symbol" />
```

### Wordmark

A wordmark is a brand name styled as a logo, with a nine-faceted circle as the 'O'.

```jsx
<Logo variant="wordmark" label="Volue logo" />
```

### Sizes

Logo comes in two sizes, with the `medium` size used by default. `small` size can be used in cases when there is limited space available or when rendering more compact layouts.

```jsx
<Flex flow="column">
  <Flex gap="spacingL" wrap="wrap">
    <Logo />
    <Logo size="small" />
  </Flex>
  <Flex gap="spacingL" wrap="wrap">
    <Logo variant="wordmark" />
    <Logo size="small" variant="wordmark" />
  </Flex>
</Flex>
```

### Responsive

Logo supports responsive syntax for `variant` and `size` property, which means you can change its size based on the viewport.

```jsx
<Logo
  variant={{
    '@initial': 'icon',
    '@mqLargeAndUp': 'wordmark'
  }}
  size={{
    '@initial': 'small',
    '@mqLargeAndUp': 'medium'
  }}
/>
```

### With product name

To display a logo alongside a product name in your application, use the built-in logo sub-components provided by [App Header](https://next.wave-design-system.pages.dev/components/app-header.md), [App Bar](https://next.wave-design-system.pages.dev/components/app-bar.md), or [Sidebar Navigation](https://next.wave-design-system.pages.dev/components/sidebar-navigation.md). These handle sizing, styling, and layout automatically.

---

## API reference

| Name      | Type                                                      | Default    | Description                                                                                                                                                                                                                                                                                                                              | Required |
| --------- | --------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`      | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`      | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](https://next.wave-design-system.pages.dev/get-started/composition.md#polymorphism) guide. |          |
| `css`     | `StitchesCss`                                             |            | Apply styles directly to a component in a similar way how you would define inline styles. Wave uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                                                             |          |
| `label`   | `string`                                                  |            | The `aria-label` of the Logo element to use for screen readers.                                                                                                                                                                                                                                                                          |          |
| `variant` | `"wordmark" \| "icon"`                                    | `"icon"`   | Visual variant of the logo.                                                                                                                                                                                                                                                                                                              |          |
| `size`    | `"small" \| "medium"`                                     | `"medium"` | The size of the logo.                                                                                                                                                                                                                                                                                                                    |          |