Music Note 1 icon

Use the Music Note 1 icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { MusicNote124Regular, MusicNote124Filled } from "@fluentui/react-icons";

export function Example() {
  return <MusicNote124Regular aria-label="Music Note 1" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_music_note_1_24_regular.svg" width="24" height="24" alt="Music Note 1">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5133 2.04776C11.283 1.96139 11.025 1.99345 10.8228 2.13356C10.6206 2.27367 10.5 2.50402 10.5 2.75V14.8773C9.8152 14.3284 8.94595 14 8 14C5.79086 14 4 15.7909 4 18C4 20.2091 5.79086 22 8 22C10.0613 22 11.7584 20.4409 11.9763 18.4376C11.9918 18.3776 12 18.3148 12 18.25V8.83225L18.9867 11.4523C19.217 11.5386 19.475 11.5066 19.6772 11.3664C19.8794 11.2263 20 10.996 20 10.75V7.48251C20 6.12776 19.1596 4.91512 17.8912 4.43944L11.5133 2.04776ZM10.5 18C10.5 19.3807 9.38071 20.5 8 20.5C6.61929 20.5 5.5 19.3807 5.5 18C5.5 16.6193 6.61929 15.5 8 15.5C9.38071 15.5 10.5 16.6193 10.5 18ZM18.5 9.66775L12 7.23025V3.83225L17.3645 5.84393C18.0475 6.10007 18.5 6.75303 18.5 7.48251V9.66775Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/music_note_1_24_regular.svg";

Details

Keywords

concertmusicianartevent