Add icons to this collection by clicking the heart icon.
Piano icon - also known as music, instrument, piano, accompaniment, music instrument, musical instrument, melody, piano silhouette, and music and multimedia. Created in a clean lineal color style with a white, teal, and navy finish, 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="100"
height="100"
viewBox="0 0 512 512"
>
<path
d="M373.333 170.667c-29.417 0-53.333-23.927-53.333-53.333 0-41.167-33.5-74.667-74.667-74.667H10.667A10.66 10.66 0 0 0 0 53.333v405.333a10.66 10.66 0 0 0 10.667 10.667H373.334c76.458 0 138.667-62.208 138.667-138.667v-21.333c-.001-76.458-62.209-138.666-138.668-138.666z"
fill="#303c42"
/>
<path
d="M64 394.667H21.333V352H64a10.66 10.66 0 0 0 10.667 10.667H128V384H74.667A10.66 10.66 0 0 0 64 394.667zM74.667 128H128v21.333H74.667A10.66 10.66 0 0 0 64 160H21.333v-42.667H64A10.66 10.66 0 0 0 74.667 128zM64 181.333A10.66 10.66 0 0 0 74.667 192H128v21.333H21.333v-32H64zM128 234.667V256H74.667A10.66 10.66 0 0 0 64 266.667H21.333v-32H128zM64 288a10.66 10.66 0 0 0 10.667 10.667H128V320H74.667A10.66 10.66 0 0 0 64 330.667H21.333V288H64zM128 64v21.333H74.667A10.66 10.66 0 0 0 64 96H21.333V64H128zM21.333 448v-32H64a10.66 10.66 0 0 0 10.667 10.667H128V448H21.333z"
fill="#fffbf0"
/>
<path
d="M490.667 330.667c0 64.698-52.646 117.333-117.333 117.333h-224V64h96c29.417 0 53.333 23.927 53.333 53.333 0 41.167 33.5 74.667 74.667 74.667 64.688 0 117.333 52.635 117.333 117.333v21.334z"
fill="#37474f"
/>
<linearGradient
id="a"
x1="-42.698"
x2="-24.301"
y1="637.058"
y2="628.484"
gradientTransform="matrix(21.3333 0 0 -21.3333 996.333 13791.667)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff" stop-opacity=".2" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</linearGradient>
<path
d="M490.667 330.667c0 64.698-52.646 117.333-117.333 117.333h-224V64h96c29.417 0 53.333 23.927 53.333 53.333 0 41.167 33.5 74.667 74.667 74.667 64.688 0 117.333 52.635 117.333 117.333v21.334z"
fill="url(#a)"
/>
<linearGradient
id="b"
x1="-42.51"
x2="-27.122"
y1="640.677"
y2="625.291"
gradientTransform="matrix(21.3333 0 0 -21.3333 996.333 13791.667)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#000" stop-opacity="0" />
<stop offset="1" stop-color="#000" stop-opacity=".1" />
</linearGradient>
<path
d="M490.667 330.667c0 64.698-52.646 117.333-117.333 117.333h-224V64h96c29.417 0 53.333 23.927 53.333 53.333 0 41.167 33.5 74.667 74.667 74.667 64.688 0 117.333 52.635 117.333 117.333v21.334z"
fill="url(#b)"
/>
<path
d="M462.147 232.883c10.691 17.682 16.964 38.323 16.964 60.451v21.333c0 64.698-52.646 117.333-117.333 117.333H149.333v16h224c64.688 0 117.333-52.635 117.333-117.333v-21.333c.001-29.208-10.798-55.894-28.519-76.451z"
opacity=".1"
/>
<linearGradient
id="c"
x1="-49.254"
x2="-23.967"
y1="638.626"
y2="626.835"
gradientTransform="matrix(21.3333 0 0 -21.3333 996.333 13791.667)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff" stop-opacity=".2" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</linearGradient>
<path
d="M373.333 170.667c-29.417 0-53.333-23.927-53.333-53.333 0-41.167-33.5-74.667-74.667-74.667H10.667A10.66 10.66 0 0 0 0 53.333v405.333a10.66 10.66 0 0 0 10.667 10.667H373.334c76.458 0 138.667-62.208 138.667-138.667v-21.333c-.001-76.458-62.209-138.666-138.668-138.666z"
fill="url(#c)"
/>
</svg>
More icons in the same style and category