# SVG Icon
> Icons provide visual context to represent actions. The Icon component is a helper wrapping SVG icons.

> **Tip**
>
> You can find all available icons in the [Icons page](https://next.wave-design-system.pages.dev/tokens/icons.md).

## Import

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

## Examples

### Basic

Simply provide an `iconName` to render the desired icon from [our set](https://next.wave-design-system.pages.dev/tokens/icons.md#browse-icons).

```jsx
<Flex gap="spacingL">
  <SvgIcon iconName="camera" />
  <SvgIcon iconName="activity" />
  <SvgIcon iconName="chevronRight" />
</Flex>
```

### Sizes

By default an Icon will inherit its size from the parent element's text size.
Use `size` prop to pick one of the predefined sizes: `small`, `medium`, `large`, and `xLarge`

```jsx
<Flex gap="spacingL">
  <SvgIcon iconName="camera" size="small" />
  <SvgIcon iconName="camera" size="medium" />
  <SvgIcon iconName="camera" size="large" />
  <SvgIcon iconName="camera" size="xLarge" />
</Flex>
```

### Colour

By default, an Icon will inherit its colour from the font colour of its parent element.
You can override the colour by using the `color` prop as shown below.

```jsx
<Flex gap="spacingL">
  <Box css={{ color: '$foregroundInfoModerate' }}>
    <SvgIcon iconName="box" size="large" />
  </Box>
  <SvgIcon iconName="box" size="large" color="foregroundSuccessModerate" />
</Flex>
```

### Stroke thickness

You can control the thickness of the icon stroke using `strokeWidth` props. In certain context you may want the icons to appear either thinner or thicker.

```jsx
<Flex gap="spacingL">
  <SvgIcon iconName="help" size="medium" strokeWidth={1} />
  <SvgIcon iconName="help" size="medium" />
  <SvgIcon iconName="help" size="medium" strokeWidth={3} />
</Flex>
```

### Custom icons

You can also display your custom SVG icon. Leave out the `iconName` prop and send in the path to your SVG icon in the `pathData` prop.

> **Tip**
>
> You need to use a square icon (e.g. 24x24) for the styling to work properly. Size can be customised using `svgSize` prop.

```jsx
<SvgIcon
  pathData="M27.7 16.438c.247.535 2.762 5.678.61 5.267-2.153-.411-5.343-6.679-4.94-10.458 0 0-4.072 3.04-3.321 7.51.749 4.471 1.816 7.771-1.007 7.661-2.823-.109-1.213-3.558-.624-5.208-4.709 2.791-4.003 7.464-3.774 9.005.191 1.285.786 4.286 4 5.5 4.9 1.075 6.821-7.039 6.654-9.761 1.333 1.576 2.2 3.788 2.019 5.246-.352 2.857-2.752 5.119-.45 4.867 3.477-.381 6.036-2.061 6.991-6.352 1.041-4.678-.143-10.429-6.158-13.277z"
  svgSize="48"
  size="xLarge"
  color="foregroundDangerSubtle"
/>
```

### Framed

Wrap the icon in [Icon Frame](https://next.wave-design-system.pages.dev/components/icon-frame.md) to give it a themed circular or square background — useful for status indicators, empty states, or decorative emphasis.

```jsx
<IconFrame variant="subtle" color="success">
  <SvgIcon iconName="validation" />
</IconFrame>
```

### Accessibility

If your icon is not purely decorative, you may want to provide `title` prop, so screen readers can give meaning to the icon.

```jsx
<SvgIcon title="QR code icon" iconName="qrcode" size="medium" />
```

---

## 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.                                                                                             |          |
| `iconName`    | `IconToken`                                               |         | The name of the icon to display.                                                                                                                                                                                                                                                                                                         |          |
| `size`        | `"small" \| "medium" \| "large" \| "xLarge"`              |         | The size of the icon.                                                                                                                                                                                                                                                                                                                    |          |
| `pathData`    | `string \| string[]`                                      |         | Path of a custom SVG to display.                                                                                                                                                                                                                                                                                                         |          |
| `svgSize`     | `number`                                                  |         | The size of the visible area of the icon, called `viewBox`. Expands to `0 0 ${svgSize} ${svgSize}` which is a square.                                                                                                                                                                                                                    |          |
| `strokeWidth` | `number`                                                  |         | Width of the stroke to be applied to the icon shape.                                                                                                                                                                                                                                                                                     |          |
| `title`       | `string`                                                  |         | Title to associate with the icon, so that assistive technologies can describe the SVG content.                                                                                                                                                                                                                                           |          |
| `color`       | `ColorToken`                                              |         | The colour of the icon. Subset of foreground values from [colour tokens](https://next.wave-design-system.pages.dev/tokens/colors.md) are available.                                                                                                                                                                                      |          |