Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

SVG

JSX style props for SVG elements.

Fill

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

<chakra.svg fill="blue.500">
  <path d="..." />
</chakra.svg>
PropCSS PropertyToken Category
fillfillcolors

Stroke

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

<chakra.svg stroke="blue.500">
  <path d="..." />
</chakra.svg>
PropCSS PropertyToken Category
strokestrokecolors

Stroke Width

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

<chakra.svg strokeWidth="1px">
  <path d="..." />
</chakra.svg>
PropCSS PropertyToken Category
strokeWidthstroke-widthborderWidths

Previous

Spacing

Next

Tables