Shadcn.io is not affiliated with official shadcn/ui
Theme Toggle with Icons
A React switch toggle with sun and moon icons on either side for theme switching between light and dark modes
Dark mode or light mode—why make users hunt through menus? This React theme toggle shows SunIcon and MoonIcon flanking the Switch. Built with shadcn/ui Switch and Lucide React icons, the visual cues make the choice obvious—perfect for theme toggles, appearance settings, day-night modes, accessibility preferences, or any on-off control where icons beside the switch reinforce what each state represents and users instantly recognize sun equals light and moon equals dark without reading labels.
Theme Toggle with Icons preview
Installation
Related Components
Icon with Label
Switch with icon and text label
Volume Toggle
Switch with volume on/off icons
Basic Switch
Switch without icons
Switch with Label
Switch with text label
Theme Toggle Button
Button-based theme switcher
Settings Panel
Settings with multiple switches
FAQ
Was this page helpful?
Sign in to leave feedback.