---
title: SVG
description: JSX style props for SVG elements.
---

## Fill

Use the `fill` prop to set the fill color of an SVG element.

```jsx
<chakra.svg fill="blue.500">
  <path d="..." />
</chakra.svg>
```

| Prop   | CSS Property | Token Category |
| ------ | ------------ | -------------- |
| `fill` | `fill`       | `colors`       |

## Stroke

Use the `stroke` prop to set the stroke color of an SVG element.

```jsx
<chakra.svg stroke="blue.500">
  <path d="..." />
</chakra.svg>
```

| Prop     | CSS Property | Token Category |
| -------- | ------------ | -------------- |
| `stroke` | `stroke`     | `colors`       |

## Stroke Width

Use the `strokeWidth` prop to set the stroke width of an SVG element.

```jsx
<chakra.svg strokeWidth="1px">
  <path d="..." />
</chakra.svg>
```

| Prop          | CSS Property   | Token Category |
| ------------- | -------------- | -------------- |
| `strokeWidth` | `stroke-width` | `borderWidths` |
