Home/Libraries/Font Awesome Solid (Iconify)/cloud-sun-rain

Font Awesome Solid (Iconify)

CloudSunRain

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 640 640"><path fill="#818cf8" d="M254.9 512.2c4.2-12.6 17.8-19.4 30.3-15.2c12.6 4.2 19.4 17.8 15.2 30.4L279 591.5c-4.2 12.6-17.8 19.4-30.4 15.2s-19.4-17.8-15.2-30.3l21.4-64.2zm120 0c4.2-12.6 17.8-19.4 30.3-15.2c12.6 4.2 19.4 17.8 15.2 30.4L399 591.5c-4.2 12.6-17.8 19.4-30.4 15.2s-19.4-17.8-15.2-30.3l21.4-64.2zm120 0c4.2-12.6 17.8-19.4 30.3-15.2c12.6 4.2 19.4 17.8 15.2 30.4L519 591.5c-4.2 12.6-17.8 19.4-30.4 15.2s-19.4-17.8-15.2-30.3l21.4-64.2zM448.3 192c44.2 0 80 35.8 80 80c0 7.5-1.1 14.7-3 21.5c29.8 11.6 51 40.6 51 74.5c0 44.2-35.8 80-80 80h-192l-8.2-.4c-40.3-4.1-71.8-38.2-71.8-79.6c0-39 27.9-71.5 64.9-78.5c-.5-3.1-.9-6.2-.9-9.5c0-30.9 25.1-56 56-56c12.4 0 23.9 4.1 33.2 10.9c13.4-25.5 40.1-42.9 70.8-42.9m-208-159.8c5.3 0 10.3 2.7 13.3 7.1l47.3 70.4l83.3-16.3c5.2-1 10.6.7 14.3 4.4c3.8 3.8 5.4 9.2 4.4 14.4l-8.6 43.8c-11.9 5.5-22.8 12.9-32.4 21.6c-5.7-1-11.7-1.5-17.7-1.5c-14.3 0-28 3-40.4 8.2c-16.9-15-39.2-24.2-63.6-24.2c-53 0-96 43-96 96c0 30.9 14.6 58.2 37.2 75.8c-3.4 11.5-5.2 23.6-5.2 36.2c0 13.2 2 25.9 5.7 37.9l-2.4-3.5l-83.2 16.3c-5.2 1-10.6-.7-14.3-4.4c-3.8-3.8-5.4-9.2-4.4-14.4l16.3-83.3l-70.4-47.4c-4.4-3-7.1-8-7.1-13.3s2.6-10.3 7-13.2l70.4-47.4l-16.3-83.2l-.2-2c-.3-4.6 1.3-9.1 4.6-12.4c3.8-3.8 9.2-5.4 14.4-4.4l83.2 16.3l47.3-70.4l1.2-1.6c3-3.5 7.4-5.5 12.1-5.5zm0 175.8c8.6 0 16.6 2.3 23.6 6.2c-9.7 11.9-16.9 25.9-20.7 41.3c-15 8.1-28.2 19.2-38.8 32.3c-7.5-8.5-12.2-19.6-12.2-31.8c0-26.5 21.5-48 48-48z"/></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. CloudSunRainIcon.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.

Related Icons in Font Awesome Solid (Iconify)

Browse all Font Awesome Solid (Iconify) icons →