How to Use the SVG currentColor Trick
Make icons inherit text color automatically with fill='currentColor' for effortless theming.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How currentColor Works
Setting fill='currentColor' (or stroke) on an SVG makes it use the CSS color value of its parent. Change the text color on hover, dark mode, or per section, and the icon follows — no separate icon styling needed.
- Set fill='currentColor' to inherit CSS color
- Icons recolor automatically on hover and dark mode
- One icon works across every theme
Applying It Cleanly
Convert your icons to SVG, strip hardcoded fills, and replace them with currentColor. Then control color entirely from CSS for consistent, maintainable theming.
- Remove hardcoded fills from the SVG
- Replace with currentColor for inheritance
- Control all icon color from CSS variables
Frequently Asked Questions
Does currentColor work for both fill and stroke?
Yes — set fill='currentColor' and/or stroke='currentColor' and both inherit the parent element's CSS color value.
Can I use currentColor with multi-color icons?
currentColor handles single-color icons elegantly; for multi-color icons, keep some fills fixed and use currentColor only for the parts that should follow text color.
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