bluenote icon

bluenote from Material Symbols by Google · Regular · Apache-2.0 Free for personal and commercial use.

Name
bluenote
Set
Material Symbols
Style
Regular
Viewbox
24×24
License
Apache 2.0

Use the bluenote icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8 21v-5l-4-4h16l-4 4v5Zm2-5h1v-2.975h-1Zm0 4h1v-1.5h1v-1H9v1h1Zm3 0h1v-3.5h-1Zm-1-4.5h3v-1h-1V13h-1v1.5h-1ZM3.225 10Q3.9 6.975 6.338 4.987Q8.775 3 12 3t5.663 1.987Q20.1 6.975 20.775 10H18.7q-.65-2.2-2.488-3.6Q14.375 5 12 5T7.787 6.4Q5.95 7.8 5.3 10ZM8 10q.575-1.125 1.625-1.812Q10.675 7.5 12 7.5t2.375.688Q15.425 8.875 16 10Z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsBluenote(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8 21v-5l-4-4h16l-4 4v5Zm2-5h1v-2.975h-1Zm0 4h1v-1.5h1v-1H9v1h1Zm3 0h1v-3.5h-1Zm-1-4.5h3v-1h-1V13h-1v1.5h-1ZM3.225 10Q3.9 6.975 6.338 4.987Q8.775 3 12 3t5.663 1.987Q20.1 6.975 20.775 10H18.7q-.65-2.2-2.488-3.6Q14.375 5 12 5T7.787 6.4Q5.95 7.8 5.3 10ZM8 10q.575-1.125 1.625-1.812Q10.675 7.5 12 7.5t2.375.688Q15.425 8.875 16 10Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8 21v-5l-4-4h16l-4 4v5Zm2-5h1v-2.975h-1Zm0 4h1v-1.5h1v-1H9v1h1Zm3 0h1v-3.5h-1Zm-1-4.5h3v-1h-1V13h-1v1.5h-1ZM3.225 10Q3.9 6.975 6.338 4.987Q8.775 3 12 3t5.663 1.987Q20.1 6.975 20.775 10H18.7q-.65-2.2-2.488-3.6Q14.375 5 12 5T7.787 6.4Q5.95 7.8 5.3 10ZM8 10q.575-1.125 1.625-1.812Q10.675 7.5 12 7.5t2.375.688Q15.425 8.875 16 10Z"/></svg>
</template>

CSS

.icon-bluenote {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%2021v-5l-4-4h16l-4%204v5Zm2-5h1v-2.975h-1Zm0%204h1v-1.5h1v-1H9v1h1Zm3%200h1v-3.5h-1Zm-1-4.5h3v-1h-1V13h-1v1.5h-1ZM3.225%2010Q3.9%206.975%206.338%204.987Q8.775%203%2012%203t5.663%201.987Q20.1%206.975%2020.775%2010H18.7q-.65-2.2-2.488-3.6Q14.375%205%2012%205T7.787%206.4Q5.95%207.8%205.3%2010ZM8%2010q.575-1.125%201.625-1.812Q10.675%207.5%2012%207.5t2.375.688Q15.425%208.875%2016%2010Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%2021v-5l-4-4h16l-4%204v5Zm2-5h1v-2.975h-1Zm0%204h1v-1.5h1v-1H9v1h1Zm3%200h1v-3.5h-1Zm-1-4.5h3v-1h-1V13h-1v1.5h-1ZM3.225%2010Q3.9%206.975%206.338%204.987Q8.775%203%2012%203t5.663%201.987Q20.1%206.975%2020.775%2010H18.7q-.65-2.2-2.488-3.6Q14.375%205%2012%205T7.787%206.4Q5.95%207.8%205.3%2010ZM8%2010q.575-1.125%201.625-1.812Q10.675%207.5%2012%207.5t2.375.688Q15.425%208.875%2016%2010Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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