How to Build a Dark/Light Toggle Icon with SVG
Animate a sun-to-moon SVG icon as a theme toggle for dark and light mode.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Designing the Icon States
A common pattern uses one SVG with sun rays and a moon crescent as separate paths, toggling their visibility, rotation, or stroke-dasharray to morph between states when the theme switches.
- Keep sun and moon as separate path groups
- Toggle visibility/transform on theme change
- Animate rotation or scale for a smooth morph
Wiring It to Theme Logic
Bind the icon's active state to your theme variable (often a CSS class on <html> or a JS state value), and use currentColor so the icon's fill follows the active theme palette automatically.
- Bind icon state to your theme toggle variable
- Use currentColor for automatic theme-matched fill
- Persist the user's choice (localStorage) for repeat visits
Frequently Asked Questions
How do I animate the sun-to-moon morph smoothly?
Use CSS transitions on transform and opacity for the ray and crescent path groups, toggling a class that drives both based on the active theme.
Should the toggle icon use currentColor?
Yes — currentColor lets the icon automatically pick up the correct color for the active light or dark theme without separate icon variants.
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