Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch - Icon with Label
A React switch with bell icon and text label showing notification setting with icon-label-switch horizontal layout
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Settings lists can feel bland—icons add personality and scannability. This React switch combines BellIcon with Notifications label. Built with shadcn/ui Switch, Label, and Lucide React icons, the icon reinforces what the setting controls—perfect for notification toggles, feature settings, preference panels, settings lists, configuration screens, or any switch where an icon beside the label helps users quickly scan and identify settings in long lists without reading every label.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Theme Toggle with Icons
Switch with icons on both sides
Volume Toggle
Switch with volume icons
Switch with Label
Switch with label only
Basic Switch
Switch without label
Settings Panel
Panel with multiple switches
Settings Form
Form with settings controls