cloud upload icon

cloud-upload from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name
cloud-upload
Set
IonIcons
Style
Regular
Viewbox
512×512
License
MIT

2 other variants in IonIcons

The same icon in other sets

Related icons in IonIcons

Use the cloud upload icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M473.66 210c-14-10.38-31.2-18-49.36-22.11a16.11 16.11 0 0 1-12.19-12.22c-7.8-34.75-24.59-64.55-49.27-87.13C334.15 62.25 296.21 47.79 256 47.79c-35.35 0-68 11.08-94.37 32.05a150.1 150.1 0 0 0-42.06 53a16 16 0 0 1-11.31 8.87c-26.75 5.4-50.9 16.87-69.34 33.12C13.46 197.33 0 227.24 0 261.39c0 34.52 14.49 66 40.79 88.76c25.12 21.69 58.94 33.64 95.21 33.64h104V230.42l-36.69 36.69a16 16 0 0 1-23.16-.56c-5.8-6.37-5.24-16.3.85-22.39l63.69-63.68a16 16 0 0 1 22.62 0L331 244.14c6.28 6.29 6.64 16.6.39 22.91a16 16 0 0 1-22.68.06L272 230.42v153.37h124c31.34 0 59.91-8.8 80.45-24.77c23.26-18.1 35.55-44 35.55-74.83c0-29.94-13.26-55.61-38.34-74.19M240 448.21a16 16 0 1 0 32 0v-64.42h-32Z"/></svg>

React

import type { SVGProps } from "react";

export function IonCloudUpload(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="M473.66 210c-14-10.38-31.2-18-49.36-22.11a16.11 16.11 0 0 1-12.19-12.22c-7.8-34.75-24.59-64.55-49.27-87.13C334.15 62.25 296.21 47.79 256 47.79c-35.35 0-68 11.08-94.37 32.05a150.1 150.1 0 0 0-42.06 53a16 16 0 0 1-11.31 8.87c-26.75 5.4-50.9 16.87-69.34 33.12C13.46 197.33 0 227.24 0 261.39c0 34.52 14.49 66 40.79 88.76c25.12 21.69 58.94 33.64 95.21 33.64h104V230.42l-36.69 36.69a16 16 0 0 1-23.16-.56c-5.8-6.37-5.24-16.3.85-22.39l63.69-63.68a16 16 0 0 1 22.62 0L331 244.14c6.28 6.29 6.64 16.6.39 22.91a16 16 0 0 1-22.68.06L272 230.42v153.37h124c31.34 0 59.91-8.8 80.45-24.77c23.26-18.1 35.55-44 35.55-74.83c0-29.94-13.26-55.61-38.34-74.19M240 448.21a16 16 0 1 0 32 0v-64.42h-32Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M473.66 210c-14-10.38-31.2-18-49.36-22.11a16.11 16.11 0 0 1-12.19-12.22c-7.8-34.75-24.59-64.55-49.27-87.13C334.15 62.25 296.21 47.79 256 47.79c-35.35 0-68 11.08-94.37 32.05a150.1 150.1 0 0 0-42.06 53a16 16 0 0 1-11.31 8.87c-26.75 5.4-50.9 16.87-69.34 33.12C13.46 197.33 0 227.24 0 261.39c0 34.52 14.49 66 40.79 88.76c25.12 21.69 58.94 33.64 95.21 33.64h104V230.42l-36.69 36.69a16 16 0 0 1-23.16-.56c-5.8-6.37-5.24-16.3.85-22.39l63.69-63.68a16 16 0 0 1 22.62 0L331 244.14c6.28 6.29 6.64 16.6.39 22.91a16 16 0 0 1-22.68.06L272 230.42v153.37h124c31.34 0 59.91-8.8 80.45-24.77c23.26-18.1 35.55-44 35.55-74.83c0-29.94-13.26-55.61-38.34-74.19M240 448.21a16 16 0 1 0 32 0v-64.42h-32Z"/></svg>
</template>

CSS

.icon-cloud-upload {
  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%22M473.66%20210c-14-10.38-31.2-18-49.36-22.11a16.11%2016.11%200%200%201-12.19-12.22c-7.8-34.75-24.59-64.55-49.27-87.13C334.15%2062.25%20296.21%2047.79%20256%2047.79c-35.35%200-68%2011.08-94.37%2032.05a150.1%20150.1%200%200%200-42.06%2053a16%2016%200%200%201-11.31%208.87c-26.75%205.4-50.9%2016.87-69.34%2033.12C13.46%20197.33%200%20227.24%200%20261.39c0%2034.52%2014.49%2066%2040.79%2088.76c25.12%2021.69%2058.94%2033.64%2095.21%2033.64h104V230.42l-36.69%2036.69a16%2016%200%200%201-23.16-.56c-5.8-6.37-5.24-16.3.85-22.39l63.69-63.68a16%2016%200%200%201%2022.62%200L331%20244.14c6.28%206.29%206.64%2016.6.39%2022.91a16%2016%200%200%201-22.68.06L272%20230.42v153.37h124c31.34%200%2059.91-8.8%2080.45-24.77c23.26-18.1%2035.55-44%2035.55-74.83c0-29.94-13.26-55.61-38.34-74.19M240%20448.21a16%2016%200%201%200%2032%200v-64.42h-32Z%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%22M473.66%20210c-14-10.38-31.2-18-49.36-22.11a16.11%2016.11%200%200%201-12.19-12.22c-7.8-34.75-24.59-64.55-49.27-87.13C334.15%2062.25%20296.21%2047.79%20256%2047.79c-35.35%200-68%2011.08-94.37%2032.05a150.1%20150.1%200%200%200-42.06%2053a16%2016%200%200%201-11.31%208.87c-26.75%205.4-50.9%2016.87-69.34%2033.12C13.46%20197.33%200%20227.24%200%20261.39c0%2034.52%2014.49%2066%2040.79%2088.76c25.12%2021.69%2058.94%2033.64%2095.21%2033.64h104V230.42l-36.69%2036.69a16%2016%200%200%201-23.16-.56c-5.8-6.37-5.24-16.3.85-22.39l63.69-63.68a16%2016%200%200%201%2022.62%200L331%20244.14c6.28%206.29%206.64%2016.6.39%2022.91a16%2016%200%200%201-22.68.06L272%20230.42v153.37h124c31.34%200%2059.91-8.8%2080.45-24.77c23.26-18.1%2035.55-44%2035.55-74.83c0-29.94-13.26-55.61-38.34-74.19M240%20448.21a16%2016%200%201%200%2032%200v-64.42h-32Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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