Home/Libraries/Fluent Emoji (Iconify)/cloud-with-lightning

Fluent Emoji (Iconify)

CloudWithLightning

License: MITCommercial Safe

ICON SIZE

STROKE WEIGHT1.5px

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" 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="#818cf8" 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="1.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>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. CloudWithLightningIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.