SVG with Tailwind CSS
Tailwind's utility classes work seamlessly with inline SVG — color, size, and animate SVG with the same classes you use everywhere else.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Coloring SVG Icons with Tailwind
Set fill='currentColor' on SVG paths, then control color with Tailwind text utilities.
- SVG path: fill='currentColor' or stroke='currentColor'
- Tailwind: <svg class='text-blue-500'>...</svg>
- SVG inherits parent's color: class='text-gray-900 hover:text-blue-500' for hover color change
- Dark mode: dark:text-white — SVG automatically follows the theme
- Don't use Tailwind fill-* utilities unless you need SVG fill independent of text color
Sizing SVG with Tailwind
Use Tailwind's sizing utilities for consistent SVG dimensions.
- Size: class='size-6' (sets both width and height to 1.5rem)
- Or: class='w-6 h-6' — explicit width and height
- Responsive: class='w-4 h-4 md:w-6 md:h-6' for adaptive icon sizes
- Full width: class='w-full' — SVG fills its container (viewBox controls aspect ratio)
Heroicons — Tailwind's Native SVG Icon Set
Heroicons is made by the Tailwind team — perfect Tailwind-compatible SVG icons.
- npm install @heroicons/react (React) or @heroicons/vue
- Each icon is a pre-built component: <ChevronRightIcon class='size-5 text-gray-500' />
- Outline and solid variants available
- All icons use currentColor — style with Tailwind text utilities
- 300+ icons covering all common UI needs
Frequently Asked Questions
What's the difference between fill-* and text-* for SVG in Tailwind?
text-blue-500 sets the CSS color property (currentColor). fill-blue-500 sets SVG fill directly. Use text-* with fill='currentColor' for the most flexible and theme-compatible approach.
How do I animate an SVG icon with Tailwind?
Use Tailwind's animation utilities: animate-spin (for loading spinners), animate-pulse, animate-bounce. For custom SVG animations, add a custom keyframe in tailwind.config.js.
Can I use Tailwind for SVG background patterns?
Yes — with Tailwind's arbitrary values: bg-[url('/pattern.svg')]. Or use tailwindcss-bg-patterns plugin for pre-built SVG patterns.
How do I style SVG strokes with Tailwind?
Set stroke='currentColor' on the SVG element. Use stroke-2 class for Tailwind's stroke-width utilities (requires Tailwind v3.3+ or the tailwind-stroke plugin for earlier versions).
Do Heroicons work with Tailwind v4?
Yes — Heroicons use currentColor and standard CSS sizing, fully compatible with Tailwind v4's CSS-first token system.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free