Vela UI Docs
venizia.ai

data-01

Data01, 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-01.

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

Installation

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

Usage

// components/icons/data-01.tsx
import Data01 from "@/components/icons/data-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Data01({ size = 24, strokeWidth = 1, className, ref, ...props }: Data01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M6.23999 12.0004C6.23999 13.0608 5.38038 13.9204 4.31999 13.9204C3.25961 13.9204 2.39999 13.0608 2.39999 12.0004C2.39999 10.94 3.25961 10.0804 4.31999 10.0804C5.38038 10.0804 6.23999 10.94 6.23999 12.0004ZM6.23999 12.0004H17.76M17.76 12.0004C17.76 13.0608 18.6196 13.9204 19.68 13.9204C20.7404 13.9204 21.6 13.0608 21.6 12.0004C21.6 10.94 20.7404 10.0804 19.68 10.0804C18.6196 10.0804 17.76 10.94 17.76 12.0004ZM17.76 4.32039C17.76 5.38078 18.6196 6.24039 19.68 6.24039C20.7404 6.24039 21.6 5.38078 21.6 4.32039C21.6 3.26 20.7404 2.40039 19.68 2.40039C18.6196 2.40039 17.76 3.26 17.76 4.32039ZM17.76 4.32039H12.24C11.7098 4.32039 11.28 4.7502 11.28 5.28039V18.7204C11.28 19.2506 11.7098 19.6804 12.24 19.6804H17.76M17.76 19.6804C17.76 20.7408 18.6196 21.6004 19.68 21.6004C20.7404 21.6004 21.6 20.7408 21.6 19.6804C21.6 18.62 20.7404 17.7604 19.68 17.7604C18.6196 17.7604 17.76 18.62 17.76 19.6804Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Data01.displayName = "Data01";

export default Data01;