Hover the icon or press Play. Suggested motion: spin. Pick another to preview it and update the animated code:
Cloud Sun icon
A free cloud sun icon from Circum Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- MPL-2.0 license
- Project
- circumicons.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/circum/cloud-sun.jsonimport * as React from "react";
/**
* Cloud Sun from Circum Icons (https://circumicons.com/), MPL-2.0 license.
* Via Cuelark UI: ui.cuelark.com/icons/circum/cloud-sun. Sized in em, colored by currentColor.
*/
export function CiCloudSunIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="Cloud_Sun">
<path
d="M21.465,9.47l-1.9-1.05.58-2.16a.968.968,0,0,0-.25-.93.957.957,0,0,0-.93-.24l-2.09.6-1.13-1.94a.988.988,0,0,0-.83-.47.967.967,0,0,0-.82.48l-1.06,1.91-2.16-.58a.951.951,0,0,0-.92.24.962.962,0,0,0-.25.93l.6,2.1-.77.44A6.3,6.3,0,0,0,8.1,8.63a6.039,6.039,0,0,0-6.04,6.03c0,.1.01.2.01.3a6.115,6.115,0,0,0,6.19,5.76h5.98a3.952,3.952,0,0,0,3.99-3.62,3.876,3.876,0,0,0-.35-1.88l1.1.3a1.007,1.007,0,0,0,.25.03.907.907,0,0,0,.67-.28.95.95,0,0,0,.25-.92l-.6-2.1,1.93-1.12a.956.956,0,0,0,.47-.83A.945.945,0,0,0,21.465,9.47Zm-7.73,4.57a2.873,2.873,0,0,1,3.49,3,2.947,2.947,0,0,1-2.99,2.68H8.255a5.307,5.307,0,0,1-3.6-1.39,4.935,4.935,0,0,1-1.6-3.41A5.043,5.043,0,0,1,8.1,9.63a5.109,5.109,0,0,1,4.09,2.09,5.932,5.932,0,0,1,.4.65,4.974,4.974,0,0,1,.43,1.21A.64.64,0,0,0,13.735,14.04Zm-.92-3.73a2.106,2.106,0,0,1,4.133-.578,2.114,2.114,0,0,1-2.033,2.688A2.241,2.241,0,0,1,12.815,10.31Zm4.12,3.64a3.9,3.9,0,0,0-1.08-.67,3.11,3.11,0,1,0-4.01-3.34,6.475,6.475,0,0,0-1.09-.69l.06-.03a.978.978,0,0,0,.44-1.07l-.64-2.1,2.17.58a.981.981,0,0,0,1.07-.44l1.03-1.93,1.12,1.92a.952.952,0,0,0,1.08.45L19.175,6l-.57,2.14a.922.922,0,0,0,.44,1.09l1.92,1.04-1.92,1.11a.941.941,0,0,0-.45,1.08l.63,2.09Z"
/>
</g>
</svg>
);
}import { CiCloudSun } from "react-icons/ci";
export function Example() {
return <CiCloudSun className="size-5" />;
}<svg
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Cloud_Sun">
<path
d="M21.465,9.47l-1.9-1.05.58-2.16a.968.968,0,0,0-.25-.93.957.957,0,0,0-.93-.24l-2.09.6-1.13-1.94a.988.988,0,0,0-.83-.47.967.967,0,0,0-.82.48l-1.06,1.91-2.16-.58a.951.951,0,0,0-.92.24.962.962,0,0,0-.25.93l.6,2.1-.77.44A6.3,6.3,0,0,0,8.1,8.63a6.039,6.039,0,0,0-6.04,6.03c0,.1.01.2.01.3a6.115,6.115,0,0,0,6.19,5.76h5.98a3.952,3.952,0,0,0,3.99-3.62,3.876,3.876,0,0,0-.35-1.88l1.1.3a1.007,1.007,0,0,0,.25.03.907.907,0,0,0,.67-.28.95.95,0,0,0,.25-.92l-.6-2.1,1.93-1.12a.956.956,0,0,0,.47-.83A.945.945,0,0,0,21.465,9.47Zm-7.73,4.57a2.873,2.873,0,0,1,3.49,3,2.947,2.947,0,0,1-2.99,2.68H8.255a5.307,5.307,0,0,1-3.6-1.39,4.935,4.935,0,0,1-1.6-3.41A5.043,5.043,0,0,1,8.1,9.63a5.109,5.109,0,0,1,4.09,2.09,5.932,5.932,0,0,1,.4.65,4.974,4.974,0,0,1,.43,1.21A.64.64,0,0,0,13.735,14.04Zm-.92-3.73a2.106,2.106,0,0,1,4.133-.578,2.114,2.114,0,0,1-2.033,2.688A2.241,2.241,0,0,1,12.815,10.31Zm4.12,3.64a3.9,3.9,0,0,0-1.08-.67,3.11,3.11,0,1,0-4.01-3.34,6.475,6.475,0,0,0-1.09-.69l.06-.03a.978.978,0,0,0,.44-1.07l-.64-2.1,2.17.58a.981.981,0,0,0,1.07-.44l1.03-1.93,1.12,1.92a.952.952,0,0,0,1.08.45L19.175,6l-.57,2.14a.922.922,0,0,0,.44,1.09l1.92,1.04-1.92,1.11a.941.941,0,0,0-.45,1.08l.63,2.09Z"
/>
</g>
</svg>"Cloud Sun" icon from Circum Icons (https://circumicons.com/), licensed under MPL-2.0 license.