Tailwind SVG: How to Use, Color and Size SVGs in Tailwind CSS

Tailwind doesn’t have a special “SVG mode”. An SVG is either part of your HTML (inline), a separate file (an <img>), or a picture painted by CSS (a background or mask). Which one you pick decides what Tailwind classes can do to it — and most “my SVG won’t change color” problems come from picking the wrong one.

The three ways to use SVG in Tailwind

Inline SVG icons with fill-current

Inline SVG is the most flexible option. Paste the markup into your HTML or component and replace any hard-coded colors with currentColor. The icon then uses the element’s text color, so every Tailwind color, hover and dark mode class just works:

<button class="text-slate-600 hover:text-indigo-600 dark:text-slate-300">
  <svg class="size-5" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M5 12l5 5L20 7" />
  </svg>
  Save
</button>

If you can’t edit the SVG, the fill-current and stroke-current classes do the same job from the outside — but only if the paths themselves don’t set their own fill. A fill="#000" written on a <path> beats a class on the <svg>, so strip those first. Icons from an AI tool or an auto-tracer often carry dozens of these; run them through the SVG Optimizer to clean them up, or recolor them visually with the SVG Color Changer.

Sizing SVGs: viewBox, w-*, h-* and size-*

An SVG scales cleanly when it has a viewBox and no fixed width/height attributes. Then Tailwind sizes it like any element:

• w-6 h-6 — works in every Tailwind version.
• size-6 — the shorter form, available from Tailwind v3.4.
• w-full h-auto — for illustrations that should fill their container.
• shrink-0 — stops icons squashing inside flex rows next to long text.

If an icon renders at 300×150 px or ignores your classes, it’s almost always missing a viewBox, or has width and height attributes left over from the design tool.

SVG as a background image

For patterns, wavy dividers and decorative blobs, a background keeps the HTML clean. Point to a file:

<section class="bg-[url(/img/dots.svg)] bg-repeat bg-[length:24px_24px]">…</section>

…or embed the SVG as a data URI so there’s no extra request. This is where most people get stuck: the SVG has to be percent-encoded, and because a Tailwind class can’t contain spaces, every space must be encoded too. An unencoded # in a color ends the URL, and a stray quote or ] closes the class early — the background silently disappears.

<div class="bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Ccircle%20cx=%225%22%20cy=%225%22%20r=%221%22%20fill=%22%23cbd5e1%22/%3E%3C/svg%3E')]">
</div>

Encoding that by hand is tedious and easy to break. Paste your SVG into the Tailwind SVG Encoder and it outputs a class that’s been compiled by the real Tailwind v3 and v4 engines, with a live preview.

Background SVGs can’t follow your text color — the colors are fixed inside the image. If you need that, use a mask.

Color-changing icons with a CSS mask

A mask uses the SVG only as a shape and fills it with the element’s background color. Combine it with bg-current and the icon follows text-* classes, without any inline markup:

<span class="inline-block size-5 bg-current text-emerald-600
  [mask:url('data:image/svg+xml,…')_no-repeat_center/contain]"></span>

This is handy for icon sets you use dozens of times, CMS content where you can’t paste SVG markup, and pseudo-elements like before:. It’s limited to one color per icon.

Reusable SVG utilities in Tailwind v3 and v4

Long data URIs in your markup are hard to read. Give them a name instead.

Tailwind v4 — define a utility in your CSS:

@utility bg-wave {
  background-image: url('data:image/svg+xml,…');
}
@utility icon-check {
  mask: url('data:image/svg+xml,…') no-repeat center / contain;
  background-color: currentColor;
}

Tailwind v3 — extend the theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        wave: "url('data:image/svg+xml,…')",
      },
    },
  },
};

Now you write bg-wave everywhere. Both snippets can be copied ready-made from the encoder.

SVG in React and other frameworks

In JSX, attributes are camelCased: stroke-width becomes strokeWidth, class becomes className. Make the icon a small component that accepts a className so the color and size come from Tailwind at the call site:

export function CheckIcon({ className = "size-5" }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={2} aria-hidden="true">
      <path d="M5 12l5 5L20 7" />
    </svg>
  );
}

<CheckIcon className="size-4 text-green-600" />

More on this in our guide to using SVG files in Figma, Webflow and React.

Common mistakes (and fixes)

• Color classes do nothing — the paths have their own fill/stroke. Set them to currentColor.
• Icon is huge or tiny — missing viewBox, or leftover width/height attributes.
• Background class has no effect — an unencoded space, #, quote or bracket in the data URI. Re-encode it.
• Icon squashed in a flex row — add shrink-0.
• Screen readers read the icon — decorative icons get aria-hidden="true"; icon-only buttons need an aria-label.
• Heavy SVGs — exported SVGs often contain metadata and long decimals. Optimize them before inlining.

Frequently asked questions

How do I change the color of an SVG in Tailwind?

Inline the SVG and replace its hard-coded colors with currentColor (fill="currentColor" or stroke="currentColor"), or add the fill-current / stroke-current class. The icon then follows the text color, so text-red-500, hover:text-blue-600 and dark:text-white all work.

Why doesn’t text-red-500 change my SVG color?

The SVG still has its own fill or stroke color written on the paths, which wins over the inherited color. Remove those attributes or set them to currentColor. If the SVG is loaded with an img tag or as a background image, CSS can’t reach inside it at all — inline it or use a mask instead.

How do I size an SVG in Tailwind?

Give it width and height classes such as w-6 h-6, or size-6 in Tailwind v3.4 and later. Keep the viewBox attribute on the svg and remove fixed width and height attributes so it scales cleanly.

Can I use an SVG as a background image in Tailwind?

Yes, with an arbitrary value: bg-[url('data:image/svg+xml,...')] or bg-[url(/img/pattern.svg)] for a file. A data URI must be percent-encoded, and spaces must be encoded too because Tailwind class names cannot contain spaces.

Why is my SVG data URI not working in Tailwind?

Usually because of an unencoded character: a space splits the class in two, # starts a URL fragment, and quotes or brackets end the value early. Encode the SVG properly — our free Tailwind SVG Encoder does this and checks the class compiles.

Should I use inline SVG or an img tag in Tailwind?

Inline SVG for icons that need to change color or animate. An img tag for larger illustrations and logos that never change color — it keeps your HTML small and the browser can cache the file.

How do I add a custom SVG icon class in Tailwind v4?

Define a utility in your CSS with @utility, for example @utility icon-check { mask: url('data:image/svg+xml,...') no-repeat center / contain; background-color: currentColor; }. In Tailwind v3 you extend backgroundImage in tailwind.config.js instead.