Fluent Icons

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 regular and filled styles in 5 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_speaker_off_24_regular.svg

Speaker Off icon in React

npm install @fluentui/react-icons

import { SpeakerOff24Regular } from "@fluentui/react-icons";

export function Example() {
  return <SpeakerOff24Regular aria-label="Speaker Off" />;
}

Speaker Off icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/speaker_off_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/speaker_off_24_regular.svg" width="24" height="24" alt="Speaker Off">

Speaker Off icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.SpeakerOff())" />

Speaker Off icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.speaker_off_24_regular)

Speaker Off icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF706;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF706;" FontSize="24" />

Speaker Off icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_speaker_off_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f706";
  font-size: 24px;
}

Speaker Off icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_speaker_off_24_regular" />

// Kotlin
R.drawable.ic_fluent_speaker_off_24_regular

Speaker Off icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .speakerOff24Regular)

Speaker Off icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameSpeaker Off
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 48 px
Regular (outlined) fileic_fluent_speaker_off_24_regular.svg
Filled fileic_fluent_speaker_off_24_filled.svg
React (Regular)SpeakerOff16Regular, SpeakerOff20Regular, SpeakerOff24Regular, SpeakerOff28Regular, SpeakerOff48Regular
React (Filled)SpeakerOff16Filled, SpeakerOff20Filled, SpeakerOff24Filled, SpeakerOff28Filled, SpeakerOff48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

audiosoundvolumeslashoff

Related icons

Speaker MuteDesktop Speaker OffMic OffMic Pulse OffPhone SpeakerSpeaker 0Speaker 1Speaker 2Speaker BluetoothSpeaker EditSpeaker SettingsSpeaker USB