Add icons to this collection by clicking the heart icon.
Music icon - also known as interface, play, music, web, laptop, movie, multimedia, ui, video player, multimedia option, play button, and music and multimedia. Created in a clean gradient 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="80"
height="80"
viewBox="0 0 60 60"
>
<linearGradient id="a">
<stop offset="0" stop-color="#fff33b" />
<stop offset=".014" stop-color="#fee72e" />
<stop offset=".042" stop-color="#fed51b" />
<stop offset=".07" stop-color="#fdca10" />
<stop offset=".1" stop-color="#fdc70c" />
<stop offset=".4" stop-color="#f3903f" />
<stop offset=".8" stop-color="#ed683c" />
<stop offset="1" stop-color="#e93e3a" />
</linearGradient>
<linearGradient
id="b"
x1="30"
x2="30"
y1="59.539"
y2="-3.323"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="c"
x1="30"
x2="30"
y1="59.487"
y2="-3.052"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="d"
x1="8"
x2="8"
y1="59.469"
y2="-3.229"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="e"
x1="11"
x2="11"
y1="59.515"
y2="-3.182"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="14"
x2="14"
y1="59.562"
y2="-3.136"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="52"
x2="52"
y1="60.149"
y2="-2.548"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="44.008"
x2="44.008"
y1="59.865"
y2="-3.394"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="22.001"
x2="22.001"
y1="59.696"
y2="-3.985"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="22"
x2="22"
y1="59.413"
y2="-3.371"
gradientTransform="matrix(1 0 0 -1 0 60)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<path
fill="url(#b)"
d="M54.352 48A5.654 5.654 0 0 0 60 42.352V5.648A5.654 5.654 0 0 0 54.352 0H5.648A5.654 5.654 0 0 0 0 5.648v36.704A5.654 5.654 0 0 0 5.648 48H6v2H3.562a3 3 0 0 0-2.91 3.727l1 4A2.997 2.997 0 0 0 4.562 60h50.876a2.997 2.997 0 0 0 2.91-2.273l1-4A2.999 2.999 0 0 0 56.438 50H54v-2zM2 42.352V5.648A3.655 3.655 0 0 1 5.648 2h48.7A3.653 3.653 0 0 1 58 5.648v36.704A3.655 3.655 0 0 1 54.352 46H5.648A3.655 3.655 0 0 1 2 42.352zm55.227 10.035a.992.992 0 0 1 .183.855l-1 4a1.003 1.003 0 0 1-.972.758H4.562c-.46 0-.859-.313-.972-.758l-1-4A.999.999 0 0 1 3.563 52H21v3c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-3h17.438c.308 0 .597.14.789.387zM23 52h14v2H23zm29-2H8v-2h44zm0 0"
/>
<path
fill="url(#c)"
d="M57 42.414V5.586A2.589 2.589 0 0 0 54.414 3H5.586A2.589 2.589 0 0 0 3 5.586v36.828A2.589 2.589 0 0 0 5.586 45h48.828A2.589 2.589 0 0 0 57 42.414zM5.586 5h48.828c.324 0 .586.262.586.586V9H5V5.586C5 5.262 5.262 5 5.586 5zM5 42.414V11h50v31.414a.585.585 0 0 1-.586.586H5.586A.585.585 0 0 1 5 42.414zm0 0"
/>
<path fill="url(#d)" d="M7 6h2v2H7zm0 0" />
<path fill="url(#e)" d="M10 6h2v2h-2zm0 0" />
<path fill="url(#f)" d="M13 6h2v2h-2zm0 0" />
<path fill="url(#g)" d="M51 6h2v2h-2zm0 0" />
<path
fill="url(#h)"
d="m50.102 33.102-11.313-5.653a.993.993 0 0 0-1.34.446c-.14.28-.14.613 0 .894l5.656 11.313c.168.34.52.554.899.55.078 0 .156-.007.23-.023.453-.11.77-.512.77-.977V35h4.656a1 1 0 0 0 .45-1.898zM44 33c-.55 0-1 .45-1 1v1.422l-2.422-4.844L45.422 33zm0 0"
/>
<path
fill="url(#i)"
d="m28.445 26.105-12-6A.998.998 0 0 0 15 21v12a.997.997 0 0 0 1.445.898l12-6a.997.997 0 0 0 0-1.789zM17 31.383v-8.766L25.766 27zm0 0"
/>
<path
fill="url(#j)"
d="M32 16H12a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V19a3 3 0 0 0-3-3zm1 19c0 .55-.45 1-1 1H12c-.55 0-1-.45-1-1V19c0-.55.45-1 1-1h20c.55 0 1 .45 1 1zm0 0"
/>
</svg>
More icons in the same style and category