Midi Off icon
Used to represent off musical devices and in concert event scenarios. The Midi 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 Midi 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 { MidiOff24Regular, MidiOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <MidiOff24Regular aria-label="Midi Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_midi_off_24_regular.svg" width="24" height="24" alt="Midi 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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L18.9395 20H4.25C3.00738 20 2.00003 18.9926 2 17.75V6.25C2 5.38696 2.48607 4.63736 3.19922 4.25977L2.21973 3.28028C1.92685 2.98739 1.92687 2.51262 2.21973 2.21973ZM19.75 4C20.9926 4 22 5.00736 22 6.25V17.75C22 18.0646 21.9349 18.3639 21.8184 18.6358L20.5 17.3174V12H18V14.8174L16.5 13.3174V12H15.1826L13.6826 10.5H20.5V6.25C20.5 5.83579 20.1642 5.5 19.75 5.5H8.68262L7.18262 4H19.75ZM3.5 17.75C3.50003 18.1642 3.83581 18.5 4.25 18.5H17.4395L14.5 15.5606V16.25C14.5 16.6642 14.1642 17 13.75 17C13.3358 17 13 16.6642 13 16.25V14.0606L11 12.0606V16.25C11 16.6642 10.6642 17 10.25 17C9.83581 17 9.50003 16.6642 9.5 16.25V12H7.5V16.25C7.49997 16.6642 7.16419 17 6.75 17C6.33581 17 6.00003 16.6642 6 16.25V12H3.5V17.75ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V10.5H9.43945L6.99707 8.05762C6.96715 8.58303 6.5329 9.00001 6 9.00001C5.44774 9.00001 5.00003 8.55226 5 8.00001C5 7.4674 5.4164 7.0323 5.94141 7.00196L4.43945 5.5H4.25ZM17.25 7.00001C17.6642 7.00001 18 7.33579 18 7.75001C18 8.16419 17.6642 8.50001 17.25 8.50001H14.75C14.3358 8.50001 14 8.16419 14 7.75001C14 7.33579 14.3358 7.00001 14.75 7.00001H17.25Z" 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/midi_off_24_regular.svg";Details
| Name | Midi Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_midi_off_24_regular.svg |
| Filled file | ic_fluent_midi_off_24_filled.svg |
| React components | MidiOff24Regular, MidiOff24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
musicalinstrumentdigitaldevicemusicinstrumentanalogsoundconcert