cloud-sun
CloudSun, one of the 856 Vela UI icons, in the General group: a 24px grid drawn in currentColor, so it takes the colour of the text around it. It installs on its own as @velaui/icon-cloud-sun.
- 16px
- 20px
- 24px
- 32px
Installation
pnpm dlx velaui add @velaui/icon-cloud-sunnpx shadcn@latest add @velaui/icon-cloud-sunyarn dlx shadcn@latest add @velaui/icon-cloud-sunbunx --bun shadcn@latest add @velaui/icon-cloud-sunUsage
// components/icons/cloud-sun.tsx
import CloudSun from "@/components/icons/cloud-sun"
<CloudSun className="size-5 text-muted" />In use
In a button
In a sentence
Due Friday, or whenever the venue confirms.
In an input
As a badge
ScheduledIn an empty state
No events on this day yet.
Browse blocks
Source
import * as React from "react";
export interface CloudSunProps extends React.SVGProps<SVGSVGElement> {
size?: number | string;
}
/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CloudSun({ size = 24, strokeWidth = 0, className, ref, ...props }: CloudSunProps) {
return (
<svg
ref={ref}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
strokeWidth={strokeWidth}
className={className}
{...props}
>
<path d="M8.39196 10.9583L8.26748 11.4425C8.50943 11.5047 8.76014 11.3788 8.85473 11.1476L8.39196 10.9583ZM4.37979 10.7724C4.48825 11.0264 4.78204 11.1443 5.03599 11.0359C5.28994 10.9274 5.40788 10.6336 5.29943 10.3796L4.83961 10.576L4.37979 10.7724ZM6.73635 5.85138L6.53997 5.39156L6.73635 5.85138ZM6.04088 5.49598C6.14934 5.74993 6.44313 5.86787 6.69708 5.75941C6.95103 5.65096 7.06897 5.35716 6.96052 5.10321L6.5007 5.29959L6.04088 5.49598ZM6.25354 3.44786C6.14508 3.19391 5.85129 3.07597 5.59734 3.18442C5.34339 3.29288 5.22544 3.58668 5.3339 3.84063L5.79372 3.64424L6.25354 3.44786ZM9.48055 5.07545C9.37767 5.33171 9.50201 5.62285 9.75828 5.72573C10.0145 5.82861 10.3057 5.70427 10.4086 5.448L9.94455 5.26173L9.48055 5.07545ZM11.0792 3.77759C11.182 3.52132 11.0577 3.23018 10.8014 3.1273C10.5452 3.02443 10.254 3.14877 10.1512 3.40503L10.6152 3.59131L11.0792 3.77759ZM2.60787 6.62666C2.35161 6.52378 2.06046 6.64812 1.95759 6.90438C1.85471 7.16065 1.97905 7.45179 2.23531 7.55467L2.42159 7.09066L2.60787 6.62666ZM3.90573 8.22527C4.16199 8.32815 4.45313 8.2038 4.55601 7.94754C4.65889 7.69128 4.53455 7.40014 4.27829 7.29726L4.09201 7.76126L3.90573 8.22527ZM10.4332 7.06341C10.6201 7.2667 10.9364 7.28 11.1397 7.09311C11.343 6.90622 11.3563 6.58992 11.1694 6.38663L10.8013 6.72502L10.4332 7.06341ZM21.6 13.5518H21.1C21.1 17.0625 18.2542 19.9089 14.7429 19.9089V20.4089V20.9089C18.8065 20.9089 22.1 17.6147 22.1 13.5518H21.6ZM14.7429 6.69464V7.19464C18.2542 7.19464 21.1 10.0411 21.1 13.5518H21.6H22.1C22.1 9.48884 18.8065 6.19464 14.7429 6.19464V6.69464ZM8.39196 10.9583L8.85473 11.1476C9.80373 8.82787 12.0841 7.19464 14.7429 7.19464V6.69464V6.19464C11.6641 6.19464 9.02662 8.0864 7.92919 10.7689L8.39196 10.9583ZM7.19999 10.8089V11.3089C7.57064 11.3089 7.92792 11.3552 8.26748 11.4425L8.39196 10.9583L8.51643 10.474C8.09528 10.3657 7.65435 10.3089 7.19999 10.3089V10.8089ZM2.39999 15.6089H2.89999C2.89999 13.2339 4.8244 11.3089 7.19999 11.3089V10.8089V10.3089C4.27202 10.3089 1.89999 12.6817 1.89999 15.6089H2.39999ZM7.19999 20.4089V19.9089C4.8244 19.9089 2.89999 17.9839 2.89999 15.6089H2.39999H1.89999C1.89999 18.5361 4.27202 20.9089 7.19999 20.9089V20.4089ZM14.7429 20.4089V19.9089H7.19999V20.4089V20.9089H14.7429V20.4089ZM4.83961 10.576L5.29943 10.3796C4.62698 8.80515 5.35824 6.98364 6.93274 6.3112L6.73635 5.85138L6.53997 5.39156C4.45757 6.28092 3.49042 8.69001 4.37979 10.7724L4.83961 10.576ZM6.5007 5.29959L6.96052 5.10321L6.25354 3.44786L5.79372 3.64424L5.3339 3.84063L6.04088 5.49598L6.5007 5.29959ZM9.94455 5.26173L10.4086 5.448L11.0792 3.77759L10.6152 3.59131L10.1512 3.40503L9.48055 5.07545L9.94455 5.26173ZM2.42159 7.09066L2.23531 7.55467L3.90573 8.22527L4.09201 7.76126L4.27829 7.29726L2.60787 6.62666L2.42159 7.09066ZM6.73635 5.85138L6.93274 6.3112C8.17331 5.78137 9.56846 6.12275 10.4332 7.06341L10.8013 6.72502L11.1694 6.38663C10.0268 5.14376 8.1824 4.6901 6.53997 5.39156L6.73635 5.85138Z" fill="currentColor"/>
</svg>
);
}
CloudSun.displayName = "CloudSun";
export default CloudSun;