Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: bounce. Pick another to preview it and update the animated code:

VS Code Icons · VscMusic

Music icon

A free music icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asaudio iconsound iconsong iconnote iconmelody iconheadphones iconheadset iconsupport icon
License
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/music.json
components/icons/vscode-codicons-music.tsx
import * as React from "react";

/**
 * Music from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/music. Sized in em, colored by currentColor.
 */
export function VscMusicIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M12 5.20951V10.2675C11.7058 10.0974 11.3643 9.99998 11 9.99998C9.89543 9.99998 9 10.8954 9 12C9 13.1045 9.89543 14 11 14C12.1046 14 13 13.1045 13 12V1.92568C13 1.37245 12.4519 0.986213 11.9309 1.17228L5.53093 3.458C5.21254 3.57171 5 3.8733 5 4.21139V11.2675C4.70583 11.0974 4.36429 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1045 2.89543 15 4 15C5.10457 15 6 14.1045 6 13V7.35237L12 5.20951ZM12 4.14765L6 6.2905V4.35233L12 2.20948V4.14765ZM11 11C11.5523 11 12 11.4477 12 12C12 12.5523 11.5523 13 11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11ZM4 12C4.55228 12 5 12.4477 5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12Z"
      />
    </svg>
  );
}
With react-icons
import { VscMusic } from "react-icons/vsc";

export function Example() {
  return <VscMusic className="size-5" />;
}
music.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12 5.20951V10.2675C11.7058 10.0974 11.3643 9.99998 11 9.99998C9.89543 9.99998 9 10.8954 9 12C9 13.1045 9.89543 14 11 14C12.1046 14 13 13.1045 13 12V1.92568C13 1.37245 12.4519 0.986213 11.9309 1.17228L5.53093 3.458C5.21254 3.57171 5 3.8733 5 4.21139V11.2675C4.70583 11.0974 4.36429 11 4 11C2.89543 11 2 11.8954 2 13C2 14.1045 2.89543 15 4 15C5.10457 15 6 14.1045 6 13V7.35237L12 5.20951ZM12 4.14765L6 6.2905V4.35233L12 2.20948V4.14765ZM11 11C11.5523 11 12 11.4477 12 12C12 12.5523 11.5523 13 11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11ZM4 12C4.55228 12 5 12.4477 5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12Z"
  />
</svg>
Attribution
"Music" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: audio, sound, song, note

Music icon in other sets