Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch - Theme Toggle with Icons
A React switch toggle with sun and moon icons on either side for theme switching between light and dark modes
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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