HTML + CSSToggles
Sound on and off toggle
The speaker sends out pulsing waves when sound is on and gets crossed out when muted.
Settings
16px
1x
Code
<label class="uv-tsd"><input type="checkbox" role="switch"><span class="tr"><span class="kn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9.5h3l4.5-4v13l-4.5-4H4z" fill="currentColor"/><path class="w1" d="M15 9.5a3.5 3.5 0 0 1 0 5"/><path class="w2" d="M17.5 7a7 7 0 0 1 0 10"/><path class="sl" d="M3 3l18 18" pathLength="1"/></svg></span></span>Sound</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toggles
See all TogglesWhere to use it
Mute buttons are everywhere, from video players to games and meeting tools, and the icon has to make the state obvious at a glance. Here the knob holds a speaker: off, a red line crosses it; on, the line retracts and two sound waves appear and pulse gently while the track turns green.
Use it for notification sounds, autoplay video, game audio or a podcast player. The label stays visible next to the switch, so the meaning never depends on the icon alone, and the pulsing stops with reduced motion.