tailwindcss/docs/source/docs/svg.blade.md

extends	title	description
_layouts.documentation	SVG	Utilities for styling SVG elements.

@include('_partials.class-table', [ 'rows' => [ [ '.fill-current', 'fill: currentColor;', 'Set the fill color to the current text color.', ], [ '.stroke-current', 'stroke: currentColor;', 'Set the stroke color to the current text color.', ], ] ])

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.

@component('_partials.code-sample', ['class' => 'text-center']) @endcomponent

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.

@component('_partials.code-sample', ['class' => 'text-center']) @endcomponent

Sizing

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

@component('_partials.code-sample', ['class' => 'flex justify-around items-end']) @endcomponent

---

Customizing

Fill colors

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

@component('_partials.customized-config', ['key' => 'svgFill'])

• 'current': 'currentColor',

• 'red': colors['red'],
• 'blue': colors['blue'],
• 'green': colors['green'], @endcomponent

Stroke colors

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

@component('_partials.customized-config', ['key' => 'svgStroke'])

• 'current': 'currentColor',

• 'red': colors['red'],
• 'blue': colors['blue'],
• 'green': colors['green'], @endcomponent

Responsive, Hover, and Focus Variants

By default, no responsive, hover, focus, 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,
    }
}