Cloud With Rain アイコン
fluent-emoji:cloud-with-rain
Cloud With Rain アイコン(fluent-emoji:cloud-with-rain)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
- タグ
- cloudwith、withrain、cloudwithrain
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><path id="iaHaZnc" fill="#E0D3FF" d="M27.202 4.55c-3.544-3.454-9.216-3.394-12.67.15a8.9 8.9 0 0 0-2.014 3.196a.268.268 0 0 1-.398.13a6 6 0 0 0-.984-.53A6.447 6.447 0 0 0 2 13.357a6.46 6.46 0 0 0 1.408 4.024a6.47 6.47 0 0 0 5.162 2.557h12.671a8.36 8.36 0 0 0 6.82-3.515c2.716-3.555 2.416-8.667-.859-11.872"/></defs><g fill="none"><path fill="url(#i6waHsf)" d="M12.367 12.303a4.034 4.034 0 1 0 0-8.068a4.034 4.034 0 0 0 0 8.068"/><path fill="url(#iHMpble)" d="M12.367 12.303a4.034 4.034 0 1 0 0-8.068a4.034 4.034 0 0 0 0 8.068"/><g filter="url(#igByPgh)"><path fill="#3239FF" d="m8.789 22.994l-2.39 3.27a1.805 1.805 0 0 1-2.526.393a1.805 1.805 0 0 1-.393-2.524l2.39-3.27a1.805 1.805 0 0 1 2.526-.394c.807.58.983 1.718.393 2.525"/><path fill="url(#i2IZqgb)" d="m8.789 22.994l-2.39 3.27a1.805 1.805 0 0 1-2.526.393a1.805 1.805 0 0 1-.393-2.524l2.39-3.27a1.805 1.805 0 0 1 2.526-.394c.807.58.983 1.718.393 2.525"/></g><g filter="url(#iJRp16b)"><path fill="#3239FF" d="m15.335 22.994l-2.39 3.27a1.805 1.805 0 0 1-2.525.393a1.805 1.805 0 0 1-.393-2.524l2.39-3.27a1.805 1.805 0 0 1 2.525-.394c.807.58.983 1.718.393 2.525"/><path fill="url(#ic5Dxse)" d="m15.335 22.994l-2.39 3.27a1.805 1.805 0 0 1-2.525.393a1.805 1.805 0 0 1-.393-2.524l2.39-3.27a1.805 1.805 0 0 1 2.525-.394c.807.58.983 1.718.393 2.525"/></g><g filter="url(#itfua1c)"><path fill="url(#iMrk5eb)" d="m21.881 22.994l-2.39 3.27a1.805 1.805 0 0 1-2.525.393a1.805 1.805 0 0 1-.393-2.524l2.39-3.27a1.805 1.805 0 0 1 2.525-.394c.807.58.983 1.718.393 2.525"/><path fill="url(#ieRS1Fc)" d="m21.881 22.994l-2.39 3.27a1.805 1.805 0 0 1-2.525.393a1.805 1.805 0 0 1-.393-2.524l2.39-3.27a1.805 1.805 0 0 1 2.525-.394c.807.58.983 1.718.393 2.525"/></g><g filter="url(#ih2lpFd)"><use href="#iaHaZnc"/></g><g filter="url(#i5lrGPd)"><use href="#iaHaZnc"/><path fill="url(#i3Zh2Km)" d="M27.202 4.55c-3.544-3.454-9.216-3.394-12.67.15a8.9 8.9 0 0 0-2.014 3.196a.268.268 0 0 1-.398.13a6 6 0 0 0-.984-.53A6.447 6.447 0 0 0 2 13.357a6.46 6.46 0 0 0 1.408 4.024a6.47 6.47 0 0 0 5.162 2.557h12.671a8.36 8.36 0 0 0 6.82-3.515c2.716-3.555 2.416-8.667-.859-11.872"/><path fill="url(#idHhmPb)" d="M27.202 4.55c-3.544-3.454-9.216-3.394-12.67.15a8.9 8.9 0 0 0-2.014 3.196a.268.268 0 0 1-.398.13a6 6 0 0 0-.984-.53A6.447 6.447 0 0 0 2 13.357a6.46 6.46 0 0 0 1.408 4.024a6.47 6.47 0 0 0 5.162 2.557h12.671a8.36 8.36 0 0 0 6.82-3.515c2.716-3.555 2.416-8.667-.859-11.872"/><path fill="url(#i2X2RDd)" d="M27.202 4.55c-3.544-3.454-9.216-3.394-12.67.15a8.9 8.9 0 0 0-2.014 3.196a.268.268 0 0 1-.398.13a6 6 0 0 0-.984-.53A6.447 6.447 0 0 0 2 13.357a6.46 6.46 0 0 0 1.408 4.024a6.47 6.47 0 0 0 5.162 2.557h12.671a8.36 8.36 0 0 0 6.82-3.515c2.716-3.555 2.416-8.667-.859-11.872"/><path fill="url(#iaUKqcc)" d="M27.202 4.55c-3.544-3.454-9.216-3.394-12.67.15a8.9 8.9 0 0 0-2.014 3.196a.268.268 0 0 1-.398.13a6 6 0 0 0-.984-.53A6.447 6.447 0 0 0 2 13.357a6.46 6.46 0 0 0 1.408 4.024a6.47 6.47 0 0 0 5.162 2.557h12.671a8.36 8.36 0 0 0 6.82-3.515c2.716-3.555 2.416-8.667-.859-11.872"/></g><defs><radialGradient id="i6waHsf" cx="0" cy="0" r="1" gradientTransform="rotate(-110.468 8.676 -.406)scale(3.57025 3.46764)" gradientUnits="userSpaceOnUse"><stop offset=".307" stop-color="#CECDFF"/><stop offset="1" stop-color="#B7B6FA"/></radialGradient><radialGradient id="iHMpble" cx="0" cy="0" r="1" gradientTransform="matrix(-1.23828 -.7496 2.49269 -4.1177 13.605 6.683)" gradientUnits="userSpaceOnUse"><stop offset=".401" stop-color="#B8B7FF"/><stop offset="1" stop-color="#B8B7FF" stop-opacity="0"/></radialGradient><radialGradient id="i2IZqgb" cx="0" cy="0" r="1" gradientTransform="rotate(142.938 1.301 11.974)scale(3.03715 2.64919)" gradientUnits="userSpaceOnUse"><stop stop-color="#627AFE"/><stop offset="1" stop-color="#627AFE" stop-opacity="0"/></radialGradient><radialGradient id="ic5Dxse" cx="0" cy="0" r="1" gradientTransform="rotate(142.938 4.574 13.07)scale(3.03715 2.64919)" gradientUnits="userSpaceOnUse"><stop stop-color="#627AFE"/><stop offset="1" stop-color="#627AFE" stop-opacity="0"/></radialGradient><radialGradient id="ieRS1Fc" cx="0" cy="0" r="1" gradientTransform="rotate(142.938 7.847 14.168)scale(3.03715 2.64919)" gradientUnits="userSpaceOnUse"><stop stop-color="#627AFE"/><stop offset="1" stop-color="#627AFE" stop-opacity="0"/></radialGradient><radialGradient id="i3Zh2Km" cx="0" cy="0" r="1" gradientTransform="matrix(-3.78308 -12.40873 6.9718 -2.1255 16.395 13.277)" gradientUnits="userSpaceOnUse"><stop stop-color="#D6CCFF"/><stop offset="1" stop-color="#D6CCFF" stop-opacity="0"/></radialGradient><radialGradient id="idHhmPb" cx="0" cy="0" r="1" gradientTransform="rotate(147.006 13.079 7.761)scale(12.0883 13.5028)" gradientUnits="userSpaceOnUse"><stop offset=".19" stop-color="#F2F0FF"/><stop offset="1" stop-color="#F2F0FF" stop-opacity="0"/></radialGradient><radialGradient id="i2X2RDd" cx="0" cy="0" r="1" gradientTransform="rotate(147.319 3.003 6.529)scale(9.52873 11.6115)" gradientUnits="userSpaceOnUse"><stop stop-color="#F2F0FF"/><stop offset=".696" stop-color="#F2F0FF" stop-opacity="0"/></radialGradient><radialGradient id="iaUKqcc" cx="0" cy="0" r="1" gradientTransform="matrix(2.49688 7.64197 -2.84897 .93085 11.25 6.392)" gradientUnits="userSpaceOnUse"><stop stop-color="#F2F0FF"/><stop offset="1" stop-color="#F2F0FF" stop-opacity="0"/></radialGradient><filter id="igByPgh" width="6.606" height="7.086" x="3.131" y="20.02" 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=".6" dy="-.1"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.196078 0 0 0 0 0.152941 0 0 0 0 0.972549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15159"/><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" dy=".1"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.65098 0 0 0 0 0.529412 0 0 0 0 0.87451 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_15159" result="effect2_innerShadow_18_15159"/></filter><filter id="iJRp16b" width="6.606" height="7.086" x="9.678" y="20.02" 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=".6" dy="-.1"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.196078 0 0 0 0 0.152941 0 0 0 0 0.972549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15159"/><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" dy=".1"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.65098 0 0 0 0 0.529412 0 0 0 0 0.87451 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_15159" result="effect2_innerShadow_18_15159"/></filter><filter id="itfua1c" width="6.606" height="7.086" x="16.224" y="20.02" 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=".6" dy="-.1"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.196078 0 0 0 0 0.152941 0 0 0 0 0.972549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15159"/><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" dy=".1"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.65098 0 0 0 0 0.529412 0 0 0 0 0.87451 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_15159" result="effect2_innerShadow_18_15159"/></filter><filter id="ih2lpFd" width="27.899" height="17.938" x="2" 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/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.701961 0 0 0 0 0.698039 0 0 0 0 0.992157 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15159"/></filter><filter id="i5lrGPd" width="27.899" height="17.938" x="2" 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/><feGaussianBlur stdDeviation="3.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.701961 0 0 0 0 0.698039 0 0 0 0 0.992157 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15159"/><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/><feGaussianBlur stdDeviation="1.25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.701961 0 0 0 0 0.698039 0 0 0 0 0.992157 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_15159" result="effect2_innerShadow_18_15159"/></filter><linearGradient id="iMrk5eb" x1="22.23" x2="17.066" y1="20.873" y2="27.748" gradientUnits="userSpaceOnUse"><stop stop-color="#3364FE"/><stop offset="1" stop-color="#3749FF"/></linearGradient></defs></g></svg>Cloud With Rain アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:cloud-with-rain" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:cloud-with-rain" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:cloud-with-rain" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--cloud-with-rain]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:cloud-with-rain"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:cloud-with-rain"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/cloud-with-rain.svg" alt="Cloud With Rain アイコン" width="24" height="24">Fluent Emoji の関連アイコン
他のアイコンセットの Cloud With Rain アイコン
Cloud With Rain アイコン のよくある質問
Cloud With Rain アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Cloud With Rain アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:cloud-with-rain" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Cloud With Rain アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/cloud-with-rain.svg" alt="Cloud With Rain アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。