megaphone loud icon

megaphone-loud-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.

Name: megaphone-loud-28
Set: Fluent UI System Color Icons
Style: 28
Viewbox: 28×28
License: MIT

4 other variants in Fluent UI System Color Icons

megaphone-loud-16 megaphone-loud-20 megaphone-loud-24 megaphone-loud-32

The same icon in other sets

megaphone-loud-16-filledFluent UI System Icons

Use the megaphone loud icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGtO2bPbqT)" fill-rule="evenodd" d="M10 21.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0m4.5-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6" clip-rule="evenodd"/><path fill="url(#SVGDxrGepwq)" fill-opacity=".8" fill-rule="evenodd" d="M10 21.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0m4.5-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6" clip-rule="evenodd"/><path fill="url(#SVGtR1SBdlr)" d="M4.997 24.194a2.75 2.75 0 0 0 3.174.515l14.31-7.154a2.75 2.75 0 0 0 .714-4.404L14.85 4.806a2.75 2.75 0 0 0-4.404.715L3.291 19.83a2.75 2.75 0 0 0 .516 3.174z"/><path fill="url(#SVGGKxZrc9g)" fill-opacity=".8" d="M4.997 24.194a2.75 2.75 0 0 0 3.174.515l14.31-7.154a2.75 2.75 0 0 0 .714-4.404L14.85 4.806a2.75 2.75 0 0 0-4.404.715L3.291 19.83a2.75 2.75 0 0 0 .516 3.174z"/><path fill="url(#SVGpaqaZdJr)" d="M17.526 4.466a.75.75 0 0 0 1.449.388l.647-2.415a.75.75 0 0 0-1.45-.388zM24.78 3.22a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.061-1.06l2.5-2.5a.75.75 0 0 1 1.06 0M22.5 9.752a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75"/><defs><linearGradient id="SVGtO2bPbqT" x1="20.929" x2="17.055" y1="31.786" y2="22.269" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#0c74a1"/></linearGradient><linearGradient id="SVGDxrGepwq" x1="12.571" x2="16.432" y1="18.286" y2="27.927" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#e362f8"/><stop offset=".656" stop-color="#96f" stop-opacity="0"/></linearGradient><linearGradient id="SVGtR1SBdlr" x1="3.751" x2="18.243" y1="7.937" y2="22.994" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><linearGradient id="SVGGKxZrc9g" x1="13.502" x2="22.693" y1="15.81" y2="30.904" gradientUnits="userSpaceOnUse"><stop stop-color="#96f" stop-opacity="0"/><stop offset=".63" stop-color="#e362f8"/></linearGradient><radialGradient id="SVGpaqaZdJr" cx="0" cy="0" r="1" gradientTransform="rotate(-45.022 28.031 .09)scale(27.4241 27.4432)" gradientUnits="userSpaceOnUse"><stop offset=".623" stop-color="#fb5937"/><stop offset=".935" stop-color="#ffa43d"/></radialGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorMegaphoneLoud28(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGtO2bPbqT)" fillRule="evenodd" d="M10 21.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0m4.5-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6" clipRule="evenodd"/><path fill="url(#SVGDxrGepwq)" fillOpacity=".8" fillRule="evenodd" d="M10 21.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0m4.5-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6" clipRule="evenodd"/><path fill="url(#SVGtR1SBdlr)" d="M4.997 24.194a2.75 2.75 0 0 0 3.174.515l14.31-7.154a2.75 2.75 0 0 0 .714-4.404L14.85 4.806a2.75 2.75 0 0 0-4.404.715L3.291 19.83a2.75 2.75 0 0 0 .516 3.174z"/><path fill="url(#SVGGKxZrc9g)" fillOpacity=".8" d="M4.997 24.194a2.75 2.75 0 0 0 3.174.515l14.31-7.154a2.75 2.75 0 0 0 .714-4.404L14.85 4.806a2.75 2.75 0 0 0-4.404.715L3.291 19.83a2.75 2.75 0 0 0 .516 3.174z"/><path fill="url(#SVGpaqaZdJr)" d="M17.526 4.466a.75.75 0 0 0 1.449.388l.647-2.415a.75.75 0 0 0-1.45-.388zM24.78 3.22a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.061-1.06l2.5-2.5a.75.75 0 0 1 1.06 0M22.5 9.752a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75"/><defs><linearGradient id="SVGtO2bPbqT" x1="20.929" x2="17.055" y1="31.786" y2="22.269" gradientUnits="userSpaceOnUse"><stop stopColor="#43e5ca"/><stop offset="1" stopColor="#0c74a1"/></linearGradient><linearGradient id="SVGDxrGepwq" x1="12.571" x2="16.432" y1="18.286" y2="27.927" gradientUnits="userSpaceOnUse"><stop offset=".08" stopColor="#e362f8"/><stop offset=".656" stopColor="#96f" stopOpacity="0"/></linearGradient><linearGradient id="SVGtR1SBdlr" x1="3.751" x2="18.243" y1="7.937" y2="22.994" gradientUnits="userSpaceOnUse"><stop stopColor="#43e5ca"/><stop offset="1" stopColor="#1384b1"/></linearGradient><linearGradient id="SVGGKxZrc9g" x1="13.502" x2="22.693" y1="15.81" y2="30.904" gradientUnits="userSpaceOnUse"><stop stopColor="#96f" stopOpacity="0"/><stop offset=".63" stopColor="#e362f8"/></linearGradient><radialGradient id="SVGpaqaZdJr" cx="0" cy="0" r="1" gradientTransform="rotate(-45.022 28.031 .09)scale(27.4241 27.4432)" gradientUnits="userSpaceOnUse"><stop offset=".623" stopColor="#fb5937"/><stop offset=".935" stopColor="#ffa43d"/></radialGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGtO2bPbqT)" fill-rule="evenodd" d="M10 21.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0m4.5-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6" clip-rule="evenodd"/><path fill="url(#SVGDxrGepwq)" fill-opacity=".8" fill-rule="evenodd" d="M10 21.5a4.5 4.5 0 1 1 9 0a4.5 4.5 0 0 1-9 0m4.5-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6" clip-rule="evenodd"/><path fill="url(#SVGtR1SBdlr)" d="M4.997 24.194a2.75 2.75 0 0 0 3.174.515l14.31-7.154a2.75 2.75 0 0 0 .714-4.404L14.85 4.806a2.75 2.75 0 0 0-4.404.715L3.291 19.83a2.75 2.75 0 0 0 .516 3.174z"/><path fill="url(#SVGGKxZrc9g)" fill-opacity=".8" d="M4.997 24.194a2.75 2.75 0 0 0 3.174.515l14.31-7.154a2.75 2.75 0 0 0 .714-4.404L14.85 4.806a2.75 2.75 0 0 0-4.404.715L3.291 19.83a2.75 2.75 0 0 0 .516 3.174z"/><path fill="url(#SVGpaqaZdJr)" d="M17.526 4.466a.75.75 0 0 0 1.449.388l.647-2.415a.75.75 0 0 0-1.45-.388zM24.78 3.22a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.061-1.06l2.5-2.5a.75.75 0 0 1 1.06 0M22.5 9.752a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75"/><defs><linearGradient id="SVGtO2bPbqT" x1="20.929" x2="17.055" y1="31.786" y2="22.269" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#0c74a1"/></linearGradient><linearGradient id="SVGDxrGepwq" x1="12.571" x2="16.432" y1="18.286" y2="27.927" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#e362f8"/><stop offset=".656" stop-color="#96f" stop-opacity="0"/></linearGradient><linearGradient id="SVGtR1SBdlr" x1="3.751" x2="18.243" y1="7.937" y2="22.994" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><linearGradient id="SVGGKxZrc9g" x1="13.502" x2="22.693" y1="15.81" y2="30.904" gradientUnits="userSpaceOnUse"><stop stop-color="#96f" stop-opacity="0"/><stop offset=".63" stop-color="#e362f8"/></linearGradient><radialGradient id="SVGpaqaZdJr" cx="0" cy="0" r="1" gradientTransform="rotate(-45.022 28.031 .09)scale(27.4241 27.4432)" gradientUnits="userSpaceOnUse"><stop offset=".623" stop-color="#fb5937"/><stop offset=".935" stop-color="#ffa43d"/></radialGradient></defs></g></svg>
</template>

CSS

.icon-megaphone-loud-28 {
  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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGtO2bPbqT)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2021.5a4.5%204.5%200%201%201%209%200a4.5%204.5%200%200%201-9%200m4.5-3a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDxrGepwq)%22%20fill-opacity%3D%22.8%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2021.5a4.5%204.5%200%201%201%209%200a4.5%204.5%200%200%201-9%200m4.5-3a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtR1SBdlr)%22%20d%3D%22M4.997%2024.194a2.75%202.75%200%200%200%203.174.515l14.31-7.154a2.75%202.75%200%200%200%20.714-4.404L14.85%204.806a2.75%202.75%200%200%200-4.404.715L3.291%2019.83a2.75%202.75%200%200%200%20.516%203.174z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGGKxZrc9g)%22%20fill-opacity%3D%22.8%22%20d%3D%22M4.997%2024.194a2.75%202.75%200%200%200%203.174.515l14.31-7.154a2.75%202.75%200%200%200%20.714-4.404L14.85%204.806a2.75%202.75%200%200%200-4.404.715L3.291%2019.83a2.75%202.75%200%200%200%20.516%203.174z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpaqaZdJr)%22%20d%3D%22M17.526%204.466a.75.75%200%200%200%201.449.388l.647-2.415a.75.75%200%200%200-1.45-.388zM24.78%203.22a.75.75%200%200%201%200%201.06l-2.5%202.5a.75.75%200%201%201-1.061-1.06l2.5-2.5a.75.75%200%200%201%201.06%200M22.5%209.752a.75.75%200%200%201%20.75-.75h2.5a.75.75%200%200%201%200%201.5h-2.5a.75.75%200%200%201-.75-.75%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGtO2bPbqT%22%20x1%3D%2220.929%22%20x2%3D%2217.055%22%20y1%3D%2231.786%22%20y2%3D%2222.269%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2343e5ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230c74a1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGDxrGepwq%22%20x1%3D%2212.571%22%20x2%3D%2216.432%22%20y1%3D%2218.286%22%20y2%3D%2227.927%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22%23e362f8%22%2F%3E%3Cstop%20offset%3D%22.656%22%20stop-color%3D%22%2396f%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGtR1SBdlr%22%20x1%3D%223.751%22%20x2%3D%2218.243%22%20y1%3D%227.937%22%20y2%3D%2222.994%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2343e5ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231384b1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGGKxZrc9g%22%20x1%3D%2213.502%22%20x2%3D%2222.693%22%20y1%3D%2215.81%22%20y2%3D%2230.904%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2396f%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.63%22%20stop-color%3D%22%23e362f8%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGpaqaZdJr%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-45.022%2028.031%20.09)scale(27.4241%2027.4432)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.623%22%20stop-color%3D%22%23fb5937%22%2F%3E%3Cstop%20offset%3D%22.935%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGtO2bPbqT)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2021.5a4.5%204.5%200%201%201%209%200a4.5%204.5%200%200%201-9%200m4.5-3a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDxrGepwq)%22%20fill-opacity%3D%22.8%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2021.5a4.5%204.5%200%201%201%209%200a4.5%204.5%200%200%201-9%200m4.5-3a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtR1SBdlr)%22%20d%3D%22M4.997%2024.194a2.75%202.75%200%200%200%203.174.515l14.31-7.154a2.75%202.75%200%200%200%20.714-4.404L14.85%204.806a2.75%202.75%200%200%200-4.404.715L3.291%2019.83a2.75%202.75%200%200%200%20.516%203.174z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGGKxZrc9g)%22%20fill-opacity%3D%22.8%22%20d%3D%22M4.997%2024.194a2.75%202.75%200%200%200%203.174.515l14.31-7.154a2.75%202.75%200%200%200%20.714-4.404L14.85%204.806a2.75%202.75%200%200%200-4.404.715L3.291%2019.83a2.75%202.75%200%200%200%20.516%203.174z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpaqaZdJr)%22%20d%3D%22M17.526%204.466a.75.75%200%200%200%201.449.388l.647-2.415a.75.75%200%200%200-1.45-.388zM24.78%203.22a.75.75%200%200%201%200%201.06l-2.5%202.5a.75.75%200%201%201-1.061-1.06l2.5-2.5a.75.75%200%200%201%201.06%200M22.5%209.752a.75.75%200%200%201%20.75-.75h2.5a.75.75%200%200%201%200%201.5h-2.5a.75.75%200%200%201-.75-.75%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGtO2bPbqT%22%20x1%3D%2220.929%22%20x2%3D%2217.055%22%20y1%3D%2231.786%22%20y2%3D%2222.269%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2343e5ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230c74a1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGDxrGepwq%22%20x1%3D%2212.571%22%20x2%3D%2216.432%22%20y1%3D%2218.286%22%20y2%3D%2227.927%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22%23e362f8%22%2F%3E%3Cstop%20offset%3D%22.656%22%20stop-color%3D%22%2396f%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGtR1SBdlr%22%20x1%3D%223.751%22%20x2%3D%2218.243%22%20y1%3D%227.937%22%20y2%3D%2222.994%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2343e5ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231384b1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGGKxZrc9g%22%20x1%3D%2213.502%22%20x2%3D%2222.693%22%20y1%3D%2215.81%22%20y2%3D%2230.904%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2396f%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.63%22%20stop-color%3D%22%23e362f8%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGpaqaZdJr%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-45.022%2028.031%20.09)scale(27.4241%2027.4432)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.623%22%20stop-color%3D%22%23fb5937%22%2F%3E%3Cstop%20offset%3D%22.935%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/megaphone-loud-28.svg?color=%231a73e8&size=48