SVG
Viewer
Dark mode
Light mode
Hide sidebar
Any license
Apache
BSD
CC Attribution
CC0
GPL
MIT
OFL
Public domain
Piano
Birply Inked Duotone Icons
View collection
Send feedback
Browse all SVGs
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
6.6 KB
4.94 KB
-25%
Optimize options
Prettify
Prettify options
Edit
with AI
Describe a change to make
Create
Describe a new SVG to make
Wrap
Stop wrapping long lines
Clear
<?xml version="1.0" encoding="utf-8"?> <!-- License: CC Attribution. Made by Davide Pacilio: https://dribbble.com/Davide86 --> <svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <g id="piano" transform="translate(-620 -124)"> <rect id="Rectangle_24" data-name="Rectangle 24" width="6" height="13" transform="translate(642 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_261" data-name="Line 261" x2="6" transform="translate(642 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_25" data-name="Rectangle 25" width="6" height="13" transform="translate(656 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_262" data-name="Line 262" x2="6" transform="translate(656 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_26" data-name="Rectangle 26" width="6" height="13" transform="translate(670 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_263" data-name="Line 263" x2="6" transform="translate(670 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_27" data-name="Rectangle 27" width="6" height="13" transform="translate(628 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_264" data-name="Line 264" x2="6" transform="translate(628 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_28" data-name="Rectangle 28" width="60" height="60" transform="translate(622 126)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="4"/> <line id="Line_265" data-name="Line 265" x2="7" transform="translate(624 185.001)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_266" data-name="Line 266" x1="9" transform="translate(622 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_29" data-name="Rectangle 29" width="6" height="13" transform="translate(628 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_134" data-name="Path 134" d="M631,174v11h7V161h-7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_135" data-name="Path 135" d="M645,161h-7v24h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_30" data-name="Rectangle 30" width="6" height="13" transform="translate(642 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_136" data-name="Path 136" d="M645,174v11h7V161h-7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_137" data-name="Path 137" d="M659,161h-7v24h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_31" data-name="Rectangle 31" width="6" height="13" transform="translate(656 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_138" data-name="Path 138" d="M659,174v11h7V161h-7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_139" data-name="Path 139" d="M673,161h-7v24h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_32" data-name="Rectangle 32" width="6" height="13" transform="translate(670 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_267" data-name="Line 267" x1="9" transform="translate(673 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_140" data-name="Path 140" d="M673,174v11h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_268" data-name="Line 268" x2="60" transform="translate(622 157)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_269" data-name="Line 269" x2="60" transform="translate(622 153)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_270" data-name="Line 270" x2="60" transform="translate(622 149)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_33" data-name="Rectangle 33" width="60" height="23" transform="translate(622 126)" fill="#1b8cff" opacity="0.3"/> <circle id="Ellipse_43" data-name="Ellipse 43" cx="2" cy="2" r="2" transform="translate(650 142)" fill="#1b8cff"/> <circle id="Ellipse_44" data-name="Ellipse 44" cx="2" cy="2" r="2" transform="translate(644 142)" fill="#1b8cff"/> <circle id="Ellipse_45" data-name="Ellipse 45" cx="2" cy="2" r="2" transform="translate(638 142)" fill="#1b8cff"/> <circle id="Ellipse_46" data-name="Ellipse 46" cx="2" cy="2" r="2" transform="translate(632 142)" fill="#1b8cff"/> <circle id="Ellipse_47" data-name="Ellipse 47" cx="2" cy="2" r="2" transform="translate(668 142)" fill="#1b8cff"/> <circle id="Ellipse_48" data-name="Ellipse 48" cx="2" cy="2" r="2" transform="translate(662 142)" fill="#1b8cff"/> <circle id="Ellipse_49" data-name="Ellipse 49" cx="2" cy="2" r="2" transform="translate(656 142)" fill="#1b8cff"/> <circle id="Ellipse_50" data-name="Ellipse 50" cx="2" cy="2" r="2" transform="translate(650 130)" fill="#1b8cff"/> <circle id="Ellipse_51" data-name="Ellipse 51" cx="2" cy="2" r="2" transform="translate(644 130)" fill="#1b8cff"/> <circle id="Ellipse_52" data-name="Ellipse 52" cx="2" cy="2" r="2" transform="translate(638 130)" fill="#1b8cff"/> <circle id="Ellipse_53" data-name="Ellipse 53" cx="2" cy="2" r="2" transform="translate(632 130)" fill="#1b8cff"/> <circle id="Ellipse_54" data-name="Ellipse 54" cx="2" cy="2" r="2" transform="translate(668 130)" fill="#1b8cff"/> <circle id="Ellipse_55" data-name="Ellipse 55" cx="2" cy="2" r="2" transform="translate(662 130)" fill="#1b8cff"/> <circle id="Ellipse_56" data-name="Ellipse 56" cx="2" cy="2" r="2" transform="translate(656 130)" fill="#1b8cff"/> <circle id="Ellipse_57" data-name="Ellipse 57" cx="2" cy="2" r="2" transform="translate(650 136)" fill="#1b8cff"/> <circle id="Ellipse_58" data-name="Ellipse 58" cx="2" cy="2" r="2" transform="translate(644 136)" fill="#1b8cff"/> <circle id="Ellipse_59" data-name="Ellipse 59" cx="2" cy="2" r="2" transform="translate(638 136)" fill="#1b8cff"/> <circle id="Ellipse_60" data-name="Ellipse 60" cx="2" cy="2" r="2" transform="translate(662 136)" fill="#1b8cff"/> <circle id="Ellipse_61" data-name="Ellipse 61" cx="2" cy="2" r="2" transform="translate(656 136)" fill="#1b8cff"/> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download SVG
SVG
Viewer
Dark mode
Light mode
Edit
Export
Rotate
Flip Y
Flip X
Colors
Edit colors
-1px x -1px
Change dimensions
Optimize
6.6 KB
4.94 KB
-25%
Optimize options
Prettify
Prettify options
Edit
with AI
Describe a change to make
Create
Describe a new SVG to make
Wrap
Stop wrapping long lines
Clear
<?xml version="1.0" encoding="utf-8"?> <!-- License: CC Attribution. Made by Davide Pacilio: https://dribbble.com/Davide86 --> <svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <g id="piano" transform="translate(-620 -124)"> <rect id="Rectangle_24" data-name="Rectangle 24" width="6" height="13" transform="translate(642 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_261" data-name="Line 261" x2="6" transform="translate(642 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_25" data-name="Rectangle 25" width="6" height="13" transform="translate(656 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_262" data-name="Line 262" x2="6" transform="translate(656 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_26" data-name="Rectangle 26" width="6" height="13" transform="translate(670 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_263" data-name="Line 263" x2="6" transform="translate(670 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_27" data-name="Rectangle 27" width="6" height="13" transform="translate(628 161)" fill="#1b8cff" opacity="0.3"/> <line id="Line_264" data-name="Line 264" x2="6" transform="translate(628 172)" fill="#1b8cff" stroke="#ffffff" stroke-miterlimit="10" stroke-width="2" opacity="0.5"/> <rect id="Rectangle_28" data-name="Rectangle 28" width="60" height="60" transform="translate(622 126)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="4"/> <line id="Line_265" data-name="Line 265" x2="7" transform="translate(624 185.001)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_266" data-name="Line 266" x1="9" transform="translate(622 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_29" data-name="Rectangle 29" width="6" height="13" transform="translate(628 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_134" data-name="Path 134" d="M631,174v11h7V161h-7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_135" data-name="Path 135" d="M645,161h-7v24h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_30" data-name="Rectangle 30" width="6" height="13" transform="translate(642 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_136" data-name="Path 136" d="M645,174v11h7V161h-7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_137" data-name="Path 137" d="M659,161h-7v24h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_31" data-name="Rectangle 31" width="6" height="13" transform="translate(656 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_138" data-name="Path 138" d="M659,174v11h7V161h-7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_139" data-name="Path 139" d="M673,161h-7v24h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_32" data-name="Rectangle 32" width="6" height="13" transform="translate(670 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_267" data-name="Line 267" x1="9" transform="translate(673 161)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <path id="Path_140" data-name="Path 140" d="M673,174v11h7" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_268" data-name="Line 268" x2="60" transform="translate(622 157)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_269" data-name="Line 269" x2="60" transform="translate(622 153)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <line id="Line_270" data-name="Line 270" x2="60" transform="translate(622 149)" fill="none" stroke="#1b8cff" stroke-linejoin="round" stroke-width="2"/> <rect id="Rectangle_33" data-name="Rectangle 33" width="60" height="23" transform="translate(622 126)" fill="#1b8cff" opacity="0.3"/> <circle id="Ellipse_43" data-name="Ellipse 43" cx="2" cy="2" r="2" transform="translate(650 142)" fill="#1b8cff"/> <circle id="Ellipse_44" data-name="Ellipse 44" cx="2" cy="2" r="2" transform="translate(644 142)" fill="#1b8cff"/> <circle id="Ellipse_45" data-name="Ellipse 45" cx="2" cy="2" r="2" transform="translate(638 142)" fill="#1b8cff"/> <circle id="Ellipse_46" data-name="Ellipse 46" cx="2" cy="2" r="2" transform="translate(632 142)" fill="#1b8cff"/> <circle id="Ellipse_47" data-name="Ellipse 47" cx="2" cy="2" r="2" transform="translate(668 142)" fill="#1b8cff"/> <circle id="Ellipse_48" data-name="Ellipse 48" cx="2" cy="2" r="2" transform="translate(662 142)" fill="#1b8cff"/> <circle id="Ellipse_49" data-name="Ellipse 49" cx="2" cy="2" r="2" transform="translate(656 142)" fill="#1b8cff"/> <circle id="Ellipse_50" data-name="Ellipse 50" cx="2" cy="2" r="2" transform="translate(650 130)" fill="#1b8cff"/> <circle id="Ellipse_51" data-name="Ellipse 51" cx="2" cy="2" r="2" transform="translate(644 130)" fill="#1b8cff"/> <circle id="Ellipse_52" data-name="Ellipse 52" cx="2" cy="2" r="2" transform="translate(638 130)" fill="#1b8cff"/> <circle id="Ellipse_53" data-name="Ellipse 53" cx="2" cy="2" r="2" transform="translate(632 130)" fill="#1b8cff"/> <circle id="Ellipse_54" data-name="Ellipse 54" cx="2" cy="2" r="2" transform="translate(668 130)" fill="#1b8cff"/> <circle id="Ellipse_55" data-name="Ellipse 55" cx="2" cy="2" r="2" transform="translate(662 130)" fill="#1b8cff"/> <circle id="Ellipse_56" data-name="Ellipse 56" cx="2" cy="2" r="2" transform="translate(656 130)" fill="#1b8cff"/> <circle id="Ellipse_57" data-name="Ellipse 57" cx="2" cy="2" r="2" transform="translate(650 136)" fill="#1b8cff"/> <circle id="Ellipse_58" data-name="Ellipse 58" cx="2" cy="2" r="2" transform="translate(644 136)" fill="#1b8cff"/> <circle id="Ellipse_59" data-name="Ellipse 59" cx="2" cy="2" r="2" transform="translate(638 136)" fill="#1b8cff"/> <circle id="Ellipse_60" data-name="Ellipse 60" cx="2" cy="2" r="2" transform="translate(662 136)" fill="#1b8cff"/> <circle id="Ellipse_61" data-name="Ellipse 61" cx="2" cy="2" r="2" transform="translate(656 136)" fill="#1b8cff"/> </g> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download SVG