Clouds icon: free SVG in 5 styles

Clouds in five styles

Linear
Line Duotone
Outline
Bold
Bold Duotone

Linear at 16, 20, 24 and 32px

16px
20px
24px
32px

Get the SVG

The command prints the file exactly as Bloom ships it. Set --style to line-duotone, outline, bold or bold-duotone for the other styles. The same files are in the npm package under dist/ and on this site under svg/.

npx -y bloom-icons get clouds --style linear

Lineardist/linear/clouds.svgsvg/linear/clouds.svg
Line Duotonedist/line-duotone/clouds.svgsvg/line-duotone/clouds.svg
Outlinedist/outline/clouds.svgsvg/outline/clouds.svg
Bolddist/bold/clouds.svgsvg/bold/clouds.svg
Bold Duotonedist/bold-duotone/clouds.svgsvg/bold-duotone/clouds.svg

dist/linear/clouds.svg

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.668 7.281C11.97 5.471 13.761 4.297 15.543 4.744C15.906 4.836 16.253 4.992 16.561 5.205C16.972 5.488 17.313 5.868 17.549 6.307C17.611 6.423 17.666 6.542 17.714 6.665C17.804 6.899 17.851 7.057 18.055 7.22C18.234 7.363 18.391 7.381 18.606 7.437C18.743 7.472 18.877 7.519 19.007 7.576C19.596 7.833 20.081 8.3 20.36 8.879C21.049 10.311 20.352 12.029 18.868 12.581"/>
  <path d="M6.281 20.25A2.812 2.812 0 0 1 5.489 14.739A1.125 1.125 0 0 0 6.294 13.749A3.938 3.938 0 0 1 13.953 12.815A1.125 1.125 0 0 0 14.804 13.563A3.375 3.375 0 0 1 14.156 20.25Z"/>
</svg>

Clouds in five styles

Linear at 16, 20, 24 and 32px

Get the SVG

More in Weather