hifispeaker icon

hifispeaker-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.

Name: hifispeaker-fill
Set: Framework7 Icons
Style: Fill
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

Use the hifispeaker icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.68 7.856v40.289c0 4.921 2.437 7.359 7.265 7.359h26.11c4.828 0 7.265-2.438 7.265-7.36V7.857c0-4.899-2.437-7.36-7.265-7.36h-26.11c-4.828 0-7.265 2.461-7.265 7.36m20.297 12.492c-3.633 0-6.516-2.907-6.516-6.563c0-3.633 2.883-6.539 6.516-6.515c3.632.023 6.539 2.882 6.562 6.515c.023 3.656-2.93 6.563-6.562 6.563M28 17.16a3.39 3.39 0 0 0 3.375-3.375c0-1.851-1.57-3.328-3.375-3.328c-1.875 0-3.375 1.453-3.375 3.328A3.39 3.39 0 0 0 28 17.16m0 31.383c-6.54 0-11.812-5.273-11.812-11.86c0-6.562 5.273-11.835 11.812-11.812c6.54.047 11.813 5.25 11.813 11.813c0 6.586-5.274 11.859-11.813 11.859m0-6.844a4.99 4.99 0 0 0 5.016-5.015c0-2.836-2.227-4.993-5.016-4.993s-5.016 2.157-5.016 4.993c0 2.789 2.274 5.015 5.016 5.015"/></svg>

React

import type { SVGProps } from "react";

export function F7HifispeakerFill(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="M7.68 7.856v40.289c0 4.921 2.437 7.359 7.265 7.359h26.11c4.828 0 7.265-2.438 7.265-7.36V7.857c0-4.899-2.437-7.36-7.265-7.36h-26.11c-4.828 0-7.265 2.461-7.265 7.36m20.297 12.492c-3.633 0-6.516-2.907-6.516-6.563c0-3.633 2.883-6.539 6.516-6.515c3.632.023 6.539 2.882 6.562 6.515c.023 3.656-2.93 6.563-6.562 6.563M28 17.16a3.39 3.39 0 0 0 3.375-3.375c0-1.851-1.57-3.328-3.375-3.328c-1.875 0-3.375 1.453-3.375 3.328A3.39 3.39 0 0 0 28 17.16m0 31.383c-6.54 0-11.812-5.273-11.812-11.86c0-6.562 5.273-11.835 11.812-11.812c6.54.047 11.813 5.25 11.813 11.813c0 6.586-5.274 11.859-11.813 11.859m0-6.844a4.99 4.99 0 0 0 5.016-5.015c0-2.836-2.227-4.993-5.016-4.993s-5.016 2.157-5.016 4.993c0 2.789 2.274 5.015 5.016 5.015"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.68 7.856v40.289c0 4.921 2.437 7.359 7.265 7.359h26.11c4.828 0 7.265-2.438 7.265-7.36V7.857c0-4.899-2.437-7.36-7.265-7.36h-26.11c-4.828 0-7.265 2.461-7.265 7.36m20.297 12.492c-3.633 0-6.516-2.907-6.516-6.563c0-3.633 2.883-6.539 6.516-6.515c3.632.023 6.539 2.882 6.562 6.515c.023 3.656-2.93 6.563-6.562 6.563M28 17.16a3.39 3.39 0 0 0 3.375-3.375c0-1.851-1.57-3.328-3.375-3.328c-1.875 0-3.375 1.453-3.375 3.328A3.39 3.39 0 0 0 28 17.16m0 31.383c-6.54 0-11.812-5.273-11.812-11.86c0-6.562 5.273-11.835 11.812-11.812c6.54.047 11.813 5.25 11.813 11.813c0 6.586-5.274 11.859-11.813 11.859m0-6.844a4.99 4.99 0 0 0 5.016-5.015c0-2.836-2.227-4.993-5.016-4.993s-5.016 2.157-5.016 4.993c0 2.789 2.274 5.015 5.016 5.015"/></svg>
</template>

CSS

.icon-hifispeaker-fill {
  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%22M7.68%207.856v40.289c0%204.921%202.437%207.359%207.265%207.359h26.11c4.828%200%207.265-2.438%207.265-7.36V7.857c0-4.899-2.437-7.36-7.265-7.36h-26.11c-4.828%200-7.265%202.461-7.265%207.36m20.297%2012.492c-3.633%200-6.516-2.907-6.516-6.563c0-3.633%202.883-6.539%206.516-6.515c3.632.023%206.539%202.882%206.562%206.515c.023%203.656-2.93%206.563-6.562%206.563M28%2017.16a3.39%203.39%200%200%200%203.375-3.375c0-1.851-1.57-3.328-3.375-3.328c-1.875%200-3.375%201.453-3.375%203.328A3.39%203.39%200%200%200%2028%2017.16m0%2031.383c-6.54%200-11.812-5.273-11.812-11.86c0-6.562%205.273-11.835%2011.812-11.812c6.54.047%2011.813%205.25%2011.813%2011.813c0%206.586-5.274%2011.859-11.813%2011.859m0-6.844a4.99%204.99%200%200%200%205.016-5.015c0-2.836-2.227-4.993-5.016-4.993s-5.016%202.157-5.016%204.993c0%202.789%202.274%205.015%205.016%205.015%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%22M7.68%207.856v40.289c0%204.921%202.437%207.359%207.265%207.359h26.11c4.828%200%207.265-2.438%207.265-7.36V7.857c0-4.899-2.437-7.36-7.265-7.36h-26.11c-4.828%200-7.265%202.461-7.265%207.36m20.297%2012.492c-3.633%200-6.516-2.907-6.516-6.563c0-3.633%202.883-6.539%206.516-6.515c3.632.023%206.539%202.882%206.562%206.515c.023%203.656-2.93%206.563-6.562%206.563M28%2017.16a3.39%203.39%200%200%200%203.375-3.375c0-1.851-1.57-3.328-3.375-3.328c-1.875%200-3.375%201.453-3.375%203.328A3.39%203.39%200%200%200%2028%2017.16m0%2031.383c-6.54%200-11.812-5.273-11.812-11.86c0-6.562%205.273-11.835%2011.812-11.812c6.54.047%2011.813%205.25%2011.813%2011.813c0%206.586-5.274%2011.859-11.813%2011.859m0-6.844a4.99%204.99%200%200%200%205.016-5.015c0-2.836-2.227-4.993-5.016-4.993s-5.016%202.157-5.016%204.993c0%202.789%202.274%205.015%205.016%205.015%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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