Gentleface › Weather › cloud-moon-lightning

cloud-moon-lightning icon

Cloud moon lightning: thunderstorm night, night thunderstorm. 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.025 6.975C8.64 6.589 8.36 6.138 8.185 5.622C7.985 5.032 7.946 4.432 8.067 3.821C8.187 3.21 8.452 2.67 8.862 2.2C9.22 1.789 9.651 1.479 10.154 1.269C10.236 1.235 10.322 1.223 10.411 1.235C10.548 1.253 10.658 1.316 10.742 1.426C10.827 1.535 10.86 1.658 10.842 1.795C10.785 2.231 10.822 2.658 10.953 3.077C11.1 3.547 11.347 3.956 11.695 4.305C12.044 4.653 12.453 4.9 12.923 5.047C13.342 5.178 13.769 5.215 14.205 5.158C14.293 5.146 14.379 5.158 14.462 5.192C14.592 5.247 14.683 5.337 14.734 5.462C14.786 5.588 14.785 5.716 14.731 5.846C14.521 6.349 14.211 6.78 13.8 7.138C13.33 7.548 12.79 7.813 12.179 7.933C12.119 7.945 12.06 7.956 12 7.964L12 11L14 11L13.546 11.757L13.546 11.757L11 16L11 12L9 12L9.454 11.243L9.454 11.243L11.4 8.001C11.056 7.991 10.715 7.929 10.378 7.815C9.862 7.64 9.411 7.36 9.025 6.975ZM9.132 5.302C9.257 5.67 9.457 5.992 9.732 6.268C10.008 6.543 10.33 6.743 10.698 6.868C11.12 7.011 11.549 7.039 11.985 6.952C12.422 6.866 12.807 6.677 13.143 6.384C13.224 6.313 13.3 6.238 13.371 6.159C13.12 6.131 12.871 6.078 12.625 6.001C11.998 5.806 11.453 5.476 10.988 5.012C10.524 4.547 10.194 4.002 9.999 3.375C9.922 3.129 9.869 2.88 9.841 2.629C9.762 2.7 9.687 2.776 9.616 2.857C9.323 3.193 9.134 3.578 9.048 4.015C8.961 4.451 8.989 4.88 9.132 5.302ZM7.035 5.109C6.971 5.235 6.875 5.318 6.745 5.36C6.616 5.402 6.488 5.391 6.363 5.327C5.894 5.088 5.396 4.98 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.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.528 3.973 6.191 4.118 6.817 4.437C6.893 4.475 6.953 4.525 6.998 4.588C7.001 4.76 7.015 4.932 7.038 5.103C7.037 5.105 7.036 5.107 7.035 5.109Z"/></svg>

React

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

export function CloudMoonLightningIcon(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.025 6.975C8.64 6.589 8.36 6.138 8.185 5.622C7.985 5.032 7.946 4.432 8.067 3.821C8.187 3.21 8.452 2.67 8.862 2.2C9.22 1.789 9.651 1.479 10.154 1.269C10.236 1.235 10.322 1.223 10.411 1.235C10.548 1.253 10.658 1.316 10.742 1.426C10.827 1.535 10.86 1.658 10.842 1.795C10.785 2.231 10.822 2.658 10.953 3.077C11.1 3.547 11.347 3.956 11.695 4.305C12.044 4.653 12.453 4.9 12.923 5.047C13.342 5.178 13.769 5.215 14.205 5.158C14.293 5.146 14.379 5.158 14.462 5.192C14.592 5.247 14.683 5.337 14.734 5.462C14.786 5.588 14.785 5.716 14.731 5.846C14.521 6.349 14.211 6.78 13.8 7.138C13.33 7.548 12.79 7.813 12.179 7.933C12.119 7.945 12.06 7.956 12 7.964L12 11L14 11L13.546 11.757L13.546 11.757L11 16L11 12L9 12L9.454 11.243L9.454 11.243L11.4 8.001C11.056 7.991 10.715 7.929 10.378 7.815C9.862 7.64 9.411 7.36 9.025 6.975ZM9.132 5.302C9.257 5.67 9.457 5.992 9.732 6.268C10.008 6.543 10.33 6.743 10.698 6.868C11.12 7.011 11.549 7.039 11.985 6.952C12.422 6.866 12.807 6.677 13.143 6.384C13.224 6.313 13.3 6.238 13.371 6.159C13.12 6.131 12.871 6.078 12.625 6.001C11.998 5.806 11.453 5.476 10.988 5.012C10.524 4.547 10.194 4.002 9.999 3.375C9.922 3.129 9.869 2.88 9.841 2.629C9.762 2.7 9.687 2.776 9.616 2.857C9.323 3.193 9.134 3.578 9.048 4.015C8.961 4.451 8.989 4.88 9.132 5.302ZM7.035 5.109C6.971 5.235 6.875 5.318 6.745 5.36C6.616 5.402 6.488 5.391 6.363 5.327C5.894 5.088 5.396 4.98 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.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.528 3.973 6.191 4.118 6.817 4.437C6.893 4.475 6.953 4.525 6.998 4.588C7.001 4.76 7.015 4.932 7.038 5.103C7.037 5.105 7.036 5.107 7.035 5.109Z" />
    </svg>
  );
}

Vue

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

Svelte

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

HTML img

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

CSS

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

Data URL

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

Sprite

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

SwiftUI

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

Compose

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

Android XML

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

Flutter

Flutter: see /icons/cloud-moon-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 night, night thunderstorm

Tags

night thunderstorm, thunderstorm, lightning, storm, thunder, moon, cloud, night, weather, forecast

Category

Weather

Component name

CloudMoonLightningIcon

History

2026-11-12 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-moon-lightning.json · Markdown: /icons/cloud-moon-lightning.md · SVG: https://gentleface.com/svg/{style}/16/cloud-moon-lightning.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/cloud-moon-lightning.png

cloud-moon-lightning icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp