Speaker Off icon
Used in volume & various audio setting scenarios. The Speaker Off 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 Off 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 { SpeakerOff24Regular, SpeakerOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <SpeakerOff24Regular aria-label="Speaker Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_speaker_off_24_regular.svg" width="24" height="24" alt="Speaker Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L6.43782 7.49856H4.25C3.00736 7.49856 2 8.50592 2 9.74856V14.2465C2 15.4891 3.00736 16.4965 4.25 16.4965H7.92956C8.11329 16.4965 8.29063 16.5639 8.42793 16.686L12.9194 20.6797C13.7255 21.3965 15 20.8242 15 19.7456V16.0609L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM13.5 14.5609V19.1888L9.42465 15.565C9.01275 15.1988 8.48074 14.9965 7.92956 14.9965H4.25C3.83579 14.9965 3.5 14.6607 3.5 14.2465V9.74856C3.5 9.33435 3.83579 8.99856 4.25 8.99856H7.92961C7.93233 8.99856 7.93505 8.99856 7.93777 8.99855L13.5 14.5609ZM13.5 4.80677V10.3182L15 11.8182V4.24998C15 3.17136 13.7255 2.59913 12.9195 3.3158L9.52003 6.33813L10.5825 7.40062L13.5 4.80677ZM17.141 13.9592L18.279 15.0973C18.7408 14.1628 19 13.1107 19 12C19 10.7968 18.6958 9.66243 18.1596 8.67182C17.9624 8.30755 17.5072 8.17211 17.143 8.36931C16.7787 8.5665 16.6432 9.02165 16.8404 9.38591C17.2609 10.1627 17.5 11.0523 17.5 12C17.5 12.691 17.3729 13.3512 17.141 13.9592ZM19.3881 16.2064L20.4815 17.2998C21.4437 15.7631 22 13.9457 22 12C22 9.77388 21.2717 7.71568 20.0407 6.0536C19.7941 5.72075 19.3244 5.65077 18.9916 5.89731C18.6587 6.14384 18.5888 6.61353 18.8353 6.94639C19.8815 8.35894 20.5 10.1062 20.5 12C20.5 13.5311 20.0958 14.9663 19.3881 16.2064Z" 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_off_24_regular.svg";Details
| Name | Speaker Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_speaker_off_24_regular.svg |
| Filled file | ic_fluent_speaker_off_24_filled.svg |
| React components | SpeakerOff24Regular, SpeakerOff24Filled |
| License | MIT (© Microsoft Corporation) |