Иконка Cloud With Lightning
fluent-emoji:cloud-with-lightning
Иконка Cloud With Lightning (fluent-emoji:cloud-with-lightning) — бесплатная SVG-иконка из набора Fluent Emoji от Microsoft Corporation. Она нарисована на сетке 32 × 32. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.
- Набор
- Fluent Emoji
- Автор
- Microsoft Corporation
- Лицензия
- MIT
- Размер
- 32 × 32
- Теги
- cloudwith, withlightning, cloudwithlightning
Код SVG
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iMrsKub)" d="M12.988 12.461a4.2 4.2 0 1 0 0-8.399a4.2 4.2 0 0 0 0 8.399"/><path fill="url(#iJIXnmc)" d="M12.988 12.461a4.2 4.2 0 1 0 0-8.399a4.2 4.2 0 0 0 0 8.399"/><g filter="url(#idZ04OO)"><path fill="#3124C5" d="M30 11.048c0 4.926-3.989 8.918-8.91 8.918H8.82c-3.611 0-6.538-3.04-6.538-6.44s2.834-6.197 6.445-6.197c.725 0 1.694.186 2.586.53c.893.345 1.558-.37 1.875-1.004C14.559 4.109 17.564 2 21.125 2C26.045 2 30 6.123 30 11.048"/><path fill="url(#iT8iFUb)" d="M30 11.048c0 4.926-3.989 8.918-8.91 8.918H8.82c-3.611 0-6.538-3.04-6.538-6.44s2.834-6.197 6.445-6.197c.725 0 1.694.186 2.586.53c.893.345 1.558-.37 1.875-1.004C14.559 4.109 17.564 2 21.125 2C26.045 2 30 6.123 30 11.048"/><path fill="url(#iw2Szvb)" d="M30 11.048c0 4.926-3.989 8.918-8.91 8.918H8.82c-3.611 0-6.538-3.04-6.538-6.44s2.834-6.197 6.445-6.197c.725 0 1.694.186 2.586.53c.893.345 1.558-.37 1.875-1.004C14.559 4.109 17.564 2 21.125 2C26.045 2 30 6.123 30 11.048"/></g><path fill="url(#iRwB8me)" d="M30 11.048c0 4.926-3.989 8.918-8.91 8.918H8.82c-3.611 0-6.538-3.04-6.538-6.44s2.834-6.197 6.445-6.197c.725 0 1.694.186 2.586.53c.893.345 1.558-.37 1.875-1.004C14.559 4.109 17.564 2 21.125 2C26.045 2 30 6.123 30 11.048"/><path fill="url(#iG20lKe)" d="M30 11.048c0 4.926-3.989 8.918-8.91 8.918H8.82c-3.611 0-6.538-3.04-6.538-6.44s2.834-6.197 6.445-6.197c.725 0 1.694.186 2.586.53c.893.345 1.558-.37 1.875-1.004C14.559 4.109 17.564 2 21.125 2C26.045 2 30 6.123 30 11.048"/><g filter="url(#id1qoOi)"><path stroke="url(#icGIvjc)" stroke-linecap="round" stroke-width=".5" d="M12.857 8.934c.607.704 1.828 2.703 1.868 5.061"/></g><g filter="url(#i5IFPRb)"><path fill="url(#i8u74ae)" d="m16.59 13.966l-4.392 7.285a.25.25 0 0 0 .214.38h2.222a.3.3 0 0 1 .3.3v4.65h-.264v1.26h.405a.15.15 0 0 0 .137-.071l4.886-8.005a.15.15 0 0 0-.128-.229h-2.536a.25.25 0 0 1-.25-.25V13.52a.15.15 0 0 0-.14-.15h-.454z"/></g><g filter="url(#iS0RWDd)"><path fill="url(#iPDVpKU)" d="m16.466 13.443l-4.709 7.808c-.1.167.02.38.214.38h2.223a.3.3 0 0 1 .3.3v5.76c0 .152.199.208.277.079l4.886-8.005a.15.15 0 0 0-.128-.229h-2.535a.25.25 0 0 1-.25-.25V13.52c0-.152-.2-.208-.279-.077"/></g><path fill="url(#iAPhHbd)" d="m16.466 13.443l-4.709 7.808c-.1.167.02.38.214.38h2.223a.3.3 0 0 1 .3.3v5.76c0 .152.199.208.277.079l4.886-8.005a.15.15 0 0 0-.128-.229h-2.535a.25.25 0 0 1-.25-.25V13.52c0-.152-.2-.208-.279-.077"/><path fill="url(#iQvKn8c)" d="m16.466 13.443l-4.709 7.808c-.1.167.02.38.214.38h2.223a.3.3 0 0 1 .3.3v5.76c0 .152.199.208.277.079l4.886-8.005a.15.15 0 0 0-.128-.229h-2.535a.25.25 0 0 1-.25-.25V13.52c0-.152-.2-.208-.279-.077"/><defs><radialGradient id="iMrsKub" cx="0" cy="0" r="1" gradientTransform="rotate(153.208 6.475 4.51)scale(4.20461 3.59222)" gradientUnits="userSpaceOnUse"><stop stop-color="#5347D7"/><stop offset="1" stop-color="#3831B0"/></radialGradient><radialGradient id="iJIXnmc" cx="0" cy="0" r="1" gradientTransform="matrix(1.87912 -3.02965 2.94766 1.82827 13.756 8.091)" gradientUnits="userSpaceOnUse"><stop offset=".186" stop-color="#281EA4"/><stop offset="1" stop-color="#281EA4" stop-opacity="0"/></radialGradient><radialGradient id="iT8iFUb" cx="0" cy="0" r="1" gradientTransform="rotate(111.609 1.39 14.11)scale(10.3526 6.47339)" gradientUnits="userSpaceOnUse"><stop offset=".363" stop-color="#381B90"/><stop offset="1" stop-color="#381B90" stop-opacity="0"/></radialGradient><radialGradient id="iw2Szvb" cx="0" cy="0" r="1" gradientTransform="rotate(137.466 3.172 7.558)scale(4.74976 4.48072)" gradientUnits="userSpaceOnUse"><stop stop-color="#534ADD"/><stop offset="1" stop-color="#574ADF" stop-opacity="0"/></radialGradient><radialGradient id="iRwB8me" cx="0" cy="0" r="1" gradientTransform="matrix(-8.58713 6.58842 -7.2305 -9.42399 24.728 7.22)" gradientUnits="userSpaceOnUse"><stop offset=".142" stop-color="#6051FF"/><stop offset="1" stop-color="#6051FF" stop-opacity="0"/></radialGradient><radialGradient id="iG20lKe" cx="0" cy="0" r="1" gradientTransform="rotate(170.656 10.043 6.052)scale(18.9046 16.1511)" gradientUnits="userSpaceOnUse"><stop offset=".799" stop-color="#35209A" stop-opacity="0"/><stop offset="1" stop-color="#35209A"/></radialGradient><radialGradient id="iQvKn8c" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.47652 -.75851 0 16.792 16.185)" gradientUnits="userSpaceOnUse"><stop stop-color="#FE9052"/><stop offset="1" stop-color="#FE9052" stop-opacity="0"/></radialGradient><linearGradient id="icGIvjc" x1="13.189" x2="15.056" y1="10.162" y2="15.764" gradientUnits="userSpaceOnUse"><stop stop-color="#554BD3"/><stop offset="1" stop-color="#554BD3" stop-opacity="0"/></linearGradient><linearGradient id="i8u74ae" x1="17.496" x2="17.496" y1="17.576" y2="24.687" gradientUnits="userSpaceOnUse"><stop stop-color="#EA9B4C"/><stop offset="1" stop-color="#EB5C74"/></linearGradient><linearGradient id="iPDVpKU" x1="15.7" x2="15.7" y1="14.828" y2="26.234" gradientUnits="userSpaceOnUse"><stop stop-color="#F39445"/><stop offset="1" stop-color="#F14B49"/></linearGradient><linearGradient id="iAPhHbd" x1="15.7" x2="15.7" y1="13.37" y2="19.328" gradientUnits="userSpaceOnUse"><stop stop-color="#DF9844"/><stop offset="1" stop-color="#DF9844" stop-opacity="0"/></linearGradient><filter id="idZ04OO" width="28.719" height="19.966" x="2.281" y="0" 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" dy="-2"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.207843 0 0 0 0 0.12549 0 0 0 0 0.596078 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15216"/></filter><filter id="id1qoOi" width="4.367" height="7.561" x="11.607" y="7.684" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_15216" stdDeviation=".5"/></filter><filter id="i5IFPRb" width="8.059" height="14.473" x="12.061" y="13.37" 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.890196 0 0 0 0 0.478431 0 0 0 0 0.431373 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15216"/></filter><filter id="iS0RWDd" width="7.959" height="14.472" x="11.721" y="13.37" 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=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.741176 0 0 0 0 0.203922 0 0 0 0 0.345098 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_15216"/></filter></defs></g></svg>Как использовать иконку Cloud With Lightning
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:cloud-with-lightning" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:cloud-with-lightning" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:cloud-with-lightning" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--cloud-with-lightning]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:cloud-with-lightning"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:cloud-with-lightning"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/fluent-emoji/cloud-with-lightning.svg" alt="Иконка Cloud With Lightning" width="24" height="24">Похожие иконки в наборе Fluent Emoji
Иконка Cloud With Lightning в других наборах
Вопросы и ответы: Иконка Cloud With Lightning
Можно ли бесплатно использовать иконку Cloud With Lightning в коммерческих проектах?
Да. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Как использовать иконку Cloud With Lightning в React?
Установите @iconify/react и выведите <Icon icon="fluent-emoji:cloud-with-lightning" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.
Как добавить иконку Cloud With Lightning на веб-страницу?
Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/fluent-emoji/cloud-with-lightning.svg" alt="Иконка Cloud With Lightning">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.