rainbow cloud icon

rainbow-cloud-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name
rainbow-cloud-light
Set
Phosphor
Style
Light
Viewbox
256×256
License
MIT

5 other variants in Phosphor

rainbow-cloudrainbow-cloud-boldrainbow-cloud-duotonerainbow-cloud-fillrainbow-cloud-thin

Use the rainbow cloud icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M200 114a46.18 46.18 0 0 0-43.35 30.59a30 30 0 0 0-4.65-.37c-16.54 0-30 13.86-30 30.89S135.46 206 152 206h48a46 46 0 0 0 0-92m0 80h-48c-9.93 0-18-8.47-18-18.89s8.07-18.89 18-18.89a17.1 17.1 0 0 1 6.53 1.28a6 6 0 0 0 8.16-4.35A34 34 0 1 1 200 194M22 160v16a6 6 0 0 1-12 0v-16a102 102 0 0 1 173.11-73.13a6 6 0 1 1-8.37 8.61A90 90 0 0 0 22 160m90-58a58.07 58.07 0 0 0-58 58v16a6 6 0 0 1-12 0v-16a70 70 0 0 1 111.42-56.43a6 6 0 1 1-7.11 9.66A57.5 57.5 0 0 0 112 102m6 32.7a26.6 26.6 0 0 0-6-.7a26 26 0 0 0-26 26v16a6 6 0 0 1-12 0v-16a38 38 0 0 1 46.81-37a6 6 0 1 1-2.81 11.7"/></svg>

React

import type { SVGProps } from "react";

export function PhRainbowCloudLight(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="M200 114a46.18 46.18 0 0 0-43.35 30.59a30 30 0 0 0-4.65-.37c-16.54 0-30 13.86-30 30.89S135.46 206 152 206h48a46 46 0 0 0 0-92m0 80h-48c-9.93 0-18-8.47-18-18.89s8.07-18.89 18-18.89a17.1 17.1 0 0 1 6.53 1.28a6 6 0 0 0 8.16-4.35A34 34 0 1 1 200 194M22 160v16a6 6 0 0 1-12 0v-16a102 102 0 0 1 173.11-73.13a6 6 0 1 1-8.37 8.61A90 90 0 0 0 22 160m90-58a58.07 58.07 0 0 0-58 58v16a6 6 0 0 1-12 0v-16a70 70 0 0 1 111.42-56.43a6 6 0 1 1-7.11 9.66A57.5 57.5 0 0 0 112 102m6 32.7a26.6 26.6 0 0 0-6-.7a26 26 0 0 0-26 26v16a6 6 0 0 1-12 0v-16a38 38 0 0 1 46.81-37a6 6 0 1 1-2.81 11.7"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M200 114a46.18 46.18 0 0 0-43.35 30.59a30 30 0 0 0-4.65-.37c-16.54 0-30 13.86-30 30.89S135.46 206 152 206h48a46 46 0 0 0 0-92m0 80h-48c-9.93 0-18-8.47-18-18.89s8.07-18.89 18-18.89a17.1 17.1 0 0 1 6.53 1.28a6 6 0 0 0 8.16-4.35A34 34 0 1 1 200 194M22 160v16a6 6 0 0 1-12 0v-16a102 102 0 0 1 173.11-73.13a6 6 0 1 1-8.37 8.61A90 90 0 0 0 22 160m90-58a58.07 58.07 0 0 0-58 58v16a6 6 0 0 1-12 0v-16a70 70 0 0 1 111.42-56.43a6 6 0 1 1-7.11 9.66A57.5 57.5 0 0 0 112 102m6 32.7a26.6 26.6 0 0 0-6-.7a26 26 0 0 0-26 26v16a6 6 0 0 1-12 0v-16a38 38 0 0 1 46.81-37a6 6 0 1 1-2.81 11.7"/></svg>
</template>

CSS

.icon-rainbow-cloud-light {
  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%22M200%20114a46.18%2046.18%200%200%200-43.35%2030.59a30%2030%200%200%200-4.65-.37c-16.54%200-30%2013.86-30%2030.89S135.46%20206%20152%20206h48a46%2046%200%200%200%200-92m0%2080h-48c-9.93%200-18-8.47-18-18.89s8.07-18.89%2018-18.89a17.1%2017.1%200%200%201%206.53%201.28a6%206%200%200%200%208.16-4.35A34%2034%200%201%201%20200%20194M22%20160v16a6%206%200%200%201-12%200v-16a102%20102%200%200%201%20173.11-73.13a6%206%200%201%201-8.37%208.61A90%2090%200%200%200%2022%20160m90-58a58.07%2058.07%200%200%200-58%2058v16a6%206%200%200%201-12%200v-16a70%2070%200%200%201%20111.42-56.43a6%206%200%201%201-7.11%209.66A57.5%2057.5%200%200%200%20112%20102m6%2032.7a26.6%2026.6%200%200%200-6-.7a26%2026%200%200%200-26%2026v16a6%206%200%200%201-12%200v-16a38%2038%200%200%201%2046.81-37a6%206%200%201%201-2.81%2011.7%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%22M200%20114a46.18%2046.18%200%200%200-43.35%2030.59a30%2030%200%200%200-4.65-.37c-16.54%200-30%2013.86-30%2030.89S135.46%20206%20152%20206h48a46%2046%200%200%200%200-92m0%2080h-48c-9.93%200-18-8.47-18-18.89s8.07-18.89%2018-18.89a17.1%2017.1%200%200%201%206.53%201.28a6%206%200%200%200%208.16-4.35A34%2034%200%201%201%20200%20194M22%20160v16a6%206%200%200%201-12%200v-16a102%20102%200%200%201%20173.11-73.13a6%206%200%201%201-8.37%208.61A90%2090%200%200%200%2022%20160m90-58a58.07%2058.07%200%200%200-58%2058v16a6%206%200%200%201-12%200v-16a70%2070%200%200%201%20111.42-56.43a6%206%200%201%201-7.11%209.66A57.5%2057.5%200%200%200%20112%20102m6%2032.7a26.6%2026.6%200%200%200-6-.7a26%2026%200%200%200-26%2026v16a6%206%200%200%201-12%200v-16a38%2038%200%200%201%2046.81-37a6%206%200%201%201-2.81%2011.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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