metronome icon

metronome from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name: metronome
Set: Framework7 Icons
Style: Outline
Viewbox: 56×56
License: MIT

The same icon in other sets

metronomeHuge Icons metronomeLucide metronomeMaterial Design Icons metronomePhosphor metronomeTabler Icons

Use the metronome icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M12.578 28.105L6.133 40.738c-.61 1.196-.914 2.461-.914 3.657c0 3.398 2.46 6.304 6.562 6.304H44.22c4.125 0 6.562-2.906 6.562-6.304c0-1.196-.304-2.461-.914-3.68L33.602 8.793C32.5 6.66 30.203 5.301 28 5.301c-2.18 0-4.5 1.36-5.578 3.492l-5.625 11.062l2.742 2.743l6.117-12.141c.492-1.008 1.36-1.664 2.344-1.664s1.852.656 2.367 1.664l12.797 25.5H29.242L9.226 15.941c-.773-.773-1.828-.796-2.648 0c-.82.82-.773 1.899 0 2.696l17.344 17.32H12.836l2.555-5.04Zm17.39 4.899v-16.43c0-1.172-.702-1.922-1.874-1.922c-1.149 0-1.852.75-1.852 1.922v12.703ZM11.806 47.02c-1.735 0-2.742-1.313-2.742-2.766c0-.492.117-1.008.351-1.523l1.594-3.141l33.984-.047l1.594 3.188c.258.492.398 1.007.398 1.5c0 1.476-1.03 2.788-2.765 2.788Z"/></svg>

React

import type { SVGProps } from "react";

export function F7Metronome(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="M12.578 28.105L6.133 40.738c-.61 1.196-.914 2.461-.914 3.657c0 3.398 2.46 6.304 6.562 6.304H44.22c4.125 0 6.562-2.906 6.562-6.304c0-1.196-.304-2.461-.914-3.68L33.602 8.793C32.5 6.66 30.203 5.301 28 5.301c-2.18 0-4.5 1.36-5.578 3.492l-5.625 11.062l2.742 2.743l6.117-12.141c.492-1.008 1.36-1.664 2.344-1.664s1.852.656 2.367 1.664l12.797 25.5H29.242L9.226 15.941c-.773-.773-1.828-.796-2.648 0c-.82.82-.773 1.899 0 2.696l17.344 17.32H12.836l2.555-5.04Zm17.39 4.899v-16.43c0-1.172-.702-1.922-1.874-1.922c-1.149 0-1.852.75-1.852 1.922v12.703ZM11.806 47.02c-1.735 0-2.742-1.313-2.742-2.766c0-.492.117-1.008.351-1.523l1.594-3.141l33.984-.047l1.594 3.188c.258.492.398 1.007.398 1.5c0 1.476-1.03 2.788-2.765 2.788Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M12.578 28.105L6.133 40.738c-.61 1.196-.914 2.461-.914 3.657c0 3.398 2.46 6.304 6.562 6.304H44.22c4.125 0 6.562-2.906 6.562-6.304c0-1.196-.304-2.461-.914-3.68L33.602 8.793C32.5 6.66 30.203 5.301 28 5.301c-2.18 0-4.5 1.36-5.578 3.492l-5.625 11.062l2.742 2.743l6.117-12.141c.492-1.008 1.36-1.664 2.344-1.664s1.852.656 2.367 1.664l12.797 25.5H29.242L9.226 15.941c-.773-.773-1.828-.796-2.648 0c-.82.82-.773 1.899 0 2.696l17.344 17.32H12.836l2.555-5.04Zm17.39 4.899v-16.43c0-1.172-.702-1.922-1.874-1.922c-1.149 0-1.852.75-1.852 1.922v12.703ZM11.806 47.02c-1.735 0-2.742-1.313-2.742-2.766c0-.492.117-1.008.351-1.523l1.594-3.141l33.984-.047l1.594 3.188c.258.492.398 1.007.398 1.5c0 1.476-1.03 2.788-2.765 2.788Z"/></svg>
</template>

CSS

.icon-metronome {
  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%22M12.578%2028.105L6.133%2040.738c-.61%201.196-.914%202.461-.914%203.657c0%203.398%202.46%206.304%206.562%206.304H44.22c4.125%200%206.562-2.906%206.562-6.304c0-1.196-.304-2.461-.914-3.68L33.602%208.793C32.5%206.66%2030.203%205.301%2028%205.301c-2.18%200-4.5%201.36-5.578%203.492l-5.625%2011.062l2.742%202.743l6.117-12.141c.492-1.008%201.36-1.664%202.344-1.664s1.852.656%202.367%201.664l12.797%2025.5H29.242L9.226%2015.941c-.773-.773-1.828-.796-2.648%200c-.82.82-.773%201.899%200%202.696l17.344%2017.32H12.836l2.555-5.04Zm17.39%204.899v-16.43c0-1.172-.702-1.922-1.874-1.922c-1.149%200-1.852.75-1.852%201.922v12.703ZM11.806%2047.02c-1.735%200-2.742-1.313-2.742-2.766c0-.492.117-1.008.351-1.523l1.594-3.141l33.984-.047l1.594%203.188c.258.492.398%201.007.398%201.5c0%201.476-1.03%202.788-2.765%202.788Z%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%22M12.578%2028.105L6.133%2040.738c-.61%201.196-.914%202.461-.914%203.657c0%203.398%202.46%206.304%206.562%206.304H44.22c4.125%200%206.562-2.906%206.562-6.304c0-1.196-.304-2.461-.914-3.68L33.602%208.793C32.5%206.66%2030.203%205.301%2028%205.301c-2.18%200-4.5%201.36-5.578%203.492l-5.625%2011.062l2.742%202.743l6.117-12.141c.492-1.008%201.36-1.664%202.344-1.664s1.852.656%202.367%201.664l12.797%2025.5H29.242L9.226%2015.941c-.773-.773-1.828-.796-2.648%200c-.82.82-.773%201.899%200%202.696l17.344%2017.32H12.836l2.555-5.04Zm17.39%204.899v-16.43c0-1.172-.702-1.922-1.874-1.922c-1.149%200-1.852.75-1.852%201.922v12.703ZM11.806%2047.02c-1.735%200-2.742-1.313-2.742-2.766c0-.492.117-1.008.351-1.523l1.594-3.141l33.984-.047l1.594%203.188c.258.492.398%201.007.398%201.5c0%201.476-1.03%202.788-2.765%202.788Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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