musical notes icon
musical-notes from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- musical-notes
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
Related icons in IonIcons
Use the musical notes icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M421.84 37.37a25.86 25.86 0 0 0-22.6-4.46L199.92 86.49A32.3 32.3 0 0 0 176 118v226c0 6.74-4.36 12.56-11.11 14.83l-.12.05l-52 18C92.88 383.53 80 402 80 423.91a55.54 55.54 0 0 0 23.23 45.63A54.78 54.78 0 0 0 135.34 480a55.8 55.8 0 0 0 17.75-2.93l.38-.13l21.84-7.94A47.84 47.84 0 0 0 208 423.91v-212c0-7.29 4.77-13.21 12.16-15.07l.21-.06L395 150.14a4 4 0 0 1 5 3.86v141.93c0 6.75-4.25 12.38-11.11 14.68l-.25.09l-50.89 18.11A49.09 49.09 0 0 0 304 375.92a55.67 55.67 0 0 0 23.23 45.8a54.63 54.63 0 0 0 49.88 7.35l.36-.12l21.84-7.95A47.83 47.83 0 0 0 432 375.92V58a25.74 25.74 0 0 0-10.16-20.63"/></svg>
React
import type { SVGProps } from "react";
export function IonMusicalNotes(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M421.84 37.37a25.86 25.86 0 0 0-22.6-4.46L199.92 86.49A32.3 32.3 0 0 0 176 118v226c0 6.74-4.36 12.56-11.11 14.83l-.12.05l-52 18C92.88 383.53 80 402 80 423.91a55.54 55.54 0 0 0 23.23 45.63A54.78 54.78 0 0 0 135.34 480a55.8 55.8 0 0 0 17.75-2.93l.38-.13l21.84-7.94A47.84 47.84 0 0 0 208 423.91v-212c0-7.29 4.77-13.21 12.16-15.07l.21-.06L395 150.14a4 4 0 0 1 5 3.86v141.93c0 6.75-4.25 12.38-11.11 14.68l-.25.09l-50.89 18.11A49.09 49.09 0 0 0 304 375.92a55.67 55.67 0 0 0 23.23 45.8a54.63 54.63 0 0 0 49.88 7.35l.36-.12l21.84-7.95A47.83 47.83 0 0 0 432 375.92V58a25.74 25.74 0 0 0-10.16-20.63"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M421.84 37.37a25.86 25.86 0 0 0-22.6-4.46L199.92 86.49A32.3 32.3 0 0 0 176 118v226c0 6.74-4.36 12.56-11.11 14.83l-.12.05l-52 18C92.88 383.53 80 402 80 423.91a55.54 55.54 0 0 0 23.23 45.63A54.78 54.78 0 0 0 135.34 480a55.8 55.8 0 0 0 17.75-2.93l.38-.13l21.84-7.94A47.84 47.84 0 0 0 208 423.91v-212c0-7.29 4.77-13.21 12.16-15.07l.21-.06L395 150.14a4 4 0 0 1 5 3.86v141.93c0 6.75-4.25 12.38-11.11 14.68l-.25.09l-50.89 18.11A49.09 49.09 0 0 0 304 375.92a55.67 55.67 0 0 0 23.23 45.8a54.63 54.63 0 0 0 49.88 7.35l.36-.12l21.84-7.95A47.83 47.83 0 0 0 432 375.92V58a25.74 25.74 0 0 0-10.16-20.63"/></svg> </template>
CSS
.icon-musical-notes {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M421.84%2037.37a25.86%2025.86%200%200%200-22.6-4.46L199.92%2086.49A32.3%2032.3%200%200%200%20176%20118v226c0%206.74-4.36%2012.56-11.11%2014.83l-.12.05l-52%2018C92.88%20383.53%2080%20402%2080%20423.91a55.54%2055.54%200%200%200%2023.23%2045.63A54.78%2054.78%200%200%200%20135.34%20480a55.8%2055.8%200%200%200%2017.75-2.93l.38-.13l21.84-7.94A47.84%2047.84%200%200%200%20208%20423.91v-212c0-7.29%204.77-13.21%2012.16-15.07l.21-.06L395%20150.14a4%204%200%200%201%205%203.86v141.93c0%206.75-4.25%2012.38-11.11%2014.68l-.25.09l-50.89%2018.11A49.09%2049.09%200%200%200%20304%20375.92a55.67%2055.67%200%200%200%2023.23%2045.8a54.63%2054.63%200%200%200%2049.88%207.35l.36-.12l21.84-7.95A47.83%2047.83%200%200%200%20432%20375.92V58a25.74%2025.74%200%200%200-10.16-20.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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M421.84%2037.37a25.86%2025.86%200%200%200-22.6-4.46L199.92%2086.49A32.3%2032.3%200%200%200%20176%20118v226c0%206.74-4.36%2012.56-11.11%2014.83l-.12.05l-52%2018C92.88%20383.53%2080%20402%2080%20423.91a55.54%2055.54%200%200%200%2023.23%2045.63A54.78%2054.78%200%200%200%20135.34%20480a55.8%2055.8%200%200%200%2017.75-2.93l.38-.13l21.84-7.94A47.84%2047.84%200%200%200%20208%20423.91v-212c0-7.29%204.77-13.21%2012.16-15.07l.21-.06L395%20150.14a4%204%200%200%201%205%203.86v141.93c0%206.75-4.25%2012.38-11.11%2014.68l-.25.09l-50.89%2018.11A49.09%2049.09%200%200%200%20304%20375.92a55.67%2055.67%200%200%200%2023.23%2045.8a54.63%2054.63%200%200%200%2049.88%207.35l.36-.12l21.84-7.95A47.83%2047.83%200%200%200%20432%20375.92V58a25.74%2025.74%200%200%200-10.16-20.63%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/musical-notes.svg?color=%231a73e8&size=48
