cloud icon
cloud from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- cloud
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
cloudAkar IconscloudBootstrap IconscloudBoxIcons v2cloudBoxIcons v2 SolidcloudCarboncloudEmoji One (Colored)cloudFramework7 IconscloudFont Awesome 6 SolidcloudFeather Iconscloud-16-filledFluent UI System IconscloudFluent EmojicloudFluent Emoji FlatcloudFluent Emoji High Contrastcloudcss.ggcloudHeroIconscloudHuge IconscloudHumbleiconscloudIconoircloudJam IconscloudLine AwesomecloudMaterial Line IconscloudLucidecloudMajesticonscloudMaterial Symbols
Related icons in IonIcons
Use the cloud icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M396 432H136c-36.44 0-70.36-12.57-95.51-35.41C14.38 372.88 0 340 0 304c0-36.58 13.39-68.12 38.72-91.22c18.11-16.53 42.22-28.25 69.18-33.87a16 16 0 0 0 11.37-9.15a156.24 156.24 0 0 1 42.05-56C187.76 91.69 220.5 80 256 80a153.57 153.57 0 0 1 107.14 42.9c24.73 23.81 41.5 55.28 49.18 92a16 16 0 0 0 12.12 12.39C470 237.42 512 270.43 512 328c0 33.39-12.24 60.78-35.41 79.23C456.23 423.43 428.37 432 396 432"/></svg>
React
import type { SVGProps } from "react";
export function IonCloud(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M396 432H136c-36.44 0-70.36-12.57-95.51-35.41C14.38 372.88 0 340 0 304c0-36.58 13.39-68.12 38.72-91.22c18.11-16.53 42.22-28.25 69.18-33.87a16 16 0 0 0 11.37-9.15a156.24 156.24 0 0 1 42.05-56C187.76 91.69 220.5 80 256 80a153.57 153.57 0 0 1 107.14 42.9c24.73 23.81 41.5 55.28 49.18 92a16 16 0 0 0 12.12 12.39C470 237.42 512 270.43 512 328c0 33.39-12.24 60.78-35.41 79.23C456.23 423.43 428.37 432 396 432"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M396 432H136c-36.44 0-70.36-12.57-95.51-35.41C14.38 372.88 0 340 0 304c0-36.58 13.39-68.12 38.72-91.22c18.11-16.53 42.22-28.25 69.18-33.87a16 16 0 0 0 11.37-9.15a156.24 156.24 0 0 1 42.05-56C187.76 91.69 220.5 80 256 80a153.57 153.57 0 0 1 107.14 42.9c24.73 23.81 41.5 55.28 49.18 92a16 16 0 0 0 12.12 12.39C470 237.42 512 270.43 512 328c0 33.39-12.24 60.78-35.41 79.23C456.23 423.43 428.37 432 396 432"/></svg> </template>
CSS
.icon-cloud {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M396%20432H136c-36.44%200-70.36-12.57-95.51-35.41C14.38%20372.88%200%20340%200%20304c0-36.58%2013.39-68.12%2038.72-91.22c18.11-16.53%2042.22-28.25%2069.18-33.87a16%2016%200%200%200%2011.37-9.15a156.24%20156.24%200%200%201%2042.05-56C187.76%2091.69%20220.5%2080%20256%2080a153.57%20153.57%200%200%201%20107.14%2042.9c24.73%2023.81%2041.5%2055.28%2049.18%2092a16%2016%200%200%200%2012.12%2012.39C470%20237.42%20512%20270.43%20512%20328c0%2033.39-12.24%2060.78-35.41%2079.23C456.23%20423.43%20428.37%20432%20396%20432%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M396%20432H136c-36.44%200-70.36-12.57-95.51-35.41C14.38%20372.88%200%20340%200%20304c0-36.58%2013.39-68.12%2038.72-91.22c18.11-16.53%2042.22-28.25%2069.18-33.87a16%2016%200%200%200%2011.37-9.15a156.24%20156.24%200%200%201%2042.05-56C187.76%2091.69%20220.5%2080%20256%2080a153.57%20153.57%200%200%201%20107.14%2042.9c24.73%2023.81%2041.5%2055.28%2049.18%2092a16%2016%200%200%200%2012.12%2012.39C470%20237.42%20512%20270.43%20512%20328c0%2033.39-12.24%2060.78-35.41%2079.23C456.23%20423.43%20428.37%20432%20396%20432%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/cloud.svg?color=%231a73e8&size=48
