initial public release.

src/components/common/icons/PianoIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+type PianoIconProps = React.SVGProps<SVGSVGElement>;
+
+/**
+ * PianoIcon – keyboard-style icon in a Font Awesome-like solid style
+ * - Uses currentColor
+ * - Scales with font size (1em)
+ * - viewBox matches FA dimensions
+ */
+const PianoIcon: React.FC<PianoIconProps> = (props) => (
+  <svg
+    viewBox="0 0 576 512"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    focusable="false"
+    {...props}
+  >
+    {/*
+      Build a frame with even-odd fill, then add inner black keys as filled bars.
+      Outer frame: 48,64 → 528x320
+      Inner hole:  96,112 → 384x224
+      Top slot:    112,128 → 352x32
+      Black keys:  four bars centered
+    */}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="
+        M48 64h480v320H48V64z
+        M96 112h384v224H96V112z
+        M112 128h352v32H112v-32z
+        M176 160h24v136h-24V160z
+        M240 160h24v136h-24V160z
+        M304 160h24v136h-24V160z
+        M368 160h24v136h-24V160z
+      "
+    />
+  </svg>
+);
+
+export default PianoIcon;
+
+