SVG & Fills

SVG & Fills

Style inline SVGs with fill, stroke, and sizing utilities.

Sizing

The size-* utilities are ideal for SVG icons:

<svg class="size-6" ...>...</svg>

Fill

fill-<color> sets the fill property:

<svg class="fill-sky-500" ...>...</svg>

• fill-none, fill-current (currentColor).
• Any theme color: fill-red-500, fill-gray-900.

Stroke

stroke-<color> sets the stroke color:

<svg class="stroke-sky-500" ...>...</svg>

• stroke-none, stroke-current.

Stroke width

stroke-<n>:

<svg class="stroke-2" ...>...</svg>

Using currentColor

Set the icon color from the parent text color:

<button class="text-gray-500 hover:text-gray-700">
  <svg class="size-5 fill-current">...</svg>
</button>

Now the icon inherits the button's text color.

TL;DR

• size-6 sizes SVG icons.
• fill-sky-500 / stroke-sky-500 color paths.
• fill-current / stroke-current inherit text color.
• stroke-2 sets stroke width.