Music Note 2 icon
Used to represent general music, audio, concert event and volume scenarios. Contains two variants. The Music Note 2 icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Music Note 2 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 { MusicNote224Regular, MusicNote224Filled } from "@fluentui/react-icons";
export function Example() {
return <MusicNote224Regular aria-label="Music Note 2" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_music_note_2_24_regular.svg" width="24" height="24" alt="Music Note 2"> 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="M19.6977 2.14829C19.8879 2.28981 20 2.51293 20 2.75001V16.25C20 16.2767 19.9986 16.303 19.9959 16.329C19.9986 16.3856 20 16.4427 20 16.5C20 18.433 18.433 20 16.5 20C14.567 20 13 18.433 13 16.5C13 14.567 14.567 13 16.5 13C17.2436 13 17.9331 13.2319 18.5 13.6273V7.75803L10 10.308V18.25C10 18.2766 9.99861 18.303 9.99589 18.3289C9.99862 18.3856 10 18.4426 10 18.5C10 20.433 8.433 22 6.5 22C4.567 22 3 20.433 3 18.5C3 16.567 4.567 15 6.5 15C7.24362 15 7.93308 15.2319 8.5 15.6273V5.75001C8.5 5.4188 8.71725 5.12681 9.03449 5.03164L19.0345 2.03164C19.2616 1.96351 19.5075 2.00677 19.6977 2.14829ZM10 8.74198L18.5 6.19198V3.75803L10 6.30803V8.74198ZM6.5 16.5C5.39543 16.5 4.5 17.3954 4.5 18.5C4.5 19.6046 5.39543 20.5 6.5 20.5C7.60457 20.5 8.5 19.6046 8.5 18.5C8.5 17.3954 7.60457 16.5 6.5 16.5ZM14.5 16.5C14.5 17.6046 15.3954 18.5 16.5 18.5C17.6046 18.5 18.5 17.6046 18.5 16.5C18.5 15.3954 17.6046 14.5 16.5 14.5C15.3954 14.5 14.5 15.3954 14.5 16.5Z" 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_2_24_regular.svg";Details
| Name | Music Note 2 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_music_note_2_24_regular.svg |
| Filled file | ic_fluent_music_note_2_24_filled.svg |
| React components | MusicNote224Regular, MusicNote224Filled |
| License | MIT (© Microsoft Corporation) |