Fog アイコン
fluent-emoji:fog
Fog アイコン(fluent-emoji:fog)は、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"><path fill="url(#iPguL6c)" d="M26.33 30H5.67C3.64 30 2 28.36 2 26.33V5.67C2 3.64 3.64 2 5.67 2h20.66C28.36 2 30 3.64 30 5.67v20.66c0 2.03-1.64 3.67-3.67 3.67"/><path fill="url(#ikHb0ze)" d="M26.33 30H5.67C3.64 30 2 28.36 2 26.33V5.67C2 3.64 3.64 2 5.67 2h20.66C28.36 2 30 3.64 30 5.67v20.66c0 2.03-1.64 3.67-3.67 3.67"/><g filter="url(#isf5MNc)"><path fill="url(#iOrwgBd)" d="M26.33 2h-5.77A12.49 12.49 0 0 0 14 13l16 7.688V5.67C30 3.65 28.36 2 26.33 2"/></g><path fill="url(#ieHgKUc)" d="M6.91 2H5.67C3.64 2 2 3.64 2 5.67V13h11c0-4.64-2.44-8.7-6.09-11"/><path fill="url(#ijHooac)" d="M6.91 2H5.67C3.64 2 2 3.64 2 5.67V13h11c0-4.64-2.44-8.7-6.09-11"/><g filter="url(#itvw7se)"><path fill="url(#iO0R4ae)" d="M17.34 28.67c6.257 0 11.33-5.073 11.33-11.33S23.597 6.01 17.34 6.01S6.01 11.083 6.01 17.34s5.073 11.33 11.33 11.33"/><path fill="url(#iBUrMmP)" d="M17.34 28.67c6.257 0 11.33-5.073 11.33-11.33S23.597 6.01 17.34 6.01S6.01 11.083 6.01 17.34s5.073 11.33 11.33 11.33"/><path fill="url(#iJUz6Ys)" d="M17.34 28.67c6.257 0 11.33-5.073 11.33-11.33S23.597 6.01 17.34 6.01S6.01 11.083 6.01 17.34s5.073 11.33 11.33 11.33"/></g><g fill-rule="evenodd" clip-rule="evenodd" filter="url(#iTT7Lfc)"><path fill="url(#iK5gvbb)" d="M11.999 30H5.67C3.64 30 2 28.36 2 26.33V10.61c1.1-.39 2.27-.61 3.5-.61C11.3 10 16 14.7 16 20.5c0 1.23-.22 2.4-.61 3.5z"/><path fill="url(#ildT7gd)" d="M11.999 30H5.67C3.64 30 2 28.36 2 26.33V10.61c1.1-.39 2.27-.61 3.5-.61C11.3 10 16 14.7 16 20.5c0 1.23-.22 2.4-.61 3.5z"/></g><g filter="url(#ivqIGpb)"><path fill="url(#iMn6wmb)" d="M19.157 30h7.173c2.03 0 3.67-1.64 3.67-3.67V17c-4.42 0-8 3.58-8 8z"/><path fill="url(#iHmvmSc)" d="M19.157 30h7.173c2.03 0 3.67-1.64 3.67-3.67V17c-4.42 0-8 3.58-8 8z"/></g><g filter="url(#ia4FoXc)"><path fill="url(#icMceAe)" d="M16 19C9.95 19 5.03 23.89 5 29.94c.22.04.44.06.67.06h20.66c.23 0 .45-.02.67-.06C26.97 23.89 22.06 19 16 19"/><path fill="url(#icdhJPc)" d="M16 19C9.95 19 5.03 23.89 5 29.94c.22.04.44.06.67.06h20.66c.23 0 .45-.02.67-.06C26.97 23.89 22.06 19 16 19"/></g><defs><radialGradient id="ikHb0ze" cx="0" cy="0" r="1" gradientTransform="rotate(-147.482 9.14 1.573)scale(5.9296)" gradientUnits="userSpaceOnUse"><stop offset=".218" stop-color="#DCDCDF"/><stop offset="1" stop-color="#DCDCDF" stop-opacity="0"/></radialGradient><radialGradient id="iOrwgBd" cx="0" cy="0" r="1" gradientTransform="matrix(-10 12.31246 -10.5418 -8.5619 29.25 4.125)" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFAFE"/><stop offset="1" stop-color="#E4E4E5"/></radialGradient><radialGradient id="ieHgKUc" cx="0" cy="0" r="1" gradientTransform="rotate(130.888 3.366 4.84)scale(6.43018 5.67211)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EDECF1"/></radialGradient><radialGradient id="ijHooac" cx="0" cy="0" r="1" gradientTransform="rotate(-103.925 8.995 1.678)scale(3.89574 5.93314)" gradientUnits="userSpaceOnUse"><stop offset=".175" stop-color="#E5E4E6"/><stop offset="1" stop-color="#E5E4E6" stop-opacity="0"/></radialGradient><radialGradient id="iO0R4ae" cx="0" cy="0" r="1" gradientTransform="rotate(124.276 9.715 10.893)scale(15.7807)" gradientUnits="userSpaceOnUse"><stop offset=".258" stop-color="#fff"/><stop offset="1" stop-color="#E8E8EA"/></radialGradient><radialGradient id="iBUrMmP" cx="0" cy="0" r="1" gradientTransform="rotate(-112.286 18.938 3.463)scale(4.83036)" gradientUnits="userSpaceOnUse"><stop stop-color="#E0DEE8"/><stop offset="1" stop-color="#E0DEE8" stop-opacity="0"/></radialGradient><radialGradient id="iJUz6Ys" cx="0" cy="0" r="1" gradientTransform="rotate(-163.083 11.818 5.792)scale(14.2519 14.4327)" gradientUnits="userSpaceOnUse"><stop offset=".683" stop-color="#E2E2E3" stop-opacity="0"/><stop offset="1" stop-color="#E2E2E3"/></radialGradient><radialGradient id="iK5gvbb" cx="0" cy="0" r="1" gradientTransform="matrix(-8.2738 16.62373 -29.79628 -14.82991 12.15 14.178)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#DFD8FC"/></radialGradient><radialGradient id="ildT7gd" cx="0" cy="0" r="1" gradientTransform="rotate(133.418 -1.677 14.561)scale(7.38188 4.8547)" gradientUnits="userSpaceOnUse"><stop offset=".267" stop-color="#DBD9E4"/><stop offset="1" stop-color="#DBD9E4" stop-opacity="0"/></radialGradient><radialGradient id="iMn6wmb" cx="0" cy="0" r="1" gradientTransform="rotate(114.066 8.618 19.057)scale(8.56274 8.81777)" gradientUnits="userSpaceOnUse"><stop stop-color="#F4F3FB"/><stop offset="1" stop-color="#E2E2E5"/></radialGradient><radialGradient id="iHmvmSc" cx="0" cy="0" r="1" gradientTransform="matrix(1.89768 -7.45305 6.2165 1.58283 27.103 30.953)" gradientUnits="userSpaceOnUse"><stop stop-color="#E5DEFD"/><stop offset="1" stop-color="#E5DEFD" stop-opacity="0"/></radialGradient><radialGradient id="icMceAe" cx="0" cy="0" r="1" gradientTransform="rotate(128.726 5.877 15.702)scale(14.5091 15.3865)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#E2E0EA"/></radialGradient><filter id="isf5MNc" width="16.1" height="18.688" x="14" y="2" 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=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.882353 0 0 0 0 0.878431 0 0 0 0 0.882353 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15305"/></filter><filter id="itvw7se" width="22.76" height="22.66" x="6.01" y="6.01" 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=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.882353 0 0 0 0 0.878431 0 0 0 0 0.882353 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15305"/></filter><filter id="iTT7Lfc" width="14.1" height="20" x="2" y="10" 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=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.882353 0 0 0 0 0.878431 0 0 0 0 0.882353 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15305"/></filter><filter id="ivqIGpb" width="10.943" height="13" x="19.157" y="17" 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=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.882353 0 0 0 0 0.878431 0 0 0 0 0.882353 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15305"/></filter><filter id="ia4FoXc" width="22.1" height="11" x="5" y="19" 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=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.882353 0 0 0 0 0.878431 0 0 0 0 0.882353 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15305"/></filter><linearGradient id="iPguL6c" x1="16" x2="16" y1="2" y2="6.938" gradientUnits="userSpaceOnUse"><stop stop-color="#ECEBEF"/><stop offset="1" stop-color="#E5E4E8"/></linearGradient><linearGradient id="icdhJPc" x1="15.565" x2="15.565" y1="32.775" y2="28.296" gradientUnits="userSpaceOnUse"><stop stop-color="#E3DDFB"/><stop offset="1" stop-color="#E3DDFB" stop-opacity="0"/></linearGradient></defs></g></svg>Fog アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:fog" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:fog" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:fog" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--fog]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:fog"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:fog"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/fog.svg" alt="Fog アイコン" width="24" height="24">Fluent Emoji の関連アイコン
他のアイコンセットの Fog アイコン
Fog アイコン のよくある質問
Fog アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Fog アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:fog" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Fog アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/fog.svg" alt="Fog アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。