cloud lightning icon

cloud-lightning-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: cloud-lightning-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

cloud-lightning cloud-lightning-bold cloud-lightning-duotone cloud-lightning-fill cloud-lightning-light

The same icon in other sets

cloud-lightningBootstrap Icons cloud-lightningBoxIcons v2 cloud-lightningBoxIcons v2 Solid cloud-lightningFeather Icons cloud-lightningHuge Icons cloud-lightningLucide cloud-lightning-fillMingCute Icon

Related icons in Phosphor

cloud-arrow-down cloud-arrow-up cloud-check cloud-fog cloud-moon cloud-rain cloud-slash cloud-snow cloud-sun cloud-warning cloud-x

Use the cloud lightning icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M156 20a72.19 72.19 0 0 0-68.49 49.39A48 48 0 1 0 76 164h44.94l-20.37 33.94A4 4 0 0 0 104 204h32.94l-20.37 33.94a4 4 0 0 0 6.86 4.12l24-40A4 4 0 0 0 144 196h-32.94l19.2-32H156a72 72 0 0 0 0-144m0 136H76a40 40 0 1 1 9.43-78.88A71.6 71.6 0 0 0 84 87.77a4 4 0 0 0 8 .46A64.06 64.06 0 1 1 156 156"/></svg>

React

import type { SVGProps } from "react";

export function PhCloudLightningThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M156 20a72.19 72.19 0 0 0-68.49 49.39A48 48 0 1 0 76 164h44.94l-20.37 33.94A4 4 0 0 0 104 204h32.94l-20.37 33.94a4 4 0 0 0 6.86 4.12l24-40A4 4 0 0 0 144 196h-32.94l19.2-32H156a72 72 0 0 0 0-144m0 136H76a40 40 0 1 1 9.43-78.88A71.6 71.6 0 0 0 84 87.77a4 4 0 0 0 8 .46A64.06 64.06 0 1 1 156 156"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M156 20a72.19 72.19 0 0 0-68.49 49.39A48 48 0 1 0 76 164h44.94l-20.37 33.94A4 4 0 0 0 104 204h32.94l-20.37 33.94a4 4 0 0 0 6.86 4.12l24-40A4 4 0 0 0 144 196h-32.94l19.2-32H156a72 72 0 0 0 0-144m0 136H76a40 40 0 1 1 9.43-78.88A71.6 71.6 0 0 0 84 87.77a4 4 0 0 0 8 .46A64.06 64.06 0 1 1 156 156"/></svg>
</template>

CSS

.icon-cloud-lightning-thin {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M156%2020a72.19%2072.19%200%200%200-68.49%2049.39A48%2048%200%201%200%2076%20164h44.94l-20.37%2033.94A4%204%200%200%200%20104%20204h32.94l-20.37%2033.94a4%204%200%200%200%206.86%204.12l24-40A4%204%200%200%200%20144%20196h-32.94l19.2-32H156a72%2072%200%200%200%200-144m0%20136H76a40%2040%200%201%201%209.43-78.88A71.6%2071.6%200%200%200%2084%2087.77a4%204%200%200%200%208%20.46A64.06%2064.06%200%201%201%20156%20156%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M156%2020a72.19%2072.19%200%200%200-68.49%2049.39A48%2048%200%201%200%2076%20164h44.94l-20.37%2033.94A4%204%200%200%200%20104%20204h32.94l-20.37%2033.94a4%204%200%200%200%206.86%204.12l24-40A4%204%200%200%200%20144%20196h-32.94l19.2-32H156a72%2072%200%200%200%200-144m0%20136H76a40%2040%200%201%201%209.43-78.88A71.6%2071.6%200%200%200%2084%2087.77a4%204%200%200%200%208%20.46A64.06%2064.06%200%201%201%20156%20156%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/cloud-lightning-thin.svg?color=%231a73e8&size=48