music clef treble icon
music-clef-treble from Material Design Icons by Pictogrammers · Filled · Music · Apache-2.0 Free for personal and commercial use.
- Name
- music-clef-treble
- Set
- Material Design Icons
- Style
- Filled
- Category
- Music
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- music-g-clef
More music icons from Material Design Icons
archive-musicbook-music-outlinebookmark-musiccassettedisceight-trackguitar-acousticguitar-electricguitar-pickinstrument-trianglemetronomemetronome-tickmicrophonemicrophone-offmicrophone-variantmicrophone-variant-offmidi-portmusic-accidental-double-flatmusic-accidental-double-sharpmusic-accidental-flatmusic-accidental-naturalmusic-accidental-sharpmusic-box-multiplemusic-clef-alto
Use the music clef treble icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 11V7.5l2.2-2.21c.8-.79.95-2.05.39-3.03A2.47 2.47 0 0 0 13.45 1c-.21 0-.45.03-.64.09C11.73 1.38 11 2.38 11 3.5v3.24L7.86 9.91a5.95 5.95 0 0 0-1.25 6.43c.77 1.9 2.45 3.21 4.39 3.55v.61c0 .26-.23.5-.5.5H9v2h1.5c1.35 0 2.5-1.11 2.5-2.5V20c2.03 0 4.16-1.92 4.16-4.75c0-2.3-1.92-4.25-4.16-4.25m0-7.5c0-.23.11-.41.32-.47c.22-.06.45.03.56.23a.5.5 0 0 1-.08.61l-.8.86zm-2 8c-.97.64-1.7 1.74-1.96 2.76l1.96.52v3.05a3.86 3.86 0 0 1-2.57-2.26c-.59-1.46-.27-3.12.83-4.24L11 9.5zm2 6.5v-5.06c1.17 0 2.18 1.1 2.18 2.31C15.18 17 13.91 18 13 18"/></svg>
React
import type { SVGProps } from "react";
export function MdiMusicClefTreble(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="M13 11V7.5l2.2-2.21c.8-.79.95-2.05.39-3.03A2.47 2.47 0 0 0 13.45 1c-.21 0-.45.03-.64.09C11.73 1.38 11 2.38 11 3.5v3.24L7.86 9.91a5.95 5.95 0 0 0-1.25 6.43c.77 1.9 2.45 3.21 4.39 3.55v.61c0 .26-.23.5-.5.5H9v2h1.5c1.35 0 2.5-1.11 2.5-2.5V20c2.03 0 4.16-1.92 4.16-4.75c0-2.3-1.92-4.25-4.16-4.25m0-7.5c0-.23.11-.41.32-.47c.22-.06.45.03.56.23a.5.5 0 0 1-.08.61l-.8.86zm-2 8c-.97.64-1.7 1.74-1.96 2.76l1.96.52v3.05a3.86 3.86 0 0 1-2.57-2.26c-.59-1.46-.27-3.12.83-4.24L11 9.5zm2 6.5v-5.06c1.17 0 2.18 1.1 2.18 2.31C15.18 17 13.91 18 13 18"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 11V7.5l2.2-2.21c.8-.79.95-2.05.39-3.03A2.47 2.47 0 0 0 13.45 1c-.21 0-.45.03-.64.09C11.73 1.38 11 2.38 11 3.5v3.24L7.86 9.91a5.95 5.95 0 0 0-1.25 6.43c.77 1.9 2.45 3.21 4.39 3.55v.61c0 .26-.23.5-.5.5H9v2h1.5c1.35 0 2.5-1.11 2.5-2.5V20c2.03 0 4.16-1.92 4.16-4.75c0-2.3-1.92-4.25-4.16-4.25m0-7.5c0-.23.11-.41.32-.47c.22-.06.45.03.56.23a.5.5 0 0 1-.08.61l-.8.86zm-2 8c-.97.64-1.7 1.74-1.96 2.76l1.96.52v3.05a3.86 3.86 0 0 1-2.57-2.26c-.59-1.46-.27-3.12.83-4.24L11 9.5zm2 6.5v-5.06c1.17 0 2.18 1.1 2.18 2.31C15.18 17 13.91 18 13 18"/></svg> </template>
CSS
.icon-music-clef-treble {
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%22M13%2011V7.5l2.2-2.21c.8-.79.95-2.05.39-3.03A2.47%202.47%200%200%200%2013.45%201c-.21%200-.45.03-.64.09C11.73%201.38%2011%202.38%2011%203.5v3.24L7.86%209.91a5.95%205.95%200%200%200-1.25%206.43c.77%201.9%202.45%203.21%204.39%203.55v.61c0%20.26-.23.5-.5.5H9v2h1.5c1.35%200%202.5-1.11%202.5-2.5V20c2.03%200%204.16-1.92%204.16-4.75c0-2.3-1.92-4.25-4.16-4.25m0-7.5c0-.23.11-.41.32-.47c.22-.06.45.03.56.23a.5.5%200%200%201-.08.61l-.8.86zm-2%208c-.97.64-1.7%201.74-1.96%202.76l1.96.52v3.05a3.86%203.86%200%200%201-2.57-2.26c-.59-1.46-.27-3.12.83-4.24L11%209.5zm2%206.5v-5.06c1.17%200%202.18%201.1%202.18%202.31C15.18%2017%2013.91%2018%2013%2018%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%22M13%2011V7.5l2.2-2.21c.8-.79.95-2.05.39-3.03A2.47%202.47%200%200%200%2013.45%201c-.21%200-.45.03-.64.09C11.73%201.38%2011%202.38%2011%203.5v3.24L7.86%209.91a5.95%205.95%200%200%200-1.25%206.43c.77%201.9%202.45%203.21%204.39%203.55v.61c0%20.26-.23.5-.5.5H9v2h1.5c1.35%200%202.5-1.11%202.5-2.5V20c2.03%200%204.16-1.92%204.16-4.75c0-2.3-1.92-4.25-4.16-4.25m0-7.5c0-.23.11-.41.32-.47c.22-.06.45.03.56.23a.5.5%200%200%201-.08.61l-.8.86zm-2%208c-.97.64-1.7%201.74-1.96%202.76l1.96.52v3.05a3.86%203.86%200%200%201-2.57-2.26c-.59-1.46-.27-3.12.83-4.24L11%209.5zm2%206.5v-5.06c1.17%200%202.18%201.1%202.18%202.31C15.18%2017%2013.91%2018%2013%2018%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/music-clef-treble.svg?color=%231a73e8&size=48
