Shadcn.io is not affiliated with official shadcn/ui
Square Theme Toggle
Square switch toggle with moon and sun icons for dark/light theme switching with compact minimal design built with shadcn/ui and Lucide icons
Theme toggles need instant recognition—moon and sun are universal. This React square switch combines shadcn/ui Switch with Lucide React's MoonIcon and SunIcon flanking sides, controlled state, and compact squared styling with gap-2 spacing. Built with Radix UI primitives and size-4 icons, the icon-based theme toggle provides visual affordance without text—perfect for navigation bars, headers, settings panels, app toolbars, or any interface where theme switching needs compact recognizable controls that communicate dark/light modes through culturally universal sun/moon metaphors requiring no translation or explanation.
Square Theme Toggle preview
Installation
Related Components
Square Switch
Basic square switch without icons
Square Switch with Text
Square toggle with ON/OFF labels
Square Switch with Label
Square switch with external label
Icon Button
Button with icon only
Standard Switch
Default rounded switch
Dropdown Menu
Menu for theme selection
FAQ
Was this page helpful?
Sign in to leave feedback.