stroke

Setting the outline color of an SVG shape.

Overview

Examples

Set SVG stroke color

Use stroke:* to set the stroke paint for SVG shapes.

<svg class="stroke:current" viewBox="0 0 16 16" aria-hidden="true">    <path d="M2 8h12" /></svg>

@layer utilities {    .stroke\:current {        stroke: currentColor    }}

Use theme colors

Use color tokens when icon strokes should follow the interface palette.

<svg class="stroke:blue-60" aria-hidden="true"></svg>

Use stroke-width for line thickness.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<svg class="stroke:current stroke:blue-60:hover stroke:current@print">...</svg>