The Lucide sun moon icon depicts a transition between day and night, commonly used to represent theme switching between light and dark modes in user interfaces.
Common uses
- Theme toggle button (light/dark/system)
- Setting for appearance preferences
- Indicator for current display mode
Use it in React
Install
npm i lucide-reactImport & render
import { SunMoon } from 'lucide-react';
<SunMoon size={24} />Details
- Library
- Lucide (1,713 icons)
- License
- ISC
- viewBox
0 0 24 24- Keywords
- darklightmoonsunbrightnessthemeauto themesystem themeappearancetheme switcherdark modelight mode
FAQ
- What is the sun moon icon used for?
- It's primarily used to indicate or control the switching between light and dark themes in an application's user interface.
- How do I use the sun moon icon in React?
- You can import it directly from the lucide-react library using: `import { SunMoon } from 'lucide-react'`.
- What is the license for the Lucide sun moon icon?
- The Lucide icon library, including the sun moon icon, is available under the ISC license.
Related icons
The same idea in other libraries, and near matches in Lucide.
Looking for something else? Search Lucide and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →