Music icon

A free music icon in 5 styles, drawn by hand on a 24px grid. Copy it as SVG or JSX, for personal or commercial use.

Style Stroke

Category: Media & Multimedia
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: music, note, beam, melody, sound, tune, musical

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(2 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M17.95 0.11L7.27 4.3C6.5 4.6 6 5.34 6 6.16L6 10.3L20 4.8L20 1.5C20 0.44 18.94 -0.28 17.95 0.11Z"/>
  <path transform="translate(2 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 17.3C0 15.64 1.34 14.3 3 14.3C4.66 14.3 6 15.64 6 17.3C6 18.96 4.66 20.3 3 20.3C1.34 20.3 0 18.96 0 17.3Z"/>
  <path transform="translate(2 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M14 14.3C14 12.64 15.34 11.3 17 11.3C18.66 11.3 20 12.64 20 14.3C20 15.96 18.66 17.3 17 17.3C15.34 17.3 14 15.96 14 14.3Z"/>
  <path transform="translate(2 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 10.3L6 17.3M20 4.8L20 14.3"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(1 0.7)" fill="currentColor" d="M20 7.27L8 11.98L8 18.3C8 20.51 6.21 22.3 4 22.3C1.79 22.3 0 20.51 0 18.3C0 16.09 1.79 14.3 4 14.3C4.73 14.3 5.41 14.5 6 14.84L6 7.16C6 5.93 6.75 4.82 7.9 4.37L18.59 0.18C20.23 -0.47 22 0.74 22 2.5L22 15.3C22 17.51 20.21 19.3 18 19.3C15.79 19.3 14 17.51 14 15.3C14 13.09 15.79 11.3 18 11.3C18.73 11.3 19.41 11.5 20 11.84L20 7.27Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(8 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M11.95 0.11L1.27 4.3C0.5 4.6 0 5.34 0 6.16L0 10.3L14 4.8L14 1.5C14 0.44 12.94 -0.28 11.95 0.11Z"/>
  <path opacity="0.28" transform="translate(8 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 10.3L0 17.3M14 4.8L14 14.3"/>
  <path transform="translate(2 13)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 6C0 4.34 1.34 3 3 3C4.66 3 6 4.34 6 6C6 7.66 4.66 9 3 9C1.34 9 0 7.66 0 6Z"/>
  <path transform="translate(2 13)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M14 3C14 1.34 15.34 0 17 0C18.66 0 20 1.34 20 3C20 4.66 18.66 6 17 6C15.34 6 14 4.66 14 3Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(7 0.7)" fill="currentColor" d="M14 15.3L14 7.27L2 11.98L2 18.3C2 18.85 1.55 19.3 1 19.3C0.45 19.3 0 18.85 0 18.3L0 7.16C0 5.93 0.75 4.82 1.9 4.37L12.59 0.18C14.23 -0.47 16 0.74 16 2.5L16 15.3C16 15.85 15.55 16.3 15 16.3C14.45 16.3 14 15.85 14 15.3Z"/>
  <path transform="translate(1 12)" fill="currentColor" d="M18 0C15.79 0 14 1.79 14 4C14 6.21 15.79 8 18 8C20.21 8 22 6.21 22 4C22 1.79 20.21 0 18 0Z"/>
  <path transform="translate(1 12)" fill="currentColor" d="M4 3C1.79 3 0 4.79 0 7C0 9.21 1.79 11 4 11C6.21 11 8 9.21 8 7C8 4.79 6.21 3 4 3Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(2 1.7)" fill="currentColor" d="M7.27 4.3L17.95 0.11C18.94 -0.28 20 0.44 20 1.5L20 4.8L6 10.3L6 6.16C6 5.34 6.5 4.6 7.27 4.3Z"/>
  <path opacity="0.28" transform="translate(2 1.7)" fill="currentColor" d="M17 11.3C15.34 11.3 14 12.64 14 14.3C14 15.96 15.34 17.3 17 17.3C18.66 17.3 20 15.96 20 14.3C20 12.64 18.66 11.3 17 11.3Z"/>
  <path opacity="0.28" transform="translate(2 1.7)" fill="currentColor" d="M3 14.3C1.34 14.3 0 15.64 0 17.3C0 18.96 1.34 20.3 3 20.3C4.66 20.3 6 18.96 6 17.3C6 15.64 4.66 14.3 3 14.3Z"/>
  <path transform="translate(2 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M17.95 0.11L7.27 4.3C6.5 4.6 6 5.34 6 6.16L6 10.3L20 4.8L20 1.5C20 0.44 18.94 -0.28 17.95 0.11Z"/>
  <path transform="translate(2 1.7)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 10.3L6 17.3M6 17.3C6 18.96 4.66 20.3 3 20.3C1.34 20.3 0 18.96 0 17.3C0 15.64 1.34 14.3 3 14.3C4.66 14.3 6 15.64 6 17.3ZM20 4.8L20 14.3M20 14.3C20 15.96 18.66 17.3 17 17.3C15.34 17.3 14 15.96 14 14.3C14 12.64 15.34 11.3 17 11.3C18.66 11.3 20 12.64 20 14.3Z"/>
</svg>