Gentleface › Weather › cloud-sun-lightning

cloud-sun-lightning icon

Cloud sun lightning: thunderstorm day, sunny thunderstorm, scattered thunderstorms. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9 2.5C9 2.641 8.952 2.759 8.856 2.856C8.759 2.952 8.641 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5L9 2.5ZM12.854 3.854C12.754 3.953 12.636 4.003 12.5 4.003C12.364 4.003 12.246 3.953 12.146 3.854C12.049 3.756 12 3.638 12 3.5C12 3.362 12.049 3.244 12.146 3.146L13.146 2.146C13.246 2.047 13.364 1.997 13.5 1.997C13.636 1.997 13.754 2.047 13.854 2.146C13.951 2.244 14 2.362 14 2.5C14 2.638 13.951 2.756 13.854 2.854L12.854 3.854ZM7.856 11.144C7.952 11.241 8 11.359 8 11.5C8 11.641 7.952 11.759 7.856 11.856C7.759 11.952 7.641 12 7.5 12L5 12C4.498 12 4.013 11.909 3.545 11.726C3.039 11.528 2.591 11.239 2.202 10.859C1.814 10.479 1.515 10.037 1.306 9.535C1.114 9.072 1.012 8.589 1.001 8.087C0.99 7.585 1.071 7.098 1.243 6.627C1.43 6.116 1.709 5.662 2.081 5.265C2.453 4.868 2.887 4.56 3.385 4.341C3.844 4.138 4.325 4.026 4.826 4.004C5.328 3.982 5.816 4.052 6.292 4.214C6.806 4.39 7.266 4.659 7.671 5.022C8.076 5.385 8.393 5.813 8.624 6.306C8.74 6.555 8.83 6.812 8.892 7.075C8.954 7.059 9.017 7.046 9.081 7.035C9.379 6.985 9.677 6.988 9.975 7.045C10.113 7.072 10.22 7.142 10.296 7.255C10.373 7.367 10.397 7.493 10.371 7.631C10.344 7.767 10.274 7.873 10.16 7.951C10.045 8.028 9.92 8.053 9.785 8.027C9.416 7.956 9.069 8.015 8.744 8.204C8.677 8.244 8.603 8.266 8.525 8.271C8.384 8.28 8.263 8.24 8.161 8.15C8.059 8.061 8.003 7.945 7.994 7.805C7.969 7.429 7.877 7.071 7.718 6.729C7.545 6.36 7.307 6.039 7.003 5.767C6.7 5.494 6.355 5.292 5.969 5.161C5.612 5.039 5.246 4.986 4.87 5.003C4.494 5.019 4.133 5.103 3.789 5.255C3.416 5.42 3.09 5.651 2.811 5.949C2.532 6.247 2.322 6.587 2.182 6.97C2.053 7.324 1.993 7.689 2.001 8.065C2.009 8.442 2.085 8.804 2.23 9.151C2.386 9.528 2.61 9.859 2.902 10.144C3.193 10.429 3.529 10.646 3.909 10.795C4.26 10.932 4.623 11 5 11L7.5 11C7.641 11 7.759 11.048 7.856 11.144ZM10.507 4.633C10.931 4.93 11.272 5.302 11.531 5.75C11.593 5.857 11.613 5.97 11.59 6.088C11.404 6.171 11.248 6.31 11.143 6.486L11.134 6.5C11.08 6.504 11.025 6.498 10.969 6.483C10.835 6.447 10.734 6.37 10.665 6.25C10.48 5.93 10.237 5.664 9.934 5.452C9.631 5.241 9.298 5.103 8.934 5.038C8.798 5.014 8.691 4.946 8.611 4.833C8.532 4.72 8.505 4.595 8.529 4.459C8.553 4.323 8.621 4.216 8.734 4.136C8.847 4.057 8.972 4.03 9.108 4.054C9.617 4.143 10.084 4.337 10.507 4.633ZM11 16L11 12L9 12L12 7L12 11L14 11L11 16ZM14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L13.5 8C13.359 8 13.241 7.952 13.144 7.856C13.048 7.759 13 7.641 13 7.5C13 7.359 13.048 7.241 13.144 7.144C13.241 7.048 13.359 7 13.5 7L14.5 7Z"/></svg>

React

// Gentleface "cloud-sun-lightning" (line-round), MIT. https://gentleface.com/icons/cloud-sun-lightning
import type { SVGProps } from 'react';

export function CloudSunLightningIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M9 2.5C9 2.641 8.952 2.759 8.856 2.856C8.759 2.952 8.641 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5L9 2.5ZM12.854 3.854C12.754 3.953 12.636 4.003 12.5 4.003C12.364 4.003 12.246 3.953 12.146 3.854C12.049 3.756 12 3.638 12 3.5C12 3.362 12.049 3.244 12.146 3.146L13.146 2.146C13.246 2.047 13.364 1.997 13.5 1.997C13.636 1.997 13.754 2.047 13.854 2.146C13.951 2.244 14 2.362 14 2.5C14 2.638 13.951 2.756 13.854 2.854L12.854 3.854ZM7.856 11.144C7.952 11.241 8 11.359 8 11.5C8 11.641 7.952 11.759 7.856 11.856C7.759 11.952 7.641 12 7.5 12L5 12C4.498 12 4.013 11.909 3.545 11.726C3.039 11.528 2.591 11.239 2.202 10.859C1.814 10.479 1.515 10.037 1.306 9.535C1.114 9.072 1.012 8.589 1.001 8.087C0.99 7.585 1.071 7.098 1.243 6.627C1.43 6.116 1.709 5.662 2.081 5.265C2.453 4.868 2.887 4.56 3.385 4.341C3.844 4.138 4.325 4.026 4.826 4.004C5.328 3.982 5.816 4.052 6.292 4.214C6.806 4.39 7.266 4.659 7.671 5.022C8.076 5.385 8.393 5.813 8.624 6.306C8.74 6.555 8.83 6.812 8.892 7.075C8.954 7.059 9.017 7.046 9.081 7.035C9.379 6.985 9.677 6.988 9.975 7.045C10.113 7.072 10.22 7.142 10.296 7.255C10.373 7.367 10.397 7.493 10.371 7.631C10.344 7.767 10.274 7.873 10.16 7.951C10.045 8.028 9.92 8.053 9.785 8.027C9.416 7.956 9.069 8.015 8.744 8.204C8.677 8.244 8.603 8.266 8.525 8.271C8.384 8.28 8.263 8.24 8.161 8.15C8.059 8.061 8.003 7.945 7.994 7.805C7.969 7.429 7.877 7.071 7.718 6.729C7.545 6.36 7.307 6.039 7.003 5.767C6.7 5.494 6.355 5.292 5.969 5.161C5.612 5.039 5.246 4.986 4.87 5.003C4.494 5.019 4.133 5.103 3.789 5.255C3.416 5.42 3.09 5.651 2.811 5.949C2.532 6.247 2.322 6.587 2.182 6.97C2.053 7.324 1.993 7.689 2.001 8.065C2.009 8.442 2.085 8.804 2.23 9.151C2.386 9.528 2.61 9.859 2.902 10.144C3.193 10.429 3.529 10.646 3.909 10.795C4.26 10.932 4.623 11 5 11L7.5 11C7.641 11 7.759 11.048 7.856 11.144ZM10.507 4.633C10.931 4.93 11.272 5.302 11.531 5.75C11.593 5.857 11.613 5.97 11.59 6.088C11.404 6.171 11.248 6.31 11.143 6.486L11.134 6.5C11.08 6.504 11.025 6.498 10.969 6.483C10.835 6.447 10.734 6.37 10.665 6.25C10.48 5.93 10.237 5.664 9.934 5.452C9.631 5.241 9.298 5.103 8.934 5.038C8.798 5.014 8.691 4.946 8.611 4.833C8.532 4.72 8.505 4.595 8.529 4.459C8.553 4.323 8.621 4.216 8.734 4.136C8.847 4.057 8.972 4.03 9.108 4.054C9.617 4.143 10.084 4.337 10.507 4.633ZM11 16L11 12L9 12L12 7L12 11L14 11L11 16ZM14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L13.5 8C13.359 8 13.241 7.952 13.144 7.856C13.048 7.759 13 7.641 13 7.5C13 7.359 13.048 7.241 13.144 7.144C13.241 7.048 13.359 7 13.5 7L14.5 7Z" />
    </svg>
  );
}

Vue

Vue: see /icons/cloud-sun-lightning.md

Svelte

Svelte: see /icons/cloud-sun-lightning.md

HTML img

HTML img: see /icons/cloud-sun-lightning.md

CSS

CSS: see /icons/cloud-sun-lightning.md

Data URL

Data URL: see /icons/cloud-sun-lightning.md

Sprite

Sprite: see /icons/cloud-sun-lightning.md

SwiftUI

SwiftUI: see /icons/cloud-sun-lightning.md

Compose

Compose: see /icons/cloud-sun-lightning.md

Android XML

Android XML: see /icons/cloud-sun-lightning.md

Flutter

Flutter: see /icons/cloud-sun-lightning.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

thunderstorm day, sunny thunderstorm, scattered thunderstorms

Tags

day thunderstorm, scattered thunderstorms, thunderstorm, lightning, storm, thunder, sun, cloud, day, weather, forecast

Category

Weather

Component name

CloudSunLightningIcon

History

2026-11-12 16 px redrawn, 20 px drawn, 24 px drawn, added

Family 46

cloud cloud-alert cloud-arrow-down cloud-arrow-up cloud-check cloud-clock cloud-code cloud-drizzle cloud-fog cloud-gear cloud-hail cloud-heart

More weather icons

air-quality avalanche barometer celsius droplet droplet-alert droplet-arrow-down droplet-arrow-up droplet-check droplet-clock droplet-gear droplet-heart droplet-lock droplet-minus droplet-off droplet-pause · all weather icons

For agents

Metadata: /icons/cloud-sun-lightning.json · Markdown: /icons/cloud-sun-lightning.md · SVG: https://gentleface.com/svg/{style}/16/cloud-sun-lightning.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/cloud-sun-lightning.png

cloud-sun-lightning icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp