Add icons to this collection by clicking the heart icon.
Music icon - also known as music, quaver, musical notes, and music and multimedia. Created in a clean color style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 510 510"
>
<linearGradient id="a">
<stop offset="0" stop-color="#8a7889" />
<stop offset="1" stop-color="#6e566e" />
</linearGradient>
<linearGradient
id="e"
x1="251.916"
x2="265.13"
y1="95.662"
y2="173.055"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="251.916"
x2="265.13"
y1="233.847"
y2="311.241"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="251.916"
x2="265.13"
y1="372.033"
y2="449.426"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#6e566e" stop-opacity="0" />
<stop offset="1" stop-color="#6e566e" />
</linearGradient>
<linearGradient
id="h"
x1="161.66"
x2="130.051"
y1="160.248"
y2="128.639"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="i"
x1="506.25"
x2="477.369"
y1="174.657"
y2="174.657"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="j"
x1="183.975"
x2="152.588"
y1="434.683"
y2="403.295"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="k"
x1="369.813"
x2="342.313"
y1="266.621"
y2="253.371"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="l"
cx="52.854"
cy="87.675"
r="123.018"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffd945" />
<stop offset=".417" stop-color="#ffd744" />
<stop offset=".628" stop-color="#ffcf3f" />
<stop offset=".793" stop-color="#ffc237" />
<stop offset=".933" stop-color="#ffaf2c" />
<stop offset="1" stop-color="#ffa325" />
</radialGradient>
<linearGradient id="c">
<stop offset="0" stop-color="#92f37f" />
<stop offset="1" stop-color="#4ab272" />
</linearGradient>
<linearGradient
id="m"
x1="137.813"
x2="193.813"
y1="346.221"
y2="405.367"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="n"
x1="328.948"
x2="420.66"
y1="163.339"
y2="291.117"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff819c" />
<stop offset=".259" stop-color="#ff7e9a" />
<stop offset=".476" stop-color="#fe7396" />
<stop offset=".676" stop-color="#fc628e" />
<stop offset=".867" stop-color="#fa4a83" />
<stop offset="1" stop-color="#f83479" />
</linearGradient>
<linearGradient
id="o"
x1="-51.305"
x2="6.326"
y1="-112.385"
y2="-35.543"
gradientTransform="translate(90.953 151.616)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff7044" />
<stop offset="1" stop-color="#f82814" />
</linearGradient>
<linearGradient id="d">
<stop offset="0" stop-color="#00adfb" />
<stop offset="1" stop-color="#3f3ced" />
</linearGradient>
<linearGradient
id="p"
x1="326.076"
x2="392.902"
y1="261.542"
y2="350.642"
gradientTransform="translate(90.953 151.616)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="q"
x1="227.674"
x2="270.38"
y1="-123.055"
y2="-66.114"
gradientTransform="translate(90.953 151.616)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="r"
x1="218.964"
x2="261.669"
y1="277.611"
y2="334.551"
gradientTransform="translate(90.953 151.616)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffd945" />
<stop offset=".304" stop-color="#ffcd3e" />
<stop offset=".856" stop-color="#ffad2b" />
<stop offset="1" stop-color="#ffa325" />
</linearGradient>
<linearGradient
id="s"
x1="86.885"
x2="129.59"
y1="20.291"
y2="77.231"
gradientTransform="translate(90.953 151.616)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<path
fill="url(#e)"
d="M18.893 222.197c-5.839 0-11.595-2.699-15.288-7.784-6.127-8.435-4.255-20.24 4.179-26.366l37.287-27.083c58.517-42.504 130.352-61.727 202.277-54.139 74.831 7.906 148.847-17.506 203.057-69.699l27.626-26.6c7.51-7.231 19.459-7.004 26.691.505 7.231 7.51 7.005 19.46-.505 26.691l-27.627 26.6c-54.784 52.747-127.189 81.671-202.341 81.675-10.253 0-20.546-.537-30.865-1.627-62.623-6.612-125.175 10.131-176.127 47.139L29.97 218.592a18.78 18.78 0 0 1-11.077 3.605z"
/>
<path
fill="url(#f)"
d="M18.893 360.383c-5.839 0-11.595-2.699-15.288-7.784-6.127-8.435-4.255-20.24 4.179-26.366l37.287-27.083c58.517-42.504 130.352-61.727 202.277-54.139 74.831 7.906 148.847-17.506 203.057-69.699l27.626-26.6c7.51-7.231 19.459-7.004 26.691.505 7.231 7.51 7.005 19.46-.505 26.691l-27.627 26.6c-54.784 52.747-127.189 81.671-202.341 81.675-10.253 0-20.546-.537-30.865-1.627-62.623-6.612-125.175 10.131-176.127 47.139L29.97 356.778a18.787 18.787 0 0 1-11.077 3.605z"
/>
<path
fill="url(#g)"
d="M18.893 498.568c-5.839 0-11.595-2.699-15.288-7.784-6.127-8.435-4.255-20.24 4.179-26.366l37.287-27.083c58.517-42.504 130.352-61.727 202.277-54.139 74.831 7.906 148.847-17.506 203.057-69.699l27.626-26.6c7.51-7.231 19.459-7.004 26.691.505 7.231 7.51 7.005 19.46-.505 26.691l-27.627 26.6c-54.784 52.747-127.189 81.671-202.341 81.675-10.253 0-20.546-.537-30.865-1.627-62.623-6.612-125.175 10.131-176.127 47.139L29.97 494.963a18.78 18.78 0 0 1-11.077 3.605z"
/>
<path
fill="url(#h)"
d="M130.333 158.065a253.44 253.44 0 0 1 46.347-11.941l-31.926-31.926a291.731 291.731 0 0 0-14.42 4.059v39.808z"
/>
<path
fill="url(#i)"
d="M478.031 148.711 473 153.555v52.326c1.201-1.118 2.405-2.233 3.59-3.374l27.627-26.6c7.51-7.231 7.736-19.181.505-26.691-7.232-7.509-19.181-7.736-26.691-.505z"
/>
<path
fill="url(#j)"
d="M146.333 429.243a253.66 253.66 0 0 1 54.959-9.446l-34.029-34.029a291.096 291.096 0 0 0-20.93 4.396z"
/>
<path
fill="url(#k)"
d="M341 276.428a290.883 290.883 0 0 0 40.349-12.64l-29.507-29.507-.012-.013a254.209 254.209 0 0 1-10.83 3.21z"
/>
<path
fill="url(#l)"
d="M132.228 5.247c-6.654 0-12.049 5.394-12.049 12.049v100.638c-15.279-6.042-35.282-4.015-52.796 6.931-26.301 16.437-37.014 46.736-23.928 67.675s45.016 24.589 71.317 8.152c18.87-11.793 29.713-30.721 29.503-48.209h.001V17.296c.001-6.654-5.393-12.049-12.048-12.049z"
/>
<path
fill="url(#m)"
d="M246.958 292.097a31.55 31.55 0 0 1-22.311-9.242l-9.475-9.475a65.897 65.897 0 0 0-46.596-19.301h-13.362c-6.654 0-12.049 5.394-12.049 12.049v100.638c-15.279-6.042-35.282-4.015-52.796 6.931-26.301 16.437-37.014 46.736-23.928 67.675s45.016 24.589 71.317 8.152c18.87-11.793 29.713-30.721 29.503-48.209h.001V296.513c0-11.113 13.463-16.647 21.279-8.747l3.004 3.036c15.044 15.206 38.027 19.307 57.402 10.243 4.549-2.128 3.032-8.948-1.989-8.948z"
/>
<path
fill="url(#n)"
d="M464.701 53.348a11.98 11.98 0 0 0-4.889 1.043 75.94 75.94 0 0 0-47.315 34.849l-15.606 26.121a79.279 79.279 0 0 1-36.948 32.258l-20.149 8.596c-6.654 0-12.049 5.394-12.049 12.049v119.514c-15.279-6.042-35.282-4.015-52.796 6.93-26.301 16.437-37.014 46.737-23.928 67.675 13.086 20.939 45.016 24.589 71.317 8.152 18.87-11.793 29.713-30.721 29.503-48.209h.001V189.659l9.094-3.88a75.956 75.956 0 0 0 35.4-30.906l15.399-25.774a79.277 79.277 0 0 1 40.917-33.826v89.638c-15.279-6.042-35.282-4.015-52.796 6.931-26.301 16.437-37.014 46.736-23.928 67.675s45.016 24.589 71.317 8.152c18.87-11.793 29.713-30.721 29.503-48.209h.001V65.397c.001-6.654-5.394-12.049-12.048-12.049z"
/>
<path
fill="url(#o)"
d="M108.815 68.607a154.9 154.9 0 0 0-45.64 45.931c-2.653 4.125-8.777 4.114-11.415-.021A154.916 154.916 0 0 0 6.288 68.421c-4.044-2.657-4.033-8.7.021-11.342a154.884 154.884 0 0 0 45.639-45.931c2.653-4.125 8.777-4.114 11.415.021a154.911 154.911 0 0 0 45.473 46.097c4.043 2.657 4.032 8.699-.021 11.341z"
/>
<path
fill="url(#p)"
d="M496.525 447.914a179.616 179.616 0 0 0-52.921 53.259c-3.077 4.783-10.177 4.77-13.236-.024a179.622 179.622 0 0 0-52.726-53.451c-4.689-3.081-4.676-10.088.024-13.152a179.616 179.616 0 0 0 52.921-53.259c3.076-4.783 10.177-4.77 13.236.024a179.637 179.637 0 0 0 52.727 53.451c4.688 3.082 4.675 10.088-.025 13.152z"
/>
<path
fill="url(#q)"
d="M369.952 50.808a114.791 114.791 0 0 0-33.82 34.036c-1.966 3.057-6.504 3.048-8.459-.015a114.784 114.784 0 0 0-33.695-34.158c-2.996-1.969-2.988-6.447.015-8.405a114.796 114.796 0 0 0 33.819-34.035c1.966-3.057 6.504-3.049 8.459.015a114.799 114.799 0 0 0 33.696 34.158c2.997 1.968 2.989 6.445-.015 8.404z"
/>
<path
fill="url(#r)"
d="M360.521 451.457a114.791 114.791 0 0 0-33.82 34.036c-1.966 3.057-6.504 3.048-8.459-.016a114.784 114.784 0 0 0-33.695-34.158c-2.996-1.969-2.988-6.447.015-8.405a114.796 114.796 0 0 0 33.819-34.035c1.966-3.057 6.504-3.049 8.459.015a114.799 114.799 0 0 0 33.696 34.158c2.996 1.969 2.988 6.447-.015 8.405z"
/>
<path
fill="url(#s)"
d="M228.905 193.899a114.791 114.791 0 0 0-33.82 34.036c-1.966 3.057-6.504 3.048-8.459-.015a114.784 114.784 0 0 0-33.695-34.158c-2.996-1.969-2.988-6.447.015-8.405a114.796 114.796 0 0 0 33.819-34.035c1.966-3.057 6.504-3.049 8.459.015a114.799 114.799 0 0 0 33.696 34.158c2.996 1.969 2.988 6.446-.015 8.404z"
/>
</svg>
More icons in the same style and category