megaphone icon
megaphone-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.
- Name
- megaphone-solid
- Set
- HeroIcons
- Style
- Solid 24x24
- Viewbox
- 24×24
- License
- MIT
3 other variants in HeroIcons
The same icon in other sets
megaphoneBootstrap IconsmegaphoneBoxIcons v2 SolidmegaphoneCodiconsmegaphoneEmoji One (Colored)megaphone-12-filledFluent UI System IconsmegaphoneFluent EmojimegaphoneFluent Emoji FlatmegaphoneFluent Emoji High ContrastmegaphoneFirefox OS EmojimegaphoneHealth IconsmegaphoneIconoirmegaphoneIonIconsmegaphoneLucidemegaphoneMajesticonsmegaphoneNoto EmojimegaphoneOcticonsmegaphoneOpenMojimegaphonePhosphormegaphonePixelarticonsmegaphonePrime Iconsmegaphone-fillRemix IconmegaphoneTwitter EmojimegaphoneUnicons
Use the megaphone icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.881 4.345A23.1 23.1 0 0 1 8.25 6H7.5a5.25 5.25 0 0 0-.88 10.427a21.6 21.6 0 0 0 1.378 3.94c.464 1.004 1.674 1.32 2.582.796l.657-.379c.88-.508 1.165-1.593.772-2.468a17 17 0 0 1-.628-1.607c1.918.258 3.76.75 5.5 1.446A21.7 21.7 0 0 0 18 11.25c0-2.414-.393-4.735-1.119-6.905m1.379-.605a23.2 23.2 0 0 1 1.24 7.51a23.2 23.2 0 0 1-1.41 7.992a.75.75 0 1 0 1.409.516a24.6 24.6 0 0 0 1.415-6.43a3 3 0 0 0 .836-2.078a3 3 0 0 0-.836-2.078a24.7 24.7 0 0 0-1.415-6.43a.75.75 0 1 0-1.409.516q.089.24.17.483"/></svg>
React
import type { SVGProps } from "react";
export function HeroiconsMegaphoneSolid(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.881 4.345A23.1 23.1 0 0 1 8.25 6H7.5a5.25 5.25 0 0 0-.88 10.427a21.6 21.6 0 0 0 1.378 3.94c.464 1.004 1.674 1.32 2.582.796l.657-.379c.88-.508 1.165-1.593.772-2.468a17 17 0 0 1-.628-1.607c1.918.258 3.76.75 5.5 1.446A21.7 21.7 0 0 0 18 11.25c0-2.414-.393-4.735-1.119-6.905m1.379-.605a23.2 23.2 0 0 1 1.24 7.51a23.2 23.2 0 0 1-1.41 7.992a.75.75 0 1 0 1.409.516a24.6 24.6 0 0 0 1.415-6.43a3 3 0 0 0 .836-2.078a3 3 0 0 0-.836-2.078a24.7 24.7 0 0 0-1.415-6.43a.75.75 0 1 0-1.409.516q.089.24.17.483"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.881 4.345A23.1 23.1 0 0 1 8.25 6H7.5a5.25 5.25 0 0 0-.88 10.427a21.6 21.6 0 0 0 1.378 3.94c.464 1.004 1.674 1.32 2.582.796l.657-.379c.88-.508 1.165-1.593.772-2.468a17 17 0 0 1-.628-1.607c1.918.258 3.76.75 5.5 1.446A21.7 21.7 0 0 0 18 11.25c0-2.414-.393-4.735-1.119-6.905m1.379-.605a23.2 23.2 0 0 1 1.24 7.51a23.2 23.2 0 0 1-1.41 7.992a.75.75 0 1 0 1.409.516a24.6 24.6 0 0 0 1.415-6.43a3 3 0 0 0 .836-2.078a3 3 0 0 0-.836-2.078a24.7 24.7 0 0 0-1.415-6.43a.75.75 0 1 0-1.409.516q.089.24.17.483"/></svg> </template>
CSS
.icon-megaphone-solid {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.881%204.345A23.1%2023.1%200%200%201%208.25%206H7.5a5.25%205.25%200%200%200-.88%2010.427a21.6%2021.6%200%200%200%201.378%203.94c.464%201.004%201.674%201.32%202.582.796l.657-.379c.88-.508%201.165-1.593.772-2.468a17%2017%200%200%201-.628-1.607c1.918.258%203.76.75%205.5%201.446A21.7%2021.7%200%200%200%2018%2011.25c0-2.414-.393-4.735-1.119-6.905m1.379-.605a23.2%2023.2%200%200%201%201.24%207.51a23.2%2023.2%200%200%201-1.41%207.992a.75.75%200%201%200%201.409.516a24.6%2024.6%200%200%200%201.415-6.43a3%203%200%200%200%20.836-2.078a3%203%200%200%200-.836-2.078a24.7%2024.7%200%200%200-1.415-6.43a.75.75%200%201%200-1.409.516q.089.24.17.483%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.881%204.345A23.1%2023.1%200%200%201%208.25%206H7.5a5.25%205.25%200%200%200-.88%2010.427a21.6%2021.6%200%200%200%201.378%203.94c.464%201.004%201.674%201.32%202.582.796l.657-.379c.88-.508%201.165-1.593.772-2.468a17%2017%200%200%201-.628-1.607c1.918.258%203.76.75%205.5%201.446A21.7%2021.7%200%200%200%2018%2011.25c0-2.414-.393-4.735-1.119-6.905m1.379-.605a23.2%2023.2%200%200%201%201.24%207.51a23.2%2023.2%200%200%201-1.41%207.992a.75.75%200%201%200%201.409.516a24.6%2024.6%200%200%200%201.415-6.43a3%203%200%200%200%20.836-2.078a3%203%200%200%200-.836-2.078a24.7%2024.7%200%200%200-1.415-6.43a.75.75%200%201%200-1.409.516q.089.24.17.483%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/megaphone-solid.svg?color=%231a73e8&size=48
