Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch - Volume Toggle
A React switch toggle with mute and volume icons on either side for audio on-off control with defaultChecked state
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Mute or sound—audio toggles need instant clarity. This React volume toggle shows VolumeXIcon and Volume2Icon flanking the Switch. Built with shadcn/ui Switch and Lucide React icons, the mute-sound icons make audio state obvious—perfect for volume toggles, audio settings, video player controls, notification sounds, app sound effects, or any audio on-off switch where icons beside the toggle clearly show muted versus unmuted states and users understand X means silent and speaker means sound without text labels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Theme Toggle with Icons
Switch with sun/moon icons
Icon with Label
Switch with icon and label
Basic Switch
Switch without icons
Volume Control
Slider-based volume control
Icon Button
Icon-only button
Switch with Label
Switch with text label