midi port icon
midi-port from Material Design Icons by Pictogrammers · Filled · Music · Apache-2.0 Free for personal and commercial use.
- Name
- midi-port
- Set
- Material Design Icons
- Style
- Filled
- Category
- Music
- Viewbox
- 24×24
- License
- Apache 2.0
The same icon in other sets
More music icons from Material Design Icons
archive-musicbook-music-outlinebookmark-musiccassettedisceight-trackguitar-acousticguitar-electricguitar-pickinstrument-trianglemetronomemetronome-tickmicrophonemicrophone-offmicrophone-variantmicrophone-variant-offmusic-accidental-double-flatmusic-accidental-double-sharpmusic-accidental-flatmusic-accidental-naturalmusic-accidental-sharpmusic-box-multiplemusic-clef-altomusic-clef-bass
Use the midi port icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m8.18 10c0-3.82-2.63-7.04-6.18-7.93V6h-4V4.07A8.185 8.185 0 0 0 3.82 12A8.18 8.18 0 0 0 12 20.18A8.18 8.18 0 0 0 20.18 12M7 10.64A1.36 1.36 0 0 1 8.36 12A1.36 1.36 0 0 1 7 13.36c-.75 0-1.36-.61-1.36-1.36s.61-1.36 1.36-1.36m10 0A1.36 1.36 0 0 1 18.36 12A1.36 1.36 0 0 1 17 13.36A1.36 1.36 0 0 1 15.64 12A1.36 1.36 0 0 1 17 10.64m-8.64 3.63a1.37 1.37 0 0 1 1.37 1.37c0 .75-.61 1.36-1.37 1.36A1.36 1.36 0 0 1 7 15.64c0-.76.61-1.37 1.36-1.37m7.28 0c.75 0 1.36.61 1.36 1.37A1.36 1.36 0 0 1 15.64 17c-.76 0-1.37-.61-1.37-1.36a1.37 1.37 0 0 1 1.37-1.37M12 15.64A1.36 1.36 0 0 1 13.36 17A1.36 1.36 0 0 1 12 18.36A1.36 1.36 0 0 1 10.64 17A1.36 1.36 0 0 1 12 15.64"/></svg>
React
import type { SVGProps } from "react";
export function MdiMidiPort(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 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m8.18 10c0-3.82-2.63-7.04-6.18-7.93V6h-4V4.07A8.185 8.185 0 0 0 3.82 12A8.18 8.18 0 0 0 12 20.18A8.18 8.18 0 0 0 20.18 12M7 10.64A1.36 1.36 0 0 1 8.36 12A1.36 1.36 0 0 1 7 13.36c-.75 0-1.36-.61-1.36-1.36s.61-1.36 1.36-1.36m10 0A1.36 1.36 0 0 1 18.36 12A1.36 1.36 0 0 1 17 13.36A1.36 1.36 0 0 1 15.64 12A1.36 1.36 0 0 1 17 10.64m-8.64 3.63a1.37 1.37 0 0 1 1.37 1.37c0 .75-.61 1.36-1.37 1.36A1.36 1.36 0 0 1 7 15.64c0-.76.61-1.37 1.36-1.37m7.28 0c.75 0 1.36.61 1.36 1.37A1.36 1.36 0 0 1 15.64 17c-.76 0-1.37-.61-1.37-1.36a1.37 1.37 0 0 1 1.37-1.37M12 15.64A1.36 1.36 0 0 1 13.36 17A1.36 1.36 0 0 1 12 18.36A1.36 1.36 0 0 1 10.64 17A1.36 1.36 0 0 1 12 15.64"/></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 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m8.18 10c0-3.82-2.63-7.04-6.18-7.93V6h-4V4.07A8.185 8.185 0 0 0 3.82 12A8.18 8.18 0 0 0 12 20.18A8.18 8.18 0 0 0 20.18 12M7 10.64A1.36 1.36 0 0 1 8.36 12A1.36 1.36 0 0 1 7 13.36c-.75 0-1.36-.61-1.36-1.36s.61-1.36 1.36-1.36m10 0A1.36 1.36 0 0 1 18.36 12A1.36 1.36 0 0 1 17 13.36A1.36 1.36 0 0 1 15.64 12A1.36 1.36 0 0 1 17 10.64m-8.64 3.63a1.37 1.37 0 0 1 1.37 1.37c0 .75-.61 1.36-1.37 1.36A1.36 1.36 0 0 1 7 15.64c0-.76.61-1.37 1.36-1.37m7.28 0c.75 0 1.36.61 1.36 1.37A1.36 1.36 0 0 1 15.64 17c-.76 0-1.37-.61-1.37-1.36a1.37 1.37 0 0 1 1.37-1.37M12 15.64A1.36 1.36 0 0 1 13.36 17A1.36 1.36 0 0 1 12 18.36A1.36 1.36 0 0 1 10.64 17A1.36 1.36 0 0 1 12 15.64"/></svg> </template>
CSS
.icon-midi-port {
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%202a10%2010%200%200%201%2010%2010a10%2010%200%200%201-10%2010A10%2010%200%200%201%202%2012A10%2010%200%200%201%2012%202m8.18%2010c0-3.82-2.63-7.04-6.18-7.93V6h-4V4.07A8.185%208.185%200%200%200%203.82%2012A8.18%208.18%200%200%200%2012%2020.18A8.18%208.18%200%200%200%2020.18%2012M7%2010.64A1.36%201.36%200%200%201%208.36%2012A1.36%201.36%200%200%201%207%2013.36c-.75%200-1.36-.61-1.36-1.36s.61-1.36%201.36-1.36m10%200A1.36%201.36%200%200%201%2018.36%2012A1.36%201.36%200%200%201%2017%2013.36A1.36%201.36%200%200%201%2015.64%2012A1.36%201.36%200%200%201%2017%2010.64m-8.64%203.63a1.37%201.37%200%200%201%201.37%201.37c0%20.75-.61%201.36-1.37%201.36A1.36%201.36%200%200%201%207%2015.64c0-.76.61-1.37%201.36-1.37m7.28%200c.75%200%201.36.61%201.36%201.37A1.36%201.36%200%200%201%2015.64%2017c-.76%200-1.37-.61-1.37-1.36a1.37%201.37%200%200%201%201.37-1.37M12%2015.64A1.36%201.36%200%200%201%2013.36%2017A1.36%201.36%200%200%201%2012%2018.36A1.36%201.36%200%200%201%2010.64%2017A1.36%201.36%200%200%201%2012%2015.64%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%202a10%2010%200%200%201%2010%2010a10%2010%200%200%201-10%2010A10%2010%200%200%201%202%2012A10%2010%200%200%201%2012%202m8.18%2010c0-3.82-2.63-7.04-6.18-7.93V6h-4V4.07A8.185%208.185%200%200%200%203.82%2012A8.18%208.18%200%200%200%2012%2020.18A8.18%208.18%200%200%200%2020.18%2012M7%2010.64A1.36%201.36%200%200%201%208.36%2012A1.36%201.36%200%200%201%207%2013.36c-.75%200-1.36-.61-1.36-1.36s.61-1.36%201.36-1.36m10%200A1.36%201.36%200%200%201%2018.36%2012A1.36%201.36%200%200%201%2017%2013.36A1.36%201.36%200%200%201%2015.64%2012A1.36%201.36%200%200%201%2017%2010.64m-8.64%203.63a1.37%201.37%200%200%201%201.37%201.37c0%20.75-.61%201.36-1.37%201.36A1.36%201.36%200%200%201%207%2015.64c0-.76.61-1.37%201.36-1.37m7.28%200c.75%200%201.36.61%201.36%201.37A1.36%201.36%200%200%201%2015.64%2017c-.76%200-1.37-.61-1.37-1.36a1.37%201.37%200%200%201%201.37-1.37M12%2015.64A1.36%201.36%200%200%201%2013.36%2017A1.36%201.36%200%200%201%2012%2018.36A1.36%201.36%200%200%201%2010.64%2017A1.36%201.36%200%200%201%2012%2015.64%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/midi-port.svg?color=%231a73e8&size=48
