Add icons to this collection by clicking the heart icon.
Notes icon - also known as interface, notes, music, song, musical, quaver, musical note, musical notes, music player, shapes and symbols, 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="511pt"
height="511pt"
viewBox="0 -36 512 511"
>
<linearGradient id="a">
<stop offset="0" stop-color="#d767c7" />
<stop offset=".397" stop-color="#d464c5" />
<stop offset=".663" stop-color="#cc5bbe" />
<stop offset=".891" stop-color="#bd4cb3" />
<stop offset="1" stop-color="#b342ac" />
</linearGradient>
<linearGradient
id="f"
x1="120.715"
x2="167.704"
y1="233.756"
y2="233.756"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="g"
cx="52.042"
cy="308.188"
r="109.824"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="302.989"
x2="349.978"
y1="205.448"
y2="205.448"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="i"
cx="234.317"
cy="279.88"
r="109.824"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="224.417"
x2="249.102"
y1="99.023"
y2="173.68"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#d767c7" />
<stop offset=".438" stop-color="#ca5abd" />
<stop offset="1" stop-color="#b342ac" />
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#b342ac" stop-opacity="0" />
<stop offset=".26" stop-color="#a4319c" stop-opacity=".259" />
<stop offset=".72" stop-color="#8d1885" stop-opacity=".722" />
<stop offset="1" stop-color="#850f7c" />
</linearGradient>
<linearGradient
id="k"
x1="175.73"
x2="93.666"
y1="200.756"
y2="118.692"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#ffe548" />
<stop offset="1" stop-color="#ffb211" />
</linearGradient>
<linearGradient
id="l"
x1="120.599"
x2="154.212"
y1="98.755"
y2="98.755"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="m"
x1="87.472"
x2="112.667"
y1="165.072"
y2="209.646"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="n"
x1="124.26"
x2="243.244"
y1="59.318"
y2="59.318"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#c6e56f" />
<stop offset=".145" stop-color="#c1e46e" />
<stop offset=".313" stop-color="#b3e16d" />
<stop offset=".492" stop-color="#9cdd6a" />
<stop offset=".679" stop-color="#7cd767" />
<stop offset=".871" stop-color="#52cf62" />
<stop offset="1" stop-color="#32c95f" />
</linearGradient>
<linearGradient
id="o"
x1="387.778"
x2="419.196"
y1="325.038"
y2="325.038"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="p"
x1="356.815"
x2="380.364"
y1="387.024"
y2="428.688"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="q"
x1="391.2"
x2="502.414"
y1="288.176"
y2="288.176"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="r"
x1="365.523"
x2="300.722"
y1="244.877"
y2="180.075"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="e">
<stop offset="0" stop-color="#a3ffff" />
<stop offset="1" stop-color="#1ccbf7" />
</linearGradient>
<linearGradient
id="s"
x1="373.644"
x2="411.564"
y1="76.656"
y2="76.656"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="t"
cx="318.227"
cy="125.11"
r="88.626"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#a3ffff" />
<stop offset=".408" stop-color="#a1feff" />
<stop offset=".554" stop-color="#9afafe" />
<stop offset=".659" stop-color="#8ff4fc" />
<stop offset=".744" stop-color="#7eeafa" />
<stop offset=".816" stop-color="#68def7" />
<stop offset=".881" stop-color="#4ccff3" />
<stop offset=".939" stop-color="#2cbdee" />
<stop offset=".99" stop-color="#08a9e9" />
<stop offset="1" stop-color="#00a5e8" />
</radialGradient>
<linearGradient
id="u"
x1="377.775"
x2="512.001"
y1="32.167"
y2="32.167"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<path
fill="url(#f)"
d="M167.703 126.324v216.192h-46.988V131.41a6.413 6.413 0 0 1 6.414-6.414h24.644a96.48 96.48 0 0 1 15.93 1.328zm0 0"
/>
<path
fill="url(#g)"
d="M165.27 327.21c11.035 29.599-16.47 67.185-61.434 83.946-44.965 16.766-90.363 6.364-101.398-23.238-11.04-29.598 16.468-67.184 61.433-83.95s90.363-6.359 101.399 23.243zm0 0"
/>
<path
fill="url(#h)"
d="M349.977 98.016v216.191h-46.989V103.102a6.413 6.413 0 0 1 6.414-6.414h24.645a96.48 96.48 0 0 1 15.93 1.328zm0 0"
/>
<path
fill="url(#i)"
d="M347.547 298.902c11.031 29.598-16.473 67.184-61.438 83.95-44.964 16.761-90.363 6.359-101.398-23.243-11.04-29.597 16.469-67.183 61.434-83.949 44.968-16.762 90.367-6.36 101.402 23.242zm0 0"
/>
<path
fill="url(#j)"
d="M349.977 99.137v36.258l-229.262 31.144v-38.805a9.37 9.37 0 0 1 8.11-9.285l210.519-28.597c5.629-.766 10.633 3.609 10.633 9.285zm0 0"
/>
<path
fill="url(#k)"
d="M120.715 127.734v82.243l46.988 46.988v-96.809l27.879-3.789L154.211 115l-25.387 3.45a9.373 9.373 0 0 0-8.11 9.284zm0 0"
/>
<path
fill="url(#l)"
d="M154.21 32.195v134.067h-33.612V35.832a4.588 4.588 0 0 1 4.586-4.586h17.632c3.844 0 7.657.324 11.395.95zm0 0"
/>
<path
fill="url(#m)"
d="M152.473 155.313c7.89 21.175-11.786 48.062-43.95 60.054-32.164 11.988-64.64 4.547-72.535-16.625-7.894-21.176 11.782-48.062 43.95-60.054 32.164-11.993 64.64-4.547 72.535 16.625zm0 0"
/>
<path
fill="url(#n)"
d="M240.754 70.293c2.375 0 3.406 3.039 1.5 4.453-11.406 8.461-24.89 12.64-38.344 12.64-16.765 0-33.484-6.491-46.035-19.308a54.426 54.426 0 0 1-1.668-1.758l-31.945-35.074h22.215c3.847 0 7.656.324 11.398.95a68.787 68.787 0 0 1 37.27 19.206 64.428 64.428 0 0 0 20.925 13.98 64.477 64.477 0 0 0 24.684 4.911zm0 0"
/>
<path
fill="url(#o)"
d="M419.195 262.828v125.309h-31.418v-121.91a4.289 4.289 0 0 1 4.29-4.29h16.476c3.594 0 7.156.305 10.652.891zm0 0"
/>
<path
fill="url(#p)"
d="M417.57 377.902c7.38 19.793-11.015 44.922-41.078 56.133-30.066 11.207-60.422 4.25-67.8-15.539-7.376-19.793 11.015-44.922 41.078-56.133 30.066-11.207 60.421-4.25 67.8 15.54zm0 0"
/>
<path
fill="url(#q)"
d="M500.086 298.438c2.219 0 3.184 2.84 1.402 4.16-10.66 7.91-23.265 11.816-35.84 11.816-15.671 0-31.296-6.07-43.03-18.05a47.653 47.653 0 0 1-1.56-1.641L391.2 261.937h20.766c3.594 0 7.156.305 10.652.891a64.3 64.3 0 0 1 34.836 17.95 60.237 60.237 0 0 0 19.559 13.07 60.31 60.31 0 0 0 23.074 4.59zm0 0"
/>
<path
fill="url(#r)"
d="M349.977 200.465h-46.989v10.746l46.989 46.988zm0 0"
/>
<path
fill="url(#s)"
d="M411.563 1.57v151.243h-37.918V5.675a5.17 5.17 0 0 1 5.171-5.172h19.891a77.785 77.785 0 0 1 12.856 1.066zm0 0"
/>
<path
fill="url(#t)"
d="M409.598 140.46c8.906 23.888-13.29 54.216-49.575 67.743-36.289 13.527-72.921 5.133-81.828-18.754s13.29-54.215 49.578-67.742c36.286-13.531 72.922-5.133 81.825 18.754zm0 0"
/>
<path
fill="url(#u)"
d="M509.191 44.55c2.676 0 3.84 3.427 1.692 5.024-12.867 9.543-28.078 14.258-43.254 14.258-18.914 0-37.777-7.324-51.938-21.781a60.221 60.221 0 0 1-1.879-1.985L377.773.5h25.063a77.595 77.595 0 0 1 54.902 22.738 72.676 72.676 0 0 0 23.606 15.77 72.719 72.719 0 0 0 27.847 5.543zm0 0"
/>
</svg>
More icons in the same style and category