Vela UI Docs
venizia.ai

sun-02

Sun02, 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-02.

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

Installation

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

Usage

// components/icons/sun-02.tsx
import Sun02 from "@/components/icons/sun-02"

<Sun02 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 Sun02Props extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
}

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Sun02({ size = 24, strokeWidth = 1, className, ref, ...props }: Sun02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.0004 1.73726V0.977051M12.0004 23.0231V22.2629M22.2632 12.0001H23.0234M0.977356 12.0001H1.73757M19.258 4.74327L19.7955 4.20572M4.20522 19.7945L4.74277 19.257M19.258 19.2569L19.7955 19.7945M4.20522 4.20566L4.74277 4.74321M18.0672 11.9585C18.0672 15.3173 15.3444 18.0402 11.9856 18.0402C8.62673 18.0402 5.90387 15.3173 5.90387 11.9585C5.90387 8.5997 8.62673 5.87684 11.9856 5.87684C15.3444 5.87684 18.0672 8.5997 18.0672 11.9585Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Sun02.displayName = "Sun02";

export default Sun02;