cloud icon

Cloud: cloud, cloudy, cloud storage, online storage. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3C6.636 3 7.249 3.117 7.84 3.351C8.482 3.605 9.047 3.976 9.536 4.464C10.024 4.953 10.395 5.518 10.649 6.16C10.783 6.497 10.878 6.842 10.935 7.194C11.088 7.137 11.245 7.092 11.409 7.059C11.911 6.958 12.406 6.984 12.895 7.136C13.383 7.289 13.805 7.55 14.16 7.918C14.474 8.244 14.703 8.622 14.846 9.051C14.989 9.481 15.033 9.92 14.977 10.369C14.914 10.877 14.733 11.339 14.434 11.754C14.134 12.169 13.754 12.487 13.292 12.708C12.883 12.903 12.453 13 12 13L6 13C5.364 13 4.751 12.883 4.16 12.649ZM12.861 11.805C13.169 11.658 13.423 11.446 13.622 11.169C13.822 10.893 13.943 10.585 13.985 10.246C14.022 9.947 13.993 9.654 13.897 9.368C13.802 9.081 13.65 8.83 13.44 8.612C13.203 8.366 12.922 8.193 12.596 8.091C12.271 7.989 11.94 7.972 11.606 8.039C11.31 8.099 11.041 8.219 10.8 8.4C10.711 8.467 10.611 8.5 10.5 8.5C10.359 8.5 10.241 8.452 10.144 8.356C10.048 8.259 10 8.141 10 8C10 7.491 9.906 7.001 9.719 6.528C9.516 6.014 9.219 5.562 8.828 5.172C8.438 4.781 7.986 4.484 7.472 4.281C6.999 4.094 6.509 4 6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L12 12C12.302 12 12.589 11.935 12.861 11.805Z"/></svg>

React

// Gentleface "cloud" (line-round), MIT. https://gentleface.com/icons/cloud
import type { SVGProps } from 'react';

export function CloudIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3C6.636 3 7.249 3.117 7.84 3.351C8.482 3.605 9.047 3.976 9.536 4.464C10.024 4.953 10.395 5.518 10.649 6.16C10.783 6.497 10.878 6.842 10.935 7.194C11.088 7.137 11.245 7.092 11.409 7.059C11.911 6.958 12.406 6.984 12.895 7.136C13.383 7.289 13.805 7.55 14.16 7.918C14.474 8.244 14.703 8.622 14.846 9.051C14.989 9.481 15.033 9.92 14.977 10.369C14.914 10.877 14.733 11.339 14.434 11.754C14.134 12.169 13.754 12.487 13.292 12.708C12.883 12.903 12.453 13 12 13L6 13C5.364 13 4.751 12.883 4.16 12.649ZM12.861 11.805C13.169 11.658 13.423 11.446 13.622 11.169C13.822 10.893 13.943 10.585 13.985 10.246C14.022 9.947 13.993 9.654 13.897 9.368C13.802 9.081 13.65 8.83 13.44 8.612C13.203 8.366 12.922 8.193 12.596 8.091C12.271 7.989 11.94 7.972 11.606 8.039C11.31 8.099 11.041 8.219 10.8 8.4C10.711 8.467 10.611 8.5 10.5 8.5C10.359 8.5 10.241 8.452 10.144 8.356C10.048 8.259 10 8.141 10 8C10 7.491 9.906 7.001 9.719 6.528C9.516 6.014 9.219 5.562 8.828 5.172C8.438 4.781 7.986 4.484 7.472 4.281C6.999 4.094 6.509 4 6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L12 12C12.302 12 12.589 11.935 12.861 11.805Z" />
    </svg>
  );
}

Vue

Vue: see /icons/cloud.md

Svelte

Svelte: see /icons/cloud.md

HTML img

HTML img: see /icons/cloud.md

CSS

CSS: see /icons/cloud.md

Data URL

Data URL: see /icons/cloud.md

Sprite

Sprite: see /icons/cloud.md

SwiftUI

SwiftUI: see /icons/cloud.md

Compose

Compose: see /icons/cloud.md

Android XML

Android XML: see /icons/cloud.md

Flutter

Flutter: see /icons/cloud.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

cloud, cloudy, cloud storage, online storage, cloud computing, cloudy weather

Alternatives

clouds: overcast, heavy clouds (overcast)
cloud-sun: partly cloudy (partly-cloudy)

Also fits

server: cloud hosting or storage (cloud)
cloud folder: cloud storage in general (cloud)
storage bucket: cloud storage in general
overcast: cloudy (the weather set default)

Not for

word cloud (use word-cloud): weather or cloud storage (cloud)

Tags

weather, overcast, cloud-storage, online

Category

Connectivity

Component name

CloudIcon

History

2026-10-14 added

Family 22

cloud-alert cloud-arrow-down cloud-arrow-up cloud-check cloud-clock cloud-fog cloud-gear cloud-hail cloud-lightning cloud-lock cloud-moon cloud-off

More connectivity icons

antenna bluetooth bluetooth-connected bluetooth-off bluetooth-searching cast cast-connected ethernet hotspot hotspot-off network network-off nfc nfc-off radio-tower router · all connectivity icons

For agents

Metadata: /icons/cloud.json · Markdown: /icons/cloud.md · SVG: https://gentleface.com/svg/{style}/16/cloud.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/cloud.png

cloud icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp