piano icon

piano from Material Symbols Light by Google · Regular · Activities · Apache-2.0 Free for personal and commercial use.

Name: piano
Set: Material Symbols Light
Style: Regular
Category: Activities
Viewbox: 24×24
License: Apache 2.0
Aliases: piano-outline, piano-outline-rounded, piano-rounded

1 other variant in Material Symbols Light

The same icon in other sets

pianoBoxIcons v2 Solid pianoCodicons pianoFramework7 Icons pianocss.gg pianoIconPark pianoIconPark Outline pianoIconPark Solid pianoIconPark TwoTone pianoLucide pianoMaterial Symbols pianoMaterial Design Icons piano-fillRemix Icon pianoTabler Icons pianoTDesign Icons

More activities icons from Material Symbols Light

Use the piano icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h3.038v-4.808H8.25q-.367 0-.607-.239q-.24-.24-.24-.607V5H5.617q-.27 0-.443.173T5 5.616v12.769q0 .269.173.442t.443.173m9.73 0h3.039q.269 0 .442-.173t.173-.443V5.616q0-.27-.173-.443T18.385 5h-1.789v8.346q0 .368-.24.607q-.239.24-.606.24h-.404zM9.54 19h4.923v-4.808h-.404q-.367 0-.607-.239q-.24-.24-.24-.607V5H10.79v8.346q0 .368-.24.607q-.24.24-.607.24H9.54z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightPiano(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h3.038v-4.808H8.25q-.367 0-.607-.239q-.24-.24-.24-.607V5H5.617q-.27 0-.443.173T5 5.616v12.769q0 .269.173.442t.443.173m9.73 0h3.039q.269 0 .442-.173t.173-.443V5.616q0-.27-.173-.443T18.385 5h-1.789v8.346q0 .368-.24.607q-.239.24-.606.24h-.404zM9.54 19h4.923v-4.808h-.404q-.367 0-.607-.239q-.24-.24-.24-.607V5H10.79v8.346q0 .368-.24.607q-.24.24-.607.24H9.54z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h3.038v-4.808H8.25q-.367 0-.607-.239q-.24-.24-.24-.607V5H5.617q-.27 0-.443.173T5 5.616v12.769q0 .269.173.442t.443.173m9.73 0h3.039q.269 0 .442-.173t.173-.443V5.616q0-.27-.173-.443T18.385 5h-1.789v8.346q0 .368-.24.607q-.239.24-.606.24h-.404zM9.54 19h4.923v-4.808h-.404q-.367 0-.607-.239q-.24-.24-.24-.607V5H10.79v8.346q0 .368-.24.607q-.24.24-.607.24H9.54z"/></svg>
</template>

CSS

.icon-piano {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.616%2020q-.691%200-1.153-.462T4%2018.384V5.616q0-.691.463-1.153T5.616%204h12.769q.69%200%201.153.463T20%205.616v12.769q0%20.69-.462%201.153T18.384%2020zm0-1h3.038v-4.808H8.25q-.367%200-.607-.239q-.24-.24-.24-.607V5H5.617q-.27%200-.443.173T5%205.616v12.769q0%20.269.173.442t.443.173m9.73%200h3.039q.269%200%20.442-.173t.173-.443V5.616q0-.27-.173-.443T18.385%205h-1.789v8.346q0%20.368-.24.607q-.239.24-.606.24h-.404zM9.54%2019h4.923v-4.808h-.404q-.367%200-.607-.239q-.24-.24-.24-.607V5H10.79v8.346q0%20.368-.24.607q-.24.24-.607.24H9.54z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.616%2020q-.691%200-1.153-.462T4%2018.384V5.616q0-.691.463-1.153T5.616%204h12.769q.69%200%201.153.463T20%205.616v12.769q0%20.69-.462%201.153T18.384%2020zm0-1h3.038v-4.808H8.25q-.367%200-.607-.239q-.24-.24-.24-.607V5H5.617q-.27%200-.443.173T5%205.616v12.769q0%20.269.173.442t.443.173m9.73%200h3.039q.269%200%20.442-.173t.173-.443V5.616q0-.27-.173-.443T18.385%205h-1.789v8.346q0%20.368-.24.607q-.239.24-.606.24h-.404zM9.54%2019h4.923v-4.808h-.404q-.367%200-.607-.239q-.24-.24-.24-.607V5H10.79v8.346q0%20.368-.24.607q-.24.24-.607.24H9.54z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/piano.svg?color=%231a73e8&size=48