Cloud icon

A free cloud icon in 5 styles, drawn by hand on a 24px grid. Copy it as SVG or JSX, for personal or commercial use.

Style Stroke

Category: Weather & Climate
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: weather, sky, forecast, overcast, meteorology, atmosphere, climate

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4.02 6.03C4.26 2.66 7.07 0 10.5 0C13.37 0 15.81 1.86 16.67 4.44C18.63 5.29 20 7.23 20 9.5C20 12.54 17.54 15 14.5 15L4.5 15C2.01 15 0 12.99 0 10.5C0 8.18 1.76 6.27 4.02 6.03Z"/>
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4.02 6.03C3.97 6.69 4.03 7.37 4.17 8"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(1 4)" fill="currentColor" d="M11.5 0C14.66 0 17.36 1.95 18.47 4.71C20.56 5.79 22 7.98 22 10.5C22 14.09 19.09 17 15.5 17L5.5 17C2.46 17 0 14.54 0 11.5C0 8.94 1.75 6.79 4.12 6.18C4.41 4.52 5.25 3.06 6.43 1.97C7.58 0.92 9.06 0.22 10.7 0.04C10.96 0.01 11.23 0 11.5 0Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4.02 6.03C4.26 2.66 7.07 0 10.5 0C13.37 0 15.81 1.86 16.67 4.44C18.63 5.29 20 7.23 20 9.5C20 12.54 17.54 15 14.5 15L4.5 15C2.01 15 0 12.99 0 10.5C0 8.18 1.76 6.27 4.02 6.03Z"/>
  <path opacity="0.28" transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4.02 6.03C3.97 6.69 4.03 7.37 4.17 8"/>
  <path transform="translate(6 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M10.5 15C13.54 15 16 12.54 16 9.5C16 7.23 14.63 5.29 12.67 4.44C11.81 1.86 9.37 0 6.5 0C3.07 0 0.26 2.66 0.02 6.03C-0.03 6.69 0.02 7.37 0.17 8"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(1 4)" fill="currentColor" d="M11.5 0C14.66 0 17.36 1.95 18.47 4.71C20.56 5.79 22 7.98 22 10.5C22 14.09 19.09 17 15.5 17L5.5 17C2.46 17 0 14.54 0 11.5C0 8.94 1.75 6.79 4.12 6.18C4.41 4.52 5.25 3.06 6.43 1.97C7.58 0.92 9.06 0.22 10.7 0.04C10.96 0.01 11.23 0 11.5 0Z"/>
  <path transform="translate(6 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M10.5 15C13.54 15 16 12.54 16 9.5C16 7.23 14.63 5.29 12.67 4.44C11.81 1.86 9.37 0 6.5 0C3.07 0 0.26 2.66 0.02 6.03C-0.03 6.69 0.02 7.37 0.17 8"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(2 5)" fill="currentColor" d="M20 9.5C20 12.54 17.54 15 14.5 15L4.5 15C2.01 15 0 12.99 0 10.5C0 8.18 1.76 6.27 4.02 6.03C4.26 2.66 7.07 0 10.5 0C13.37 0 15.81 1.86 16.67 4.44C18.63 5.29 20 7.23 20 9.5Z"/>
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4.02 6.03C4.26 2.66 7.07 0 10.5 0C13.37 0 15.81 1.86 16.67 4.44C18.63 5.29 20 7.23 20 9.5C20 12.54 17.54 15 14.5 15L4.5 15C2.01 15 0 12.99 0 10.5C0 8.18 1.76 6.27 4.02 6.03Z"/>
  <path transform="translate(2 5)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4.02 6.03C3.97 6.69 4.03 7.37 4.17 8"/>
</svg>