Cloud Animated Icon for React

Download the Cloud icon

The Cloud icon is one file in the ExodeUI icon library. It starts from the open-source Lucide cloud shape and adds spring motion plus hover and press states. You get the packaged .bexode file for your components and the editable .exode file for ExodeUI, so you can change the timing, size or colour without redrawing the vector.

Using the Cloud icon in React and Next.js

Run the command above in a React or Next.js project to add the Cloud icon. Open the file in ExodeUI when you need to change its states or motion; the packaged version keeps the same behaviour when you ship it. The same .exode file also works with the Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter runtimes.

Related animated icons

• Heart icon
• House icon
• Search icon
• Settings icon
• User icon
• Bell icon
• Star icon
• Check icon

Frequently asked questions

Is the Cloud animated icon free?

Yes. You can preview the Cloud icon and copy its install command without paying. The icon starts from the open-source Lucide set, which is released under the ISC licence, and ExodeUI also has a free Community plan.

How do I use the Cloud icon in React or Next.js?

Run npx exode add icon cloud in your project, then open the downloaded .exode file in ExodeUI to inspect or edit its states. The icon ships as a small .bexode file so it can be embedded in a React component.

Does the Cloud icon work outside React?

The same .exode file works with the other ExodeUI runtimes, including Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.

Can I animate my own SVG instead?

Yes. The free SVG animator lets you paste an SVG, choose spring motion and a trigger, and export a .bexode file or React component. You can also edit the result in ExodeUI.

More from ExodeUI