Home/Libraries/Freehand free icons (Iconify)/cloud-loading

Freehand free icons (Iconify)

CloudLoading

License: CC-BY-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><g fill="#818cf8" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.669 12.917c1.57.67 1.32-.7.75-.43a4.4 4.4 0 0 1-1.84-1.06c-1.41-2.18-.82-3.72.75-4.43a3.24 3.24 0 0 1 1.82-.3q.389.092.73.3a.45.45 0 0 0 .46-.77c-.22-.21-.16-.71-.16-1a3 3 0 0 1 4.82-2.23c.64.45.46 1.32 1.15 1.3a.57.57 0 0 0 .52-.37a3.5 3.5 0 0 1 3.88-2.65a4.18 4.18 0 0 1 3.45 2.31a3 3 0 0 1-.05 2.27c-1 1.85-1.43 1.51-1.43 2.08c0 .14.41.8.93.44a1.62 1.62 0 0 1 1.37.22c1.17.83 1.43 2.38.21 3.15c-3.52 2.23-6.11 1.5-10.74 1.32a14.8 14.8 0 0 1-3.72-.45a.352.352 0 0 0-.33.62c1.298.388 2.645.59 4 .6c4.64.27 7.46 1.09 11.3-1.24c2.41-1.46 1.22-4.86-1.15-5.34c.19-.28.4-.55.56-.84a4 4 0 0 0 .05-3.28c-1.24-3-6-4.3-8.36-1.6c-.72.81-.59 1-.66.88a4.1 4.1 0 0 0-2.26-1.06a4 4 0 0 0-4.45 4.45a4.08 4.08 0 0 0-3.66 1.55c-1 1.43-.58 3 .4 4.44c.48.472 1.043.851 1.66 1.12m8.66 4.86c-.1-.54-.48-.7-1.55 0a30.6 30.6 0 0 0-4.16 3.92q.06.999 1.23.12a34 34 0 0 0 3.15-2.82c.41-.37.89-.78 1.33-1.22m-9.5 3.08c-.49.7.13.65 1.11.33a13.2 13.2 0 0 0 2.79-2.62q.15-.166.32-.31c-.45-.51-1-.53-1.86.37c-.78.69-1.68 1.53-2.36 2.23m13.9-2.86c.18-.64-.12-.81-1.35-.12c-2.58 2.42-3.62 3.37-4.27 4s.14.55 1.62-.11a21 21 0 0 0 4-3.77"/><path d="M23.639 18.557c-2.25-3.82-20-2.91-22.5-1.18c-1.7 1.2-1.43 4.68.36 5.49c4.71 2.14 10.64.4 16.51.4a.35.35 0 1 0 0-.7c-12.85.43-14.01.06-16.07-.69c-.94-.51-1.11-2.88-.13-3.55c.81-.57 3.81-.9 4.8-1c4.14-.74 12.3-1 15.7 1.05c1.15.69 1.3 2 .05 3.1a3.57 3.57 0 0 1-2.85.89a.31.31 0 0 0-.13.6c2.25.56 5.76-1.86 4.26-4.41"/></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. CloudLoadingIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.