Shadcn.io is not affiliated with official shadcn/ui
Icon with Label
A React switch with bell icon and text label showing notification setting with icon-label-switch horizontal layout
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.
Icon with Label preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.