SVG Color Modes: fill, stroke, and currentColor
SVG has five ways to define color — here's exactly how each works and which to use for icons, illustrations, and theme-aware graphics.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
fill and stroke Attributes
The two most common SVG color attributes.
- fill='#4F46E5': sets interior color with a hex value
- fill='none': transparent interior — shows background through
- stroke='black' stroke-width='2': adds a border line
- fill-opacity='0.5': semi-transparent fill (0 to 1)
- stroke-opacity and fill-rule are additional control properties
currentColor — The Most Flexible Approach
currentColor makes SVG inherit the CSS text color of its parent element.
- SVG: fill='currentColor' or stroke='currentColor'
- CSS: .icon { color: blue; } — SVG icon inherits blue
- This lets you change icon color with CSS color property alone
- Dark mode: html[data-theme='dark'] .icon { color: white; }
- Tailwind: class='text-blue-500' on the SVG element — currentColor paths turn blue
CSS Custom Properties in SVG
Use CSS variables for dynamic, themeable SVG colors.
- SVG: fill='var(--icon-color, black)' — default value in parentheses
- CSS: :root { --icon-color: #4F46E5; }
- Dark mode: @media (prefers-color-scheme: dark) { :root { --icon-color: #818CF8; } }
- Per-component override: <svg style='--icon-color: red'>...</svg>
- Only works for inline SVG — not SVG in <img> tags
Frequently Asked Questions
What's the difference between fill='none' and fill='transparent'?
Both produce transparent fills, but they differ for pointer events. fill='none' makes the element non-clickable in its interior. fill='transparent' makes it clickable. Use fill='transparent' if you need to capture click events on the transparent area.
How do I use multiple colors in one SVG icon?
Assign different fill colors to different paths in the SVG: <path fill='blue'/><path fill='white'/>. For props-controlled multi-color: use different CSS custom properties for each colored region.
Can I use CSS gradient as an SVG fill?
Yes — define the gradient in SVG <defs> as linearGradient or radialGradient, then use fill='url(#myGradient)'. CSS background gradients (linear-gradient()) can't be used as SVG fill.
What does fill='inherit' do in SVG?
fill='inherit' explicitly inherits the fill from the parent element, similar to CSS inheritance. It's rarely needed — most SVG properties inherit automatically.
How do I change an SVG icon color on hover with CSS?
Use currentColor: set fill='currentColor' in SVG. In CSS: .icon:hover { color: #4F46E5; }. The icon fill changes on hover.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG