Class reference

Fill color

Use .fill-current to set the fill color of an SVG to the current text color. This makes it easy to set an element’s fill color by combining this class with an existing text color utility.

Useful for styling icon sets like Zondicons that are drawn entirely with fills.

Stroke color

Use .stroke-current to set the stroke color of an SVG to the current text color. This makes it easy to set an element’s stroke color by combining this class with an existing text color utility.

Useful for styling icon sets like Feather that are drawn entirely with strokes.

Sizing

Tailwind doesn’t provide SVG-specific sizing utilities, but sizing SVGs is a perfect use case for the existing width and height utilities.

Customizing

Fill colors

Control which fill utilities Tailwind generates by customizing the svgFill key in your Tailwind config file:

Stroke colors

Control which stroke utilities Tailwind generates by customizing the svgStroke key in your Tailwind config file:

Responsive and State Variants

By default, no responsive, hover, focus, active, or group-hover variants are generated for fill and stroke utilities.

You can control which variants are generated for both fill and stroke utilities by modifying the svgFill and svgStroke properties in the modules section of your Tailwind config file.

For example, this config will generate responsive and hover variants of the fill utilities and focus variants of the stroke utilities:

{
    // ...
    modules: {
        // ...
        svgFill: ['responsive', 'hover'],
        svgStroke: ['focus'],
    }
}

Disabling

If you aren’t using the fill or stroke utilities in your project, you can disable them entirely by setting the svgFill and svgStroke properties to false in the modules section of your config file:

{
    // ...
    modules: {
        // ...
        svgFill: false,
        svgStroke: false,
    }
}