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

<Callout variant="tip">

You can find all available icons in the [Icons page](/tokens/icons).

</Callout>

## Import

```js
import { SvgIcon } from '@gemini-suite/vera-react';
```

## Examples

### Basic

Simply provide an `iconName` to render the desired icon from [our set](/tokens/icons#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>
```

### Color

By default, an Icon will inherit its color from the font color of its parent element.
You can override the color 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.

<Callout variant="tip">

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

</Callout>

```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"
/>
```

### 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](/get-started/composition#polymorphism) guide. |          |
| `css`         | `StitchesCss`                                             |         | Apply styles directly to a component in a similar way how you would define inline styles. Vera 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 color of the icon. Subset of foreground values from [color tokens](/tokens/colors) are available.                                                                                                                                                                                        |          |