Vela UI Docs
venizia.ai

sun-01

Sun01, 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-sun-01.

  • 16px
  • 20px
  • 24px
  • 32px

Installation

pnpm dlx velaui add @velaui/icon-sun-01

Usage

// components/icons/sun-01.tsx
import Sun01 from "@/components/icons/sun-01"

<Sun01 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

    Scheduled

  • In an empty state

    No events on this day yet.

    Browse blocks

Source

import * as React from "react";

export interface Sun01Props extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Sun01({ size = 24, strokeWidth = 0, className, ref, ...props }: Sun01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M18.8567 19.7C19.1328 19.7 19.3567 19.4762 19.3567 19.2C19.3567 18.9239 19.1328 18.7 18.8567 18.7V19.2V19.7ZM5.14275 18.7C4.86661 18.7 4.64275 18.9239 4.64275 19.2C4.64275 19.4762 4.86661 19.7 5.14275 19.7V19.2V18.7ZM2.39996 14.4018C2.12382 14.4018 1.89996 14.6256 1.89996 14.9018C1.89996 15.1779 2.12382 15.4018 2.39996 15.4018V14.9018V14.4018ZM21.5995 15.4018C21.8756 15.4018 22.0995 15.1779 22.0995 14.9018C22.0995 14.6256 21.8756 14.4018 21.5995 14.4018V14.9018V15.4018ZM4.52255 11.6322C4.75232 11.7854 5.06275 11.7233 5.21593 11.4935C5.36911 11.2637 5.30702 10.9533 5.07726 10.8001L4.7999 11.2162L4.52255 11.6322ZM3.02016 9.42874C2.7904 9.27556 2.47996 9.33765 2.32679 9.56741C2.17361 9.79718 2.2357 10.1076 2.46546 10.2608L2.74281 9.84476L3.02016 9.42874ZM8.5516 7.23788C8.67399 7.48541 8.97388 7.58686 9.22142 7.46447C9.46895 7.34207 9.5704 7.04219 9.44801 6.79465L8.9998 7.01626L8.5516 7.23788ZM8.35221 4.57844C8.22982 4.3309 7.92993 4.22945 7.68239 4.35185C7.43486 4.47424 7.33341 4.77413 7.4558 5.02167L7.90401 4.80005L8.35221 4.57844ZM14.2067 6.57955C14.0535 6.80931 14.1156 7.11975 14.3454 7.27292C14.5752 7.4261 14.8856 7.36401 15.0388 7.13425L14.6227 6.8569L14.2067 6.57955ZM16.4102 5.07715C16.5633 4.84739 16.5012 4.53696 16.2715 4.38378C16.0417 4.2306 15.7313 4.29269 15.5781 4.52245L15.9941 4.7998L16.4102 5.07715ZM21.5805 10.293C21.8281 10.1706 21.9295 9.87069 21.8071 9.62315C21.6847 9.37561 21.3848 9.27417 21.1373 9.39656L21.3589 9.84476L21.5805 10.293ZM18.9211 10.4924C18.6736 10.6148 18.5721 10.9146 18.6945 11.1622C18.8169 11.4097 19.1168 11.5112 19.3643 11.3888L19.1427 10.9406L18.9211 10.4924ZM18.8567 19.2V18.7H5.14275V19.2V19.7H18.8567V19.2ZM2.39996 14.9018V15.4018H21.5995V14.9018V14.4018H2.39996V14.9018ZM7.19985 14.9018H7.69985C7.69985 12.527 9.62497 10.6019 11.9997 10.6019V10.1019V9.6019C9.07268 9.6019 6.69985 11.9747 6.69985 14.9018H7.19985ZM11.9997 10.1019V10.6019C14.3745 10.6019 16.2996 12.527 16.2996 14.9018H16.7996H17.2996C17.2996 11.9747 14.9268 9.6019 11.9997 9.6019V10.1019ZM4.7999 11.2162L5.07726 10.8001L3.02016 9.42874L2.74281 9.84476L2.46546 10.2608L4.52255 11.6322L4.7999 11.2162ZM8.9998 7.01626L9.44801 6.79465L8.35221 4.57844L7.90401 4.80005L7.4558 5.02167L8.5516 7.23788L8.9998 7.01626ZM14.6227 6.8569L15.0388 7.13425L16.4102 5.07715L15.9941 4.7998L15.5781 4.52245L14.2067 6.57955L14.6227 6.8569ZM21.3589 9.84476L21.1373 9.39656L18.9211 10.4924L19.1427 10.9406L19.3643 11.3888L21.5805 10.293L21.3589 9.84476Z" fill="currentColor"/>
    </svg>
  );
}
Sun01.displayName = "Sun01";

export default Sun01;