How to pick a consistent cloud icon set
10 of our own cloud icons, with practical notes on where each one fits.
Every design in this roundup was drawn in our own studio and cleaned by hand, so the paths are tidy and the shapes stay crisp at any size. design-system view: outline vs filled, stroke weight, when to use colour.
Our rule for icons like these: pick one style and stick to it across a project, keep optical sizes consistent, and let colour do the talking only where it means something.
The icons
Cloud Data
Cloud Data works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud, cloud computing, cloud storage, cloudy.
Download free →
Cloud Code Api
Cloud Code Api works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud code, cloud computing, cloud development, code.
Download free →
Cloud code 3
Cloud code 3 works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud code, cloud, code, computing.
Download free →
Cloud Sky
Cloud Sky works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud, cloudy, cloud storage, cloud computing.
Download free →
Cloud upload
Cloud upload works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud upload, data, file, storage.
Download free →
Cloud rainbow
Cloud rainbow works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud, rainbow, icon, graphic.
Download free →
Cloud
Cloud works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud, cloudy, computing, cyberspace.
Download free →
Cloud share
Cloud share works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud, share, icon, cyberspace.
Download free →
Cloud Hail Forecast
Cloud Hail Forecast works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud hail, hail, hailstorm, cloud.
Download free →
Cloud Cyberspace
Cloud Cyberspace works well wherever you need a clear cloud cue — keep it at 20–24 px in interfaces and scale the SVG up without loss for print. Keywords: cloud, cloud shape, weather cloud, cloudy sky.
Download free →Quick tips
- Use one visual style per project — mixing outline and filled sets breaks rhythm.
- Export SVG for screens and PNG at 2x for anything raster.
- Pair every icon with a label the first time it appears.
- Keep at least 10% padding inside each icon's box so a set lines up on a grid.
- Test on a dark background early; some shapes vanish.
Browse the full library at infyicon.com.
FAQ
What formats do I get?
SVG for scalable use plus PNG in several sizes. SVG can be recoloured in any editor or with CSS.
Can I use these commercially?
Yes. Infyicon icons are free with a credit link; Infyvector files include a commercial licence with the purchase.
Do the styles match across designs?
Yes — the whole library follows the same grid and stroke rules, so sets mix cleanly.
Pick one idea from this list and try it in your next design this week.