SVG

JSX style props for SVG elements.

AI TipWant to skip the docs? Use the MCP Server

Fill

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

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

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

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

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

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

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

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

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