rainbow cloud icon

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

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

5 other variants in Phosphor

rainbow-cloudrainbow-cloud-boldrainbow-cloud-duotonerainbow-cloud-fillrainbow-cloud-light

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 116a44.16 44.16 0 0 0-42 30.88a27.2 27.2 0 0 0-6-.66c-15.44 0-28 13-28 28.89S136.56 204 152 204h48a44 44 0 0 0 0-88m0 80h-48c-11 0-20-9.37-20-20.89s9-20.89 20-20.89a19.1 19.1 0 0 1 7.29 1.43a4 4 0 0 0 5.44-2.9A36 36 0 1 1 200 196M20 160v16a4 4 0 0 1-8 0v-16a100 100 0 0 1 169.71-71.69a4 4 0 0 1-5.57 5.69A92 92 0 0 0 20 160m92-60a60.07 60.07 0 0 0-60 60v16a4 4 0 0 1-8 0v-16a68 68 0 0 1 108.24-54.82a4 4 0 1 1-4.74 6.44A59.57 59.57 0 0 0 112 100m11.31 29.79a4 4 0 0 1-4.81 3A28 28 0 0 0 84 160v16a4 4 0 0 1-8 0v-16a36 36 0 0 1 36-36a36.6 36.6 0 0 1 8.35 1a4 4 0 0 1 2.96 4.79"/></svg>

React

import type { SVGProps } from "react";

export function PhRainbowCloudThin(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 116a44.16 44.16 0 0 0-42 30.88a27.2 27.2 0 0 0-6-.66c-15.44 0-28 13-28 28.89S136.56 204 152 204h48a44 44 0 0 0 0-88m0 80h-48c-11 0-20-9.37-20-20.89s9-20.89 20-20.89a19.1 19.1 0 0 1 7.29 1.43a4 4 0 0 0 5.44-2.9A36 36 0 1 1 200 196M20 160v16a4 4 0 0 1-8 0v-16a100 100 0 0 1 169.71-71.69a4 4 0 0 1-5.57 5.69A92 92 0 0 0 20 160m92-60a60.07 60.07 0 0 0-60 60v16a4 4 0 0 1-8 0v-16a68 68 0 0 1 108.24-54.82a4 4 0 1 1-4.74 6.44A59.57 59.57 0 0 0 112 100m11.31 29.79a4 4 0 0 1-4.81 3A28 28 0 0 0 84 160v16a4 4 0 0 1-8 0v-16a36 36 0 0 1 36-36a36.6 36.6 0 0 1 8.35 1a4 4 0 0 1 2.96 4.79"/></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 116a44.16 44.16 0 0 0-42 30.88a27.2 27.2 0 0 0-6-.66c-15.44 0-28 13-28 28.89S136.56 204 152 204h48a44 44 0 0 0 0-88m0 80h-48c-11 0-20-9.37-20-20.89s9-20.89 20-20.89a19.1 19.1 0 0 1 7.29 1.43a4 4 0 0 0 5.44-2.9A36 36 0 1 1 200 196M20 160v16a4 4 0 0 1-8 0v-16a100 100 0 0 1 169.71-71.69a4 4 0 0 1-5.57 5.69A92 92 0 0 0 20 160m92-60a60.07 60.07 0 0 0-60 60v16a4 4 0 0 1-8 0v-16a68 68 0 0 1 108.24-54.82a4 4 0 1 1-4.74 6.44A59.57 59.57 0 0 0 112 100m11.31 29.79a4 4 0 0 1-4.81 3A28 28 0 0 0 84 160v16a4 4 0 0 1-8 0v-16a36 36 0 0 1 36-36a36.6 36.6 0 0 1 8.35 1a4 4 0 0 1 2.96 4.79"/></svg>
</template>

CSS

.icon-rainbow-cloud-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%22M200%20116a44.16%2044.16%200%200%200-42%2030.88a27.2%2027.2%200%200%200-6-.66c-15.44%200-28%2013-28%2028.89S136.56%20204%20152%20204h48a44%2044%200%200%200%200-88m0%2080h-48c-11%200-20-9.37-20-20.89s9-20.89%2020-20.89a19.1%2019.1%200%200%201%207.29%201.43a4%204%200%200%200%205.44-2.9A36%2036%200%201%201%20200%20196M20%20160v16a4%204%200%200%201-8%200v-16a100%20100%200%200%201%20169.71-71.69a4%204%200%200%201-5.57%205.69A92%2092%200%200%200%2020%20160m92-60a60.07%2060.07%200%200%200-60%2060v16a4%204%200%200%201-8%200v-16a68%2068%200%200%201%20108.24-54.82a4%204%200%201%201-4.74%206.44A59.57%2059.57%200%200%200%20112%20100m11.31%2029.79a4%204%200%200%201-4.81%203A28%2028%200%200%200%2084%20160v16a4%204%200%200%201-8%200v-16a36%2036%200%200%201%2036-36a36.6%2036.6%200%200%201%208.35%201a4%204%200%200%201%202.96%204.79%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%20116a44.16%2044.16%200%200%200-42%2030.88a27.2%2027.2%200%200%200-6-.66c-15.44%200-28%2013-28%2028.89S136.56%20204%20152%20204h48a44%2044%200%200%200%200-88m0%2080h-48c-11%200-20-9.37-20-20.89s9-20.89%2020-20.89a19.1%2019.1%200%200%201%207.29%201.43a4%204%200%200%200%205.44-2.9A36%2036%200%201%201%20200%20196M20%20160v16a4%204%200%200%201-8%200v-16a100%20100%200%200%201%20169.71-71.69a4%204%200%200%201-5.57%205.69A92%2092%200%200%200%2020%20160m92-60a60.07%2060.07%200%200%200-60%2060v16a4%204%200%200%201-8%200v-16a68%2068%200%200%201%20108.24-54.82a4%204%200%201%201-4.74%206.44A59.57%2059.57%200%200%200%20112%20100m11.31%2029.79a4%204%200%200%201-4.81%203A28%2028%200%200%200%2084%20160v16a4%204%200%200%201-8%200v-16a36%2036%200%200%201%2036-36a36.6%2036.6%200%200%201%208.35%201a4%204%200%200%201%202.96%204.79%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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