md cloud icon

md-cloud-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.

Name: md-cloud-outline
Set: IonIcons
Style: Outline
Viewbox: 512×512
License: MIT
Aliases: android-cloud-outline

1 other variant in IonIcons

Use the md cloud icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M403.001 217.001C388.997 148.002 328.998 96 256 96c-57.998 0-107.999 32.998-132.997 81C63.002 183.002 16 233.998 16 296c0 65.996 54.004 120 120 120h260c55 0 100-45 100-100.001 0-52.997-40.997-95.999-92.999-98.998zM396 376H136c-44.004 0-80-35.996-80-80 0-44 35.996-80 80-80h14.004c12.998-46 55-80 105.996-80 60.996 0 110 49 110 110v10h30c32.998 0 60 27.003 60 60 0 32.998-27.002 60-60 60z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonMdCloudOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M403.001 217.001C388.997 148.002 328.998 96 256 96c-57.998 0-107.999 32.998-132.997 81C63.002 183.002 16 233.998 16 296c0 65.996 54.004 120 120 120h260c55 0 100-45 100-100.001 0-52.997-40.997-95.999-92.999-98.998zM396 376H136c-44.004 0-80-35.996-80-80 0-44 35.996-80 80-80h14.004c12.998-46 55-80 105.996-80 60.996 0 110 49 110 110v10h30c32.998 0 60 27.003 60 60 0 32.998-27.002 60-60 60z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M403.001 217.001C388.997 148.002 328.998 96 256 96c-57.998 0-107.999 32.998-132.997 81C63.002 183.002 16 233.998 16 296c0 65.996 54.004 120 120 120h260c55 0 100-45 100-100.001 0-52.997-40.997-95.999-92.999-98.998zM396 376H136c-44.004 0-80-35.996-80-80 0-44 35.996-80 80-80h14.004c12.998-46 55-80 105.996-80 60.996 0 110 49 110 110v10h30c32.998 0 60 27.003 60 60 0 32.998-27.002 60-60 60z" fill="currentColor"/></svg>
</template>

CSS

.icon-md-cloud-outline {
  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%20d%3D%22M403.001%20217.001C388.997%20148.002%20328.998%2096%20256%2096c-57.998%200-107.999%2032.998-132.997%2081C63.002%20183.002%2016%20233.998%2016%20296c0%2065.996%2054.004%20120%20120%20120h260c55%200%20100-45%20100-100.001%200-52.997-40.997-95.999-92.999-98.998zM396%20376H136c-44.004%200-80-35.996-80-80%200-44%2035.996-80%2080-80h14.004c12.998-46%2055-80%20105.996-80%2060.996%200%20110%2049%20110%20110v10h30c32.998%200%2060%2027.003%2060%2060%200%2032.998-27.002%2060-60%2060z%22%20fill%3D%22currentColor%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%20d%3D%22M403.001%20217.001C388.997%20148.002%20328.998%2096%20256%2096c-57.998%200-107.999%2032.998-132.997%2081C63.002%20183.002%2016%20233.998%2016%20296c0%2065.996%2054.004%20120%20120%20120h260c55%200%20100-45%20100-100.001%200-52.997-40.997-95.999-92.999-98.998zM396%20376H136c-44.004%200-80-35.996-80-80%200-44%2035.996-80%2080-80h14.004c12.998-46%2055-80%20105.996-80%2060.996%200%20110%2049%20110%20110v10h30c32.998%200%2060%2027.003%2060%2060%200%2032.998-27.002%2060-60%2060z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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

md cloud icon

1 other variant in IonIcons

Related icons in IonIcons

Use the md cloud icon

SVG

React

Vue

CSS