Music Note Off 1 icon
Used to represent toggling off music. Contains two variants. The Music Note Off 1 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 Music Note Off 1 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 { MusicNoteOff124Regular, MusicNoteOff124Filled } from "@fluentui/react-icons";
export function Example() {
return <MusicNoteOff124Regular aria-label="Music Note Off 1" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_music_note_off_1_24_regular.svg" width="24" height="24" alt="Music Note Off 1"> 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 13.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.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L10.5 11.5608V14.8773C9.8152 14.3284 8.94595 14 8 14C5.79086 14 4 15.7909 4 18C4 20.2091 5.79086 22 8 22C10.0613 22 11.7584 20.4409 11.9763 18.4376C11.9918 18.3776 12 18.3148 12 18.25V13.0609ZM10.5 18C10.5 19.3807 9.38071 20.5 8 20.5C6.61929 20.5 5.5 19.3807 5.5 18C5.5 16.6193 6.61929 15.5 8 15.5C9.38071 15.5 10.5 16.6193 10.5 18ZM18.9867 11.4523L12.0226 8.84072L10.5 7.31812V2.75C10.5 2.50402 10.6206 2.27367 10.8228 2.13356C11.025 1.99345 11.283 1.96139 11.5133 2.04776L17.8912 4.43944C19.1596 4.91512 20 6.12776 20 7.48251V10.75C20 10.996 19.8794 11.2263 19.6772 11.3664C19.475 11.5066 19.217 11.5386 18.9867 11.4523ZM18.5 9.66775V7.48251C18.5 6.75303 18.0475 6.10007 17.3645 5.84393L12 3.83225V7.23025L18.5 9.66775Z" 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/music_note_off_1_24_regular.svg";Details
| Name | Music Note Off 1 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_music_note_off_1_24_regular.svg |
| Filled file | ic_fluent_music_note_off_1_24_filled.svg |
| React components | MusicNoteOff124Regular, MusicNoteOff124Filled |
| License | MIT (© Microsoft Corporation) |