Vela UI Docs
venizia.ai

data-02

Data02, 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-data-02.

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

Installation

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

Usage

// components/icons/data-02.tsx
import Data02 from "@/components/icons/data-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Data02({ size = 24, strokeWidth = 1, className, ref, ...props }: Data02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M17.7602 12.0004C17.7602 13.0608 18.6198 13.9204 19.6802 13.9204C20.7406 13.9204 21.6002 13.0608 21.6002 12.0004C21.6002 10.94 20.7406 10.0804 19.6802 10.0804C18.6198 10.0804 17.7602 10.94 17.7602 12.0004ZM17.7602 12.0004H12.6002M17.7602 4.32039C17.7602 5.38078 18.6198 6.24039 19.6802 6.24039C20.7406 6.24039 21.6002 5.38078 21.6002 4.32039C21.6002 3.26 20.7406 2.40039 19.6802 2.40039C18.6198 2.40039 17.7602 3.26 17.7602 4.32039ZM17.7602 4.32039H6.59975M17.7602 19.6804C17.7602 20.7408 18.6198 21.6004 19.6802 21.6004C20.7406 21.6004 21.6002 20.7408 21.6002 19.6804C21.6002 18.62 20.7406 17.7604 19.6802 17.7604C18.6198 17.7604 17.7602 18.62 17.7602 19.6804ZM17.7602 19.6804H12.2402C11.71 19.6804 11.2802 19.2506 11.2802 18.7204V5.28039M6.23975 4.32039C6.23975 5.38078 5.38014 6.24039 4.31975 6.24039C3.25936 6.24039 2.39975 5.38078 2.39975 4.32039C2.39975 3.26 3.25936 2.40039 4.31975 2.40039C5.38014 2.40039 6.23975 3.26 6.23975 4.32039Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Data02.displayName = "Data02";

export default Data02;