volume off icon
volume-off from Material Design Icons by Pictogrammers · Filled · Audio · Apache-2.0 Free for personal and commercial use.
- Name
- volume-off
- Set
- Material Design Icons
- Style
- Filled
- Category
- Audio
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- audio-off, mute, speakerphone-off
The same icon in other sets
volume-offBootstrap Iconsvolume-off-fillEva Iconsvolume-offFont Awesome 6 Solidvolume-offFont Awesome Solidvolume-offHuge Iconsvolume-offHumbleiconsvolume-offIonIconsvolume-offLine Awesomevolume-offLucidevolume-offMaterial Symbolsvolume-offMaterial Symbols Lightvolume-off-fillMingCute Iconvolume-offMyna UI Iconsvolume-offPrime Iconsvolume-offTabler Iconsvolume-offUniconsvolume-off-outlinedWeUI Icon
More audio icons from Material Design Icons
Use the volume off icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4L9.91 6.09L12 8.18M4.27 3L3 4.27L7.73 9H3v6h4l5 5v-6.73l4.25 4.26c-.67.51-1.42.93-2.25 1.17v2.07c1.38-.32 2.63-.95 3.68-1.81L19.73 21L21 19.73l-9-9M19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.9 8.9 0 0 0 21 12c0-4.28-3-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71m-2.5 0c0-1.77-1-3.29-2.5-4.03v2.21l2.45 2.45c.05-.2.05-.42.05-.63"/></svg>
React
import type { SVGProps } from "react";
export function MdiVolumeOff(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4L9.91 6.09L12 8.18M4.27 3L3 4.27L7.73 9H3v6h4l5 5v-6.73l4.25 4.26c-.67.51-1.42.93-2.25 1.17v2.07c1.38-.32 2.63-.95 3.68-1.81L19.73 21L21 19.73l-9-9M19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.9 8.9 0 0 0 21 12c0-4.28-3-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71m-2.5 0c0-1.77-1-3.29-2.5-4.03v2.21l2.45 2.45c.05-.2.05-.42.05-.63"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4L9.91 6.09L12 8.18M4.27 3L3 4.27L7.73 9H3v6h4l5 5v-6.73l4.25 4.26c-.67.51-1.42.93-2.25 1.17v2.07c1.38-.32 2.63-.95 3.68-1.81L19.73 21L21 19.73l-9-9M19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.9 8.9 0 0 0 21 12c0-4.28-3-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71m-2.5 0c0-1.77-1-3.29-2.5-4.03v2.21l2.45 2.45c.05-.2.05-.42.05-.63"/></svg> </template>
CSS
.icon-volume-off {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%204L9.91%206.09L12%208.18M4.27%203L3%204.27L7.73%209H3v6h4l5%205v-6.73l4.25%204.26c-.67.51-1.42.93-2.25%201.17v2.07c1.38-.32%202.63-.95%203.68-1.81L19.73%2021L21%2019.73l-9-9M19%2012c0%20.94-.2%201.82-.54%202.64l1.51%201.51A8.9%208.9%200%200%200%2021%2012c0-4.28-3-7.86-7-8.77v2.06c2.89.86%205%203.54%205%206.71m-2.5%200c0-1.77-1-3.29-2.5-4.03v2.21l2.45%202.45c.05-.2.05-.42.05-.63%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%204L9.91%206.09L12%208.18M4.27%203L3%204.27L7.73%209H3v6h4l5%205v-6.73l4.25%204.26c-.67.51-1.42.93-2.25%201.17v2.07c1.38-.32%202.63-.95%203.68-1.81L19.73%2021L21%2019.73l-9-9M19%2012c0%20.94-.2%201.82-.54%202.64l1.51%201.51A8.9%208.9%200%200%200%2021%2012c0-4.28-3-7.86-7-8.77v2.06c2.89.86%205%203.54%205%206.71m-2.5%200c0-1.77-1-3.29-2.5-4.03v2.21l2.45%202.45c.05-.2.05-.42.05-.63%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/volume-off.svg?color=%231a73e8&size=48
