Speaker Mute icon
Used in volume & various audio setting scenarios. The Speaker Mute icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Speaker Mute icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { SpeakerMute24Regular, SpeakerMute24Filled } from "@fluentui/react-icons";
export function Example() {
return <SpeakerMute24Regular aria-label="Speaker Mute" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_speaker_mute_24_regular.svg" width="24" height="24" alt="Speaker Mute"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9195 3.31534C13.7255 2.59866 15 3.17089 15 4.24951V19.7451C15 20.8238 13.7255 21.396 12.9194 20.6792L8.42793 16.6855C8.29063 16.5634 8.11329 16.496 7.92956 16.496H4.25C3.00736 16.496 2 15.4886 2 14.246V9.7481C2 8.50546 3.00736 7.4981 4.25 7.4981H7.92961C8.11333 7.4981 8.29065 7.43067 8.42794 7.30861L12.9195 3.31534ZM13.5 4.8063L9.4246 8.42962C9.01272 8.79581 8.48075 8.9981 7.92961 8.9981H4.25C3.83579 8.9981 3.5 9.33388 3.5 9.7481V14.246C3.5 14.6602 3.83579 14.996 4.25 14.996H7.92956C8.48074 14.996 9.01275 15.1983 9.42465 15.5646L13.5 19.1883V4.8063ZM16.2197 9.2192C16.5126 8.9263 16.9874 8.9263 17.2803 9.2192L19 10.9389L20.7197 9.2192C21.0126 8.9263 21.4874 8.9263 21.7803 9.2192C22.0732 9.51209 22.0732 9.98696 21.7803 10.2799L20.0607 11.9995L21.7803 13.7192C22.0732 14.0121 22.0732 14.487 21.7803 14.7799C21.4874 15.0728 21.0126 15.0728 20.7197 14.7799L19 13.0602L17.2803 14.7799C16.9874 15.0728 16.5126 15.0728 16.2197 14.7799C15.9268 14.487 15.9268 14.0121 16.2197 13.7192L17.9393 11.9995L16.2197 10.2799C15.9268 9.98696 15.9268 9.51209 16.2197 9.2192Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/speaker_mute_24_regular.svg";Details
| Name | Speaker Mute |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_speaker_mute_24_regular.svg |
| Filled file | ic_fluent_speaker_mute_24_filled.svg |
| React components | SpeakerMute24Regular, SpeakerMute24Filled |
| License | MIT (© Microsoft Corporation) |