megaphone loud icon
megaphone-loud-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.
- Name
- megaphone-loud-16
- Set
- Fluent UI System Color Icons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
4 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the megaphone loud icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVG99f8IcRT)" fill-rule="evenodd" d="M5 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="url(#SVG5hkHteXq)" fill-opacity=".8" fill-rule="evenodd" d="M5 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="url(#SVGuEpgQcrH)" d="M2.81 13.592a1.4 1.4 0 0 0 1.556.288l8.802-3.891a1.395 1.395 0 0 0 .422-2.264L8.258 2.409a1.4 1.4 0 0 0-2.269.426l-3.871 8.809a1.39 1.39 0 0 0 .292 1.548z"/><path fill="url(#SVGad2kowLP)" fill-opacity=".8" d="M2.81 13.592a1.4 1.4 0 0 0 1.556.288l8.802-3.891a1.395 1.395 0 0 0 .422-2.264L8.258 2.409a1.4 1.4 0 0 0-2.269.426l-3.871 8.809a1.39 1.39 0 0 0 .292 1.548z"/><path fill="url(#SVGiFHB0bfJ)" d="M10.871 1.015a.5.5 0 0 1 .364.606l-.25 1a.5.5 0 1 1-.97-.242l.25-1a.5.5 0 0 1 .606-.364m2.983 1.131a.5.5 0 0 1 0 .707l-1 1a.5.5 0 0 1-.708-.707l1-1a.5.5 0 0 1 .708 0M14.5 5h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1"/><defs><linearGradient id="SVG99f8IcRT" x1="12.286" x2="9.703" y1="18.857" y2="12.513" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#0c74a1"/></linearGradient><linearGradient id="SVG5hkHteXq" x1="6.714" x2="9.288" y1="9.857" y2="16.285" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#e362f8"/><stop offset=".656" stop-color="#96f" stop-opacity="0"/></linearGradient><linearGradient id="SVGuEpgQcrH" x1="2.429" x2="10.71" y1="4.25" y2="12.854" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><linearGradient id="SVGad2kowLP" x1="8.001" x2="13.253" y1="8.749" y2="17.374" gradientUnits="userSpaceOnUse"><stop stop-color="#96f" stop-opacity="0"/><stop offset=".63" stop-color="#e362f8"/></linearGradient><radialGradient id="SVGiFHB0bfJ" cx="0" cy="0" r="1" gradientTransform="rotate(-45 15.914 -.207)scale(15.2297 15.2403)" 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 FluentColorMegaphoneLoud16(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVG99f8IcRT)" fillRule="evenodd" d="M5 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clipRule="evenodd"/><path fill="url(#SVG5hkHteXq)" fillOpacity=".8" fillRule="evenodd" d="M5 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clipRule="evenodd"/><path fill="url(#SVGuEpgQcrH)" d="M2.81 13.592a1.4 1.4 0 0 0 1.556.288l8.802-3.891a1.395 1.395 0 0 0 .422-2.264L8.258 2.409a1.4 1.4 0 0 0-2.269.426l-3.871 8.809a1.39 1.39 0 0 0 .292 1.548z"/><path fill="url(#SVGad2kowLP)" fillOpacity=".8" d="M2.81 13.592a1.4 1.4 0 0 0 1.556.288l8.802-3.891a1.395 1.395 0 0 0 .422-2.264L8.258 2.409a1.4 1.4 0 0 0-2.269.426l-3.871 8.809a1.39 1.39 0 0 0 .292 1.548z"/><path fill="url(#SVGiFHB0bfJ)" d="M10.871 1.015a.5.5 0 0 1 .364.606l-.25 1a.5.5 0 1 1-.97-.242l.25-1a.5.5 0 0 1 .606-.364m2.983 1.131a.5.5 0 0 1 0 .707l-1 1a.5.5 0 0 1-.708-.707l1-1a.5.5 0 0 1 .708 0M14.5 5h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1"/><defs><linearGradient id="SVG99f8IcRT" x1="12.286" x2="9.703" y1="18.857" y2="12.513" gradientUnits="userSpaceOnUse"><stop stopColor="#43e5ca"/><stop offset="1" stopColor="#0c74a1"/></linearGradient><linearGradient id="SVG5hkHteXq" x1="6.714" x2="9.288" y1="9.857" y2="16.285" gradientUnits="userSpaceOnUse"><stop offset=".08" stopColor="#e362f8"/><stop offset=".656" stopColor="#96f" stopOpacity="0"/></linearGradient><linearGradient id="SVGuEpgQcrH" x1="2.429" x2="10.71" y1="4.25" y2="12.854" gradientUnits="userSpaceOnUse"><stop stopColor="#43e5ca"/><stop offset="1" stopColor="#1384b1"/></linearGradient><linearGradient id="SVGad2kowLP" x1="8.001" x2="13.253" y1="8.749" y2="17.374" gradientUnits="userSpaceOnUse"><stop stopColor="#96f" stopOpacity="0"/><stop offset=".63" stopColor="#e362f8"/></linearGradient><radialGradient id="SVGiFHB0bfJ" cx="0" cy="0" r="1" gradientTransform="rotate(-45 15.914 -.207)scale(15.2297 15.2403)" 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 16 16"><g fill="none"><path fill="url(#SVG99f8IcRT)" fill-rule="evenodd" d="M5 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="url(#SVG5hkHteXq)" fill-opacity=".8" fill-rule="evenodd" d="M5 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/><path fill="url(#SVGuEpgQcrH)" d="M2.81 13.592a1.4 1.4 0 0 0 1.556.288l8.802-3.891a1.395 1.395 0 0 0 .422-2.264L8.258 2.409a1.4 1.4 0 0 0-2.269.426l-3.871 8.809a1.39 1.39 0 0 0 .292 1.548z"/><path fill="url(#SVGad2kowLP)" fill-opacity=".8" d="M2.81 13.592a1.4 1.4 0 0 0 1.556.288l8.802-3.891a1.395 1.395 0 0 0 .422-2.264L8.258 2.409a1.4 1.4 0 0 0-2.269.426l-3.871 8.809a1.39 1.39 0 0 0 .292 1.548z"/><path fill="url(#SVGiFHB0bfJ)" d="M10.871 1.015a.5.5 0 0 1 .364.606l-.25 1a.5.5 0 1 1-.97-.242l.25-1a.5.5 0 0 1 .606-.364m2.983 1.131a.5.5 0 0 1 0 .707l-1 1a.5.5 0 0 1-.708-.707l1-1a.5.5 0 0 1 .708 0M14.5 5h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1"/><defs><linearGradient id="SVG99f8IcRT" x1="12.286" x2="9.703" y1="18.857" y2="12.513" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#0c74a1"/></linearGradient><linearGradient id="SVG5hkHteXq" x1="6.714" x2="9.288" y1="9.857" y2="16.285" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#e362f8"/><stop offset=".656" stop-color="#96f" stop-opacity="0"/></linearGradient><linearGradient id="SVGuEpgQcrH" x1="2.429" x2="10.71" y1="4.25" y2="12.854" gradientUnits="userSpaceOnUse"><stop stop-color="#43e5ca"/><stop offset="1" stop-color="#1384b1"/></linearGradient><linearGradient id="SVGad2kowLP" x1="8.001" x2="13.253" y1="8.749" y2="17.374" gradientUnits="userSpaceOnUse"><stop stop-color="#96f" stop-opacity="0"/><stop offset=".63" stop-color="#e362f8"/></linearGradient><radialGradient id="SVGiFHB0bfJ" cx="0" cy="0" r="1" gradientTransform="rotate(-45 15.914 -.207)scale(15.2297 15.2403)" gradientUnits="userSpaceOnUse"><stop offset=".623" stop-color="#fb5937"/><stop offset=".935" stop-color="#ffa43d"/></radialGradient></defs></g></svg> </template>
CSS
.icon-megaphone-loud-16 {
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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG99f8IcRT)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5%2012a3%203%200%201%201%206%200a3%203%200%200%201-6%200m3-2a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG5hkHteXq)%22%20fill-opacity%3D%22.8%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5%2012a3%203%200%201%201%206%200a3%203%200%200%201-6%200m3-2a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuEpgQcrH)%22%20d%3D%22M2.81%2013.592a1.4%201.4%200%200%200%201.556.288l8.802-3.891a1.395%201.395%200%200%200%20.422-2.264L8.258%202.409a1.4%201.4%200%200%200-2.269.426l-3.871%208.809a1.39%201.39%200%200%200%20.292%201.548z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGad2kowLP)%22%20fill-opacity%3D%22.8%22%20d%3D%22M2.81%2013.592a1.4%201.4%200%200%200%201.556.288l8.802-3.891a1.395%201.395%200%200%200%20.422-2.264L8.258%202.409a1.4%201.4%200%200%200-2.269.426l-3.871%208.809a1.39%201.39%200%200%200%20.292%201.548z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGiFHB0bfJ)%22%20d%3D%22M10.871%201.015a.5.5%200%200%201%20.364.606l-.25%201a.5.5%200%201%201-.97-.242l.25-1a.5.5%200%200%201%20.606-.364m2.983%201.131a.5.5%200%200%201%200%20.707l-1%201a.5.5%200%200%201-.708-.707l1-1a.5.5%200%200%201%20.708%200M14.5%205h-1a.5.5%200%200%200%200%201h1a.5.5%200%200%200%200-1%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG99f8IcRT%22%20x1%3D%2212.286%22%20x2%3D%229.703%22%20y1%3D%2218.857%22%20y2%3D%2212.513%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%22SVG5hkHteXq%22%20x1%3D%226.714%22%20x2%3D%229.288%22%20y1%3D%229.857%22%20y2%3D%2216.285%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%22SVGuEpgQcrH%22%20x1%3D%222.429%22%20x2%3D%2210.71%22%20y1%3D%224.25%22%20y2%3D%2212.854%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%22SVGad2kowLP%22%20x1%3D%228.001%22%20x2%3D%2213.253%22%20y1%3D%228.749%22%20y2%3D%2217.374%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%22SVGiFHB0bfJ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-45%2015.914%20-.207)scale(15.2297%2015.2403)%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG99f8IcRT)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5%2012a3%203%200%201%201%206%200a3%203%200%200%201-6%200m3-2a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG5hkHteXq)%22%20fill-opacity%3D%22.8%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5%2012a3%203%200%201%201%206%200a3%203%200%200%201-6%200m3-2a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuEpgQcrH)%22%20d%3D%22M2.81%2013.592a1.4%201.4%200%200%200%201.556.288l8.802-3.891a1.395%201.395%200%200%200%20.422-2.264L8.258%202.409a1.4%201.4%200%200%200-2.269.426l-3.871%208.809a1.39%201.39%200%200%200%20.292%201.548z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGad2kowLP)%22%20fill-opacity%3D%22.8%22%20d%3D%22M2.81%2013.592a1.4%201.4%200%200%200%201.556.288l8.802-3.891a1.395%201.395%200%200%200%20.422-2.264L8.258%202.409a1.4%201.4%200%200%200-2.269.426l-3.871%208.809a1.39%201.39%200%200%200%20.292%201.548z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGiFHB0bfJ)%22%20d%3D%22M10.871%201.015a.5.5%200%200%201%20.364.606l-.25%201a.5.5%200%201%201-.97-.242l.25-1a.5.5%200%200%201%20.606-.364m2.983%201.131a.5.5%200%200%201%200%20.707l-1%201a.5.5%200%200%201-.708-.707l1-1a.5.5%200%200%201%20.708%200M14.5%205h-1a.5.5%200%200%200%200%201h1a.5.5%200%200%200%200-1%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG99f8IcRT%22%20x1%3D%2212.286%22%20x2%3D%229.703%22%20y1%3D%2218.857%22%20y2%3D%2212.513%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%22SVG5hkHteXq%22%20x1%3D%226.714%22%20x2%3D%229.288%22%20y1%3D%229.857%22%20y2%3D%2216.285%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%22SVGuEpgQcrH%22%20x1%3D%222.429%22%20x2%3D%2210.71%22%20y1%3D%224.25%22%20y2%3D%2212.854%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%22SVGad2kowLP%22%20x1%3D%228.001%22%20x2%3D%2213.253%22%20y1%3D%228.749%22%20y2%3D%2217.374%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%22SVGiFHB0bfJ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-45%2015.914%20-.207)scale(15.2297%2015.2403)%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-16.svg?color=%231a73e8&size=48
