Loudspeaker アイコン
fluent-emoji:loudspeaker
Loudspeaker アイコン(fluent-emoji:loudspeaker)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><circle cx="26.281" cy="15.946" r="3.781" fill="url(#ib9mGNd)"/><circle cx="26.281" cy="15.946" r="3.781" fill="url(#ighq4ib)"/><path fill="url(#iQuu2Kb)" d="M5.25 21.04h4.844v7.28a.5.5 0 0 1-.5.5H5.75a.5.5 0 0 1-.5-.5z"/><path fill="url(#irNdrqP)" d="M5.25 21.04h4.844v7.28a.5.5 0 0 1-.5.5H5.75a.5.5 0 0 1-.5-.5z"/><g filter="url(#iFiBMvc)"><path fill="url(#iNXw0Ob)" d="M2.143 10.81a.75.75 0 0 1 .75-.75h9.257v11.88H2.893a.75.75 0 0 1-.75-.75z"/></g><g filter="url(#iTaMYxh)"><path fill="url(#iNEFHrb)" d="M22.219 5.758c-3.203 2-6.516 3.985-10.069 4.297V21.94h.156c3.494.355 6.756 2.31 9.913 4.282l1.132-.154v-4.129a.75.75 0 0 0 .743-.75V10.812a.75.75 0 0 0-.743-.75V5.911z"/></g><g filter="url(#indOVie)"><rect width="6.125" height="25.75" x="21.75" y="3.071" fill="url(#ijhCm2c)" rx="3.063"/><rect width="6.125" height="25.75" x="21.75" y="3.071" fill="url(#iHlz2ad)" rx="3.063"/></g><defs><radialGradient id="ib9mGNd" cx="0" cy="0" r="1" gradientTransform="matrix(-2.03126 1.49998 -1.4481 -1.96101 29.687 14.665)" gradientUnits="userSpaceOnUse"><stop offset=".363" stop-color="#6E6279"/><stop offset="1" stop-color="#5A4C67"/></radialGradient><radialGradient id="iQuu2Kb" cx="0" cy="0" r="1" gradientTransform="matrix(0 -6.5 7.23214 0 7.672 28.29)" gradientUnits="userSpaceOnUse"><stop offset=".429" stop-color="#C0B2D4"/><stop offset="1" stop-color="#B4A0BC"/></radialGradient><radialGradient id="iNEFHrb" cx="0" cy="0" r="1" gradientTransform="matrix(5.875 15.50004 -16.43653 6.22997 13.375 7.415)" gradientUnits="userSpaceOnUse"><stop offset=".253" stop-color="#CFCCD5"/><stop offset="1" stop-color="#C1B6D2"/></radialGradient><radialGradient id="iHlz2ad" cx="0" cy="0" r="1" gradientTransform="matrix(0 14.125 -3.375 0 27 8.54)" gradientUnits="userSpaceOnUse"><stop offset=".283" stop-color="#FF4F8A"/><stop offset="1" stop-color="#FF4F8A" stop-opacity="0"/></radialGradient><linearGradient id="ighq4ib" x1="27.75" x2="28.25" y1="19.727" y2="16.227" gradientUnits="userSpaceOnUse"><stop offset=".306" stop-color="#3A3141"/><stop offset="1" stop-color="#3A3141" stop-opacity="0"/></linearGradient><linearGradient id="irNdrqP" x1="7.672" x2="7.672" y1="28.821" y2="27.165" gradientUnits="userSpaceOnUse"><stop stop-color="#B5A4D2"/><stop offset="1" stop-color="#B5A4D2" stop-opacity="0"/></linearGradient><linearGradient id="iNXw0Ob" x1="2.562" x2="12.875" y1="17.665" y2="17.665" gradientUnits="userSpaceOnUse"><stop stop-color="#F44065"/><stop offset="1" stop-color="#D52E84"/></linearGradient><linearGradient id="ijhCm2c" x1="24.813" x2="24.813" y1="3.071" y2="28.821" gradientUnits="userSpaceOnUse"><stop stop-color="#F94E87"/><stop offset="1" stop-color="#D21F6B"/></linearGradient><filter id="iFiBMvc" width="10.257" height="13.879" x="2.143" y="8.06" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".25" dy="-2"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.160784 0 0 0 0 0.352941 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_17873"/></filter><filter id="iTaMYxh" width="11.944" height="23.463" x="12.15" y="2.758" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-4"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.717647 0 0 0 0 0.65098 0 0 0 0 0.827451 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_17873"/></filter><filter id="indOVie" width="6.625" height="26.75" x="21.75" y="2.071" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5" dy="-1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.164706 0 0 0 0 0.372549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_17873"/></filter></defs></g></svg>Loudspeaker アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:loudspeaker" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:loudspeaker" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:loudspeaker" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--loudspeaker]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:loudspeaker"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:loudspeaker"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/loudspeaker.svg" alt="Loudspeaker アイコン" width="24" height="24">他のアイコンセットの Loudspeaker アイコン
Loudspeaker アイコン のよくある質問
Loudspeaker アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Loudspeaker アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:loudspeaker" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Loudspeaker アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/loudspeaker.svg" alt="Loudspeaker アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。