cloud with rain emoji
cloud-with-rain from Fluent Emoji High Contrast by Microsoft Corporation · Default · Travel & Places · MIT Free for personal and commercial use.
- Name
- cloud-with-rain
- Set
- Fluent Emoji High Contrast
- Style
- Default
- Category
- Travel & Places
- Viewbox
- 32×32
- License
- MIT
The same emoji in other sets
More travel & places icons from Fluent Emoji High Contrast
Use the cloud with rain emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M2 13.397v-.023a6.457 6.457 0 0 1 6.606-6.458a4.05 4.05 0 0 1 5.612-1.854A8.93 8.93 0 0 1 20.984 2a8.98 8.98 0 0 1 6.306 2.56c3.297 3.216 3.587 8.346.862 11.913A8.39 8.39 0 0 1 21.308 20H8.593a6.5 6.5 0 0 1-5.18-2.565A6.48 6.48 0 0 1 2 13.397m4.319 12.861l2.39-3.272a1.805 1.805 0 0 0-.392-2.526a1.805 1.805 0 0 0-2.526.394l-2.392 3.271a1.805 1.805 0 0 0 .394 2.526c.807.59 1.936.414 2.526-.393"/><path d="m15.315 22.986l-2.39 3.272a1.805 1.805 0 0 1-2.527.393a1.805 1.805 0 0 1-.393-2.526l2.391-3.271a1.805 1.805 0 0 1 2.526-.394c.807.59.983 1.719.393 2.526m4.215 3.272l2.39-3.272a1.805 1.805 0 0 0-.393-2.526a1.805 1.805 0 0 0-2.525.394l-2.392 3.271a1.805 1.805 0 0 0 .394 2.526c.807.59 1.935.414 2.525-.393"/></g></svg>
React
import type { SVGProps } from "react";
export function FluentEmojiHighContrastCloudWithRain(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M2 13.397v-.023a6.457 6.457 0 0 1 6.606-6.458a4.05 4.05 0 0 1 5.612-1.854A8.93 8.93 0 0 1 20.984 2a8.98 8.98 0 0 1 6.306 2.56c3.297 3.216 3.587 8.346.862 11.913A8.39 8.39 0 0 1 21.308 20H8.593a6.5 6.5 0 0 1-5.18-2.565A6.48 6.48 0 0 1 2 13.397m4.319 12.861l2.39-3.272a1.805 1.805 0 0 0-.392-2.526a1.805 1.805 0 0 0-2.526.394l-2.392 3.271a1.805 1.805 0 0 0 .394 2.526c.807.59 1.936.414 2.526-.393"/><path d="m15.315 22.986l-2.39 3.272a1.805 1.805 0 0 1-2.527.393a1.805 1.805 0 0 1-.393-2.526l2.391-3.271a1.805 1.805 0 0 1 2.526-.394c.807.59.983 1.719.393 2.526m4.215 3.272l2.39-3.272a1.805 1.805 0 0 0-.393-2.526a1.805 1.805 0 0 0-2.525.394l-2.392 3.271a1.805 1.805 0 0 0 .394 2.526c.807.59 1.935.414 2.525-.393"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M2 13.397v-.023a6.457 6.457 0 0 1 6.606-6.458a4.05 4.05 0 0 1 5.612-1.854A8.93 8.93 0 0 1 20.984 2a8.98 8.98 0 0 1 6.306 2.56c3.297 3.216 3.587 8.346.862 11.913A8.39 8.39 0 0 1 21.308 20H8.593a6.5 6.5 0 0 1-5.18-2.565A6.48 6.48 0 0 1 2 13.397m4.319 12.861l2.39-3.272a1.805 1.805 0 0 0-.392-2.526a1.805 1.805 0 0 0-2.526.394l-2.392 3.271a1.805 1.805 0 0 0 .394 2.526c.807.59 1.936.414 2.526-.393"/><path d="m15.315 22.986l-2.39 3.272a1.805 1.805 0 0 1-2.527.393a1.805 1.805 0 0 1-.393-2.526l2.391-3.271a1.805 1.805 0 0 1 2.526-.394c.807.59.983 1.719.393 2.526m4.215 3.272l2.39-3.272a1.805 1.805 0 0 0-.393-2.526a1.805 1.805 0 0 0-2.525.394l-2.392 3.271a1.805 1.805 0 0 0 .394 2.526c.807.59 1.935.414 2.525-.393"/></g></svg> </template>
CSS
.icon-cloud-with-rain {
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%2032%2032%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M2%2013.397v-.023a6.457%206.457%200%200%201%206.606-6.458a4.05%204.05%200%200%201%205.612-1.854A8.93%208.93%200%200%201%2020.984%202a8.98%208.98%200%200%201%206.306%202.56c3.297%203.216%203.587%208.346.862%2011.913A8.39%208.39%200%200%201%2021.308%2020H8.593a6.5%206.5%200%200%201-5.18-2.565A6.48%206.48%200%200%201%202%2013.397m4.319%2012.861l2.39-3.272a1.805%201.805%200%200%200-.392-2.526a1.805%201.805%200%200%200-2.526.394l-2.392%203.271a1.805%201.805%200%200%200%20.394%202.526c.807.59%201.936.414%202.526-.393%22%2F%3E%3Cpath%20d%3D%22m15.315%2022.986l-2.39%203.272a1.805%201.805%200%200%201-2.527.393a1.805%201.805%200%200%201-.393-2.526l2.391-3.271a1.805%201.805%200%200%201%202.526-.394c.807.59.983%201.719.393%202.526m4.215%203.272l2.39-3.272a1.805%201.805%200%200%200-.393-2.526a1.805%201.805%200%200%200-2.525.394l-2.392%203.271a1.805%201.805%200%200%200%20.394%202.526c.807.59%201.935.414%202.525-.393%22%2F%3E%3C%2Fg%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%2032%2032%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M2%2013.397v-.023a6.457%206.457%200%200%201%206.606-6.458a4.05%204.05%200%200%201%205.612-1.854A8.93%208.93%200%200%201%2020.984%202a8.98%208.98%200%200%201%206.306%202.56c3.297%203.216%203.587%208.346.862%2011.913A8.39%208.39%200%200%201%2021.308%2020H8.593a6.5%206.5%200%200%201-5.18-2.565A6.48%206.48%200%200%201%202%2013.397m4.319%2012.861l2.39-3.272a1.805%201.805%200%200%200-.392-2.526a1.805%201.805%200%200%200-2.526.394l-2.392%203.271a1.805%201.805%200%200%200%20.394%202.526c.807.59%201.936.414%202.526-.393%22%2F%3E%3Cpath%20d%3D%22m15.315%2022.986l-2.39%203.272a1.805%201.805%200%200%201-2.527.393a1.805%201.805%200%200%201-.393-2.526l2.391-3.271a1.805%201.805%200%200%201%202.526-.394c.807.59.983%201.719.393%202.526m4.215%203.272l2.39-3.272a1.805%201.805%200%200%200-.393-2.526a1.805%201.805%200%200%200-2.525.394l-2.392%203.271a1.805%201.805%200%200%200%20.394%202.526c.807.59%201.935.414%202.525-.393%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji-high-contrast/cloud-with-rain.svg?color=%231a73e8&size=48