Embed this icon within HTML

Copy and paste the following SVG code into your HTML file where you want the icon to appear. Then, you can customize the SVG attributes, such as size or color, using inline styling or CSS classes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 18L9 6L19 3L19 15M9 10L19 7M4 18.5C4 17.1193 5.11929 16 6.5 16C7.88071 16 9 17.1193 9 18.5C9 19.8807 7.88071 21 6.5 21C5.11929 21 4 19.8807 4 18.5ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5C19 16.8807 17.8807 18 16.5 18C15.1193 18 14 16.8807 14 15.5Z" />
</svg>

Using as a React Component

You can integrate this icon in your React application using our React icons components. First install the package using YARN or NPM:

$ yarn add @josemi-icons/react

Now you can import this icon in your React application

import {MusicNoteIcon} from "@josemi-icons/react";

Alternatively, if you only need this icon jou can just copy and paste the following component into your React application:

const MusicNoteIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em">
        <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 18L9 6L19 3L19 15M9 10L19 7M4 18.5C4 17.1193 5.11929 16 6.5 16C7.88071 16 9 17.1193 9 18.5C9 19.8807 7.88071 21 6.5 21C5.11929 21 4 19.8807 4 18.5ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5C19 16.8807 17.8807 18 16.5 18C15.1193 18 14 16.8807 14 15.5Z" />
    </svg>
);

You can now use the icon component in your React application like any other React component.