Vela UI Docs
venizia.ai

calendar-06

Calendar06, 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-calendar-06.

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

Installation

pnpm dlx velaui add @velaui/icon-calendar-06

Usage

// components/icons/calendar-06.tsx
import Calendar06 from "@/components/icons/calendar-06"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Calendar06({ size = 24, strokeWidth = 1, className, ref, ...props }: Calendar06Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M7.33062 7.61459H17.4494M6.87448 2.00022V3.83182M17.4992 3.83162C19.2595 3.83162 20.6866 5.28327 20.6867 7.07401L20.6872 17.8824C20.6873 19.6733 19.2602 21.1251 17.4998 21.1251H6.87512C5.11483 21.1251 3.6878 19.6735 3.68772 17.8827L3.68722 7.07432C3.68714 5.28345 5.11407 3.83182 6.87448 3.83182L17.4992 3.83162ZM17.4992 2.00012V3.83162M10.0627 17.3422V10.8571L7.93774 12.4783M15.9063 17.3422V10.8571L13.7813 12.4783" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Calendar06.displayName = "Calendar06";

export default Calendar06;