music note list icon

music-note-list from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name
music-note-list
Set
Framework7 Icons
Style
Outline
Viewbox
56×56
License
MIT

The same icon in other sets

music-note-listBootstrap Icons

Related icons in Framework7 Icons

music-albumsmusic-housemusic-micmusic-notemusic-note-2

Use the music note list icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M29.746 51.836c3.469 0 8.719-2.602 8.719-9.492V20.898c0-1.171.187-1.382 1.242-1.593l11.18-2.461c.82-.188 1.36-.844 1.36-1.664V6.344c0-1.313-1.056-2.18-2.345-1.899L37.48 7.141c-1.617.351-2.484 1.195-2.484 2.601l.14 26.063c0 1.078-.492 1.78-1.453 1.968l-3.726.797c-4.781.985-7.008 3.446-7.008 7.032c0 3.656 2.836 6.234 6.797 6.234M5.348 16.375H26.3c.89 0 1.593-.727 1.593-1.594s-.703-1.57-1.593-1.57H5.348c-.868 0-1.594.703-1.594 1.57a1.61 1.61 0 0 0 1.594 1.594m0 8.344H26.3c.914 0 1.593-.727 1.593-1.617c0-.868-.703-1.547-1.593-1.547H5.348c-.868 0-1.594.68-1.594 1.547a1.6 1.6 0 0 0 1.594 1.617m0 8.343H26.3c.914 0 1.593-.703 1.593-1.593c0-.867-.703-1.57-1.593-1.57H5.348a1.58 1.58 0 1 0 0 3.163"/></svg>

React

import type { SVGProps } from "react";

export function F7MusicNoteList(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M29.746 51.836c3.469 0 8.719-2.602 8.719-9.492V20.898c0-1.171.187-1.382 1.242-1.593l11.18-2.461c.82-.188 1.36-.844 1.36-1.664V6.344c0-1.313-1.056-2.18-2.345-1.899L37.48 7.141c-1.617.351-2.484 1.195-2.484 2.601l.14 26.063c0 1.078-.492 1.78-1.453 1.968l-3.726.797c-4.781.985-7.008 3.446-7.008 7.032c0 3.656 2.836 6.234 6.797 6.234M5.348 16.375H26.3c.89 0 1.593-.727 1.593-1.594s-.703-1.57-1.593-1.57H5.348c-.868 0-1.594.703-1.594 1.57a1.61 1.61 0 0 0 1.594 1.594m0 8.344H26.3c.914 0 1.593-.727 1.593-1.617c0-.868-.703-1.547-1.593-1.547H5.348c-.868 0-1.594.68-1.594 1.547a1.6 1.6 0 0 0 1.594 1.617m0 8.343H26.3c.914 0 1.593-.703 1.593-1.593c0-.867-.703-1.57-1.593-1.57H5.348a1.58 1.58 0 1 0 0 3.163"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M29.746 51.836c3.469 0 8.719-2.602 8.719-9.492V20.898c0-1.171.187-1.382 1.242-1.593l11.18-2.461c.82-.188 1.36-.844 1.36-1.664V6.344c0-1.313-1.056-2.18-2.345-1.899L37.48 7.141c-1.617.351-2.484 1.195-2.484 2.601l.14 26.063c0 1.078-.492 1.78-1.453 1.968l-3.726.797c-4.781.985-7.008 3.446-7.008 7.032c0 3.656 2.836 6.234 6.797 6.234M5.348 16.375H26.3c.89 0 1.593-.727 1.593-1.594s-.703-1.57-1.593-1.57H5.348c-.868 0-1.594.703-1.594 1.57a1.61 1.61 0 0 0 1.594 1.594m0 8.344H26.3c.914 0 1.593-.727 1.593-1.617c0-.868-.703-1.547-1.593-1.547H5.348c-.868 0-1.594.68-1.594 1.547a1.6 1.6 0 0 0 1.594 1.617m0 8.343H26.3c.914 0 1.593-.703 1.593-1.593c0-.867-.703-1.57-1.593-1.57H5.348a1.58 1.58 0 1 0 0 3.163"/></svg>
</template>

CSS

.icon-music-note-list {
  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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M29.746%2051.836c3.469%200%208.719-2.602%208.719-9.492V20.898c0-1.171.187-1.382%201.242-1.593l11.18-2.461c.82-.188%201.36-.844%201.36-1.664V6.344c0-1.313-1.056-2.18-2.345-1.899L37.48%207.141c-1.617.351-2.484%201.195-2.484%202.601l.14%2026.063c0%201.078-.492%201.78-1.453%201.968l-3.726.797c-4.781.985-7.008%203.446-7.008%207.032c0%203.656%202.836%206.234%206.797%206.234M5.348%2016.375H26.3c.89%200%201.593-.727%201.593-1.594s-.703-1.57-1.593-1.57H5.348c-.868%200-1.594.703-1.594%201.57a1.61%201.61%200%200%200%201.594%201.594m0%208.344H26.3c.914%200%201.593-.727%201.593-1.617c0-.868-.703-1.547-1.593-1.547H5.348c-.868%200-1.594.68-1.594%201.547a1.6%201.6%200%200%200%201.594%201.617m0%208.343H26.3c.914%200%201.593-.703%201.593-1.593c0-.867-.703-1.57-1.593-1.57H5.348a1.58%201.58%200%201%200%200%203.163%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M29.746%2051.836c3.469%200%208.719-2.602%208.719-9.492V20.898c0-1.171.187-1.382%201.242-1.593l11.18-2.461c.82-.188%201.36-.844%201.36-1.664V6.344c0-1.313-1.056-2.18-2.345-1.899L37.48%207.141c-1.617.351-2.484%201.195-2.484%202.601l.14%2026.063c0%201.078-.492%201.78-1.453%201.968l-3.726.797c-4.781.985-7.008%203.446-7.008%207.032c0%203.656%202.836%206.234%206.797%206.234M5.348%2016.375H26.3c.89%200%201.593-.727%201.593-1.594s-.703-1.57-1.593-1.57H5.348c-.868%200-1.594.703-1.594%201.57a1.61%201.61%200%200%200%201.594%201.594m0%208.344H26.3c.914%200%201.593-.727%201.593-1.617c0-.868-.703-1.547-1.593-1.547H5.348c-.868%200-1.594.68-1.594%201.547a1.6%201.6%200%200%200%201.594%201.617m0%208.343H26.3c.914%200%201.593-.703%201.593-1.593c0-.867-.703-1.57-1.593-1.57H5.348a1.58%201.58%200%201%200%200%203.163%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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