cloud icon
cloud-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.
- Name
- cloud-sharp
- Set
- IonIcons
- Style
- Sharp
- 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.22c19.93-18.19 47.12-30.56 77.38-35.37a156.4 156.4 0 0 1 45.22-63.61C187.76 91.69 220.5 80 256 80a153.57 153.57 0 0 1 107.14 42.9c27.06 26.06 44.59 61.28 51.11 102.46C463.56 232.66 512 266.15 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 IonCloudSharp(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.22c19.93-18.19 47.12-30.56 77.38-35.37a156.4 156.4 0 0 1 45.22-63.61C187.76 91.69 220.5 80 256 80a153.57 153.57 0 0 1 107.14 42.9c27.06 26.06 44.59 61.28 51.11 102.46C463.56 232.66 512 266.15 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.22c19.93-18.19 47.12-30.56 77.38-35.37a156.4 156.4 0 0 1 45.22-63.61C187.76 91.69 220.5 80 256 80a153.57 153.57 0 0 1 107.14 42.9c27.06 26.06 44.59 61.28 51.11 102.46C463.56 232.66 512 266.15 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-sharp {
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.22c19.93-18.19%2047.12-30.56%2077.38-35.37a156.4%20156.4%200%200%201%2045.22-63.61C187.76%2091.69%20220.5%2080%20256%2080a153.57%20153.57%200%200%201%20107.14%2042.9c27.06%2026.06%2044.59%2061.28%2051.11%20102.46C463.56%20232.66%20512%20266.15%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.22c19.93-18.19%2047.12-30.56%2077.38-35.37a156.4%20156.4%200%200%201%2045.22-63.61C187.76%2091.69%20220.5%2080%20256%2080a153.57%20153.57%200%200%201%20107.14%2042.9c27.06%2026.06%2044.59%2061.28%2051.11%20102.46C463.56%20232.66%20512%20266.15%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-sharp.svg?color=%231a73e8&size=48
