music note icon

music-note from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name
music-note
Set
IonIcons
Style
Regular
Viewbox
512×512
License
MIT

The same icon in other sets

music-noteAkar Iconsmusic-noteBootstrap Iconsmusic-noteFramework7 Iconsmusic-notecss.ggmusic-noteHumbleiconsmusic-noteIconoirmusic-noteMajesticonsmusic-noteMaterial Symbolsmusic-noteMaterial Symbols Lightmusic-noteMaterial Design Iconsmusic-notePhosphormusic-note-boldSolarmusic-noteUnicons

Use the music note icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M426 32.1c-2.2 0-5.1.6-5.1.6L203.3 65.9C189.5 69.6 177 83 176 97.5V384h-61v-.1c-28 0-51.1 20-51.1 48s23.1 48 51.3 48h36.2c15.3 0 28.9-6.9 38.3-17.5.1-.1.3-.1.4-.2.6-.6 1-1.5 1.5-2.1 1.3-1.6 2.4-3.2 3.4-5 9.6-14.1 13-32.8 13-41.1V182l208-38v192h-60.5c-28.3 0-51.2 19.9-51.2 48s22.9 48 51.2 48h37.2c18.2 0 34.1-6 43.2-21h.2c9-12 12-30.2 12-54.9V53.3c-.1-11.7-10-21.2-22.1-21.2z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonMusicNote(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M426 32.1c-2.2 0-5.1.6-5.1.6L203.3 65.9C189.5 69.6 177 83 176 97.5V384h-61v-.1c-28 0-51.1 20-51.1 48s23.1 48 51.3 48h36.2c15.3 0 28.9-6.9 38.3-17.5.1-.1.3-.1.4-.2.6-.6 1-1.5 1.5-2.1 1.3-1.6 2.4-3.2 3.4-5 9.6-14.1 13-32.8 13-41.1V182l208-38v192h-60.5c-28.3 0-51.2 19.9-51.2 48s22.9 48 51.2 48h37.2c18.2 0 34.1-6 43.2-21h.2c9-12 12-30.2 12-54.9V53.3c-.1-11.7-10-21.2-22.1-21.2z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M426 32.1c-2.2 0-5.1.6-5.1.6L203.3 65.9C189.5 69.6 177 83 176 97.5V384h-61v-.1c-28 0-51.1 20-51.1 48s23.1 48 51.3 48h36.2c15.3 0 28.9-6.9 38.3-17.5.1-.1.3-.1.4-.2.6-.6 1-1.5 1.5-2.1 1.3-1.6 2.4-3.2 3.4-5 9.6-14.1 13-32.8 13-41.1V182l208-38v192h-60.5c-28.3 0-51.2 19.9-51.2 48s22.9 48 51.2 48h37.2c18.2 0 34.1-6 43.2-21h.2c9-12 12-30.2 12-54.9V53.3c-.1-11.7-10-21.2-22.1-21.2z" fill="currentColor"/></svg>
</template>

CSS

.icon-music-note {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M426%2032.1c-2.2%200-5.1.6-5.1.6L203.3%2065.9C189.5%2069.6%20177%2083%20176%2097.5V384h-61v-.1c-28%200-51.1%2020-51.1%2048s23.1%2048%2051.3%2048h36.2c15.3%200%2028.9-6.9%2038.3-17.5.1-.1.3-.1.4-.2.6-.6%201-1.5%201.5-2.1%201.3-1.6%202.4-3.2%203.4-5%209.6-14.1%2013-32.8%2013-41.1V182l208-38v192h-60.5c-28.3%200-51.2%2019.9-51.2%2048s22.9%2048%2051.2%2048h37.2c18.2%200%2034.1-6%2043.2-21h.2c9-12%2012-30.2%2012-54.9V53.3c-.1-11.7-10-21.2-22.1-21.2z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M426%2032.1c-2.2%200-5.1.6-5.1.6L203.3%2065.9C189.5%2069.6%20177%2083%20176%2097.5V384h-61v-.1c-28%200-51.1%2020-51.1%2048s23.1%2048%2051.3%2048h36.2c15.3%200%2028.9-6.9%2038.3-17.5.1-.1.3-.1.4-.2.6-.6%201-1.5%201.5-2.1%201.3-1.6%202.4-3.2%203.4-5%209.6-14.1%2013-32.8%2013-41.1V182l208-38v192h-60.5c-28.3%200-51.2%2019.9-51.2%2048s22.9%2048%2051.2%2048h37.2c18.2%200%2034.1-6%2043.2-21h.2c9-12%2012-30.2%2012-54.9V53.3c-.1-11.7-10-21.2-22.1-21.2z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/music-note.svg?color=%231a73e8&size=48

Music Note icon — IonIcons · IconsDB