Vela UI Docs
venizia.ai

grid-04-filled

Grid04Filled, 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-grid-04-filled.

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

Installation

pnpm dlx velaui add @velaui/icon-grid-04-filled

Usage

// components/icons/grid-04-filled.tsx
import Grid04Filled from "@/components/icons/grid-04-filled"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Grid04Filled({ size = 24, strokeWidth = 1, className, ref, ...props }: Grid04FilledProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M2.40002 3.60039C2.40002 2.93765 2.93728 2.40039 3.60002 2.40039H6.00002C6.66277 2.40039 7.20002 2.93765 7.20002 3.60039V6.00039C7.20002 6.66313 6.66277 7.20039 6.00002 7.20039H3.60002C2.93728 7.20039 2.40002 6.66313 2.40002 6.00039V3.60039Z" stroke="currentColor"/>
      <path d="M9.60002 3.60039C9.60002 2.93765 10.1373 2.40039 10.8 2.40039H13.2C13.8628 2.40039 14.4 2.93765 14.4 3.60039V6.00039C14.4 6.66313 13.8628 7.20039 13.2 7.20039H10.8C10.1373 7.20039 9.60002 6.66313 9.60002 6.00039V3.60039Z" stroke="currentColor"/>
      <path d="M16.8 3.60039C16.8 2.93765 17.3373 2.40039 18 2.40039H20.4C21.0628 2.40039 21.6 2.93765 21.6 3.60039V6.00039C21.6 6.66313 21.0628 7.20039 20.4 7.20039H18C17.3373 7.20039 16.8 6.66313 16.8 6.00039V3.60039Z" stroke="currentColor"/>
      <path d="M2.40002 10.8004C2.40002 10.1376 2.93728 9.60039 3.60002 9.60039H6.00002C6.66277 9.60039 7.20002 10.1376 7.20002 10.8004V13.2004C7.20002 13.8631 6.66277 14.4004 6.00002 14.4004H3.60002C2.93728 14.4004 2.40002 13.8631 2.40002 13.2004V10.8004Z" stroke="currentColor"/>
      <path d="M9.60002 10.8004C9.60002 10.1376 10.1373 9.60039 10.8 9.60039H13.2C13.8628 9.60039 14.4 10.1376 14.4 10.8004V13.2004C14.4 13.8631 13.8628 14.4004 13.2 14.4004H10.8C10.1373 14.4004 9.60002 13.8631 9.60002 13.2004V10.8004Z" stroke="currentColor"/>
      <path d="M16.8 10.8004C16.8 10.1376 17.3373 9.60039 18 9.60039H20.4C21.0628 9.60039 21.6 10.1376 21.6 10.8004V13.2004C21.6 13.8631 21.0628 14.4004 20.4 14.4004H18C17.3373 14.4004 16.8 13.8631 16.8 13.2004V10.8004Z" stroke="currentColor"/>
      <path d="M2.40002 18.0004C2.40002 17.3377 2.93728 16.8004 3.60002 16.8004H6.00002C6.66277 16.8004 7.20002 17.3377 7.20002 18.0004V20.4004C7.20002 21.0631 6.66277 21.6004 6.00002 21.6004H3.60002C2.93728 21.6004 2.40002 21.0631 2.40002 20.4004V18.0004Z" stroke="currentColor"/>
      <path d="M9.60002 18.0004C9.60002 17.3377 10.1373 16.8004 10.8 16.8004H13.2C13.8628 16.8004 14.4 17.3377 14.4 18.0004V20.4004C14.4 21.0631 13.8628 21.6004 13.2 21.6004H10.8C10.1373 21.6004 9.60002 21.0631 9.60002 20.4004V18.0004Z" stroke="currentColor"/>
      <path d="M16.8 18.0004C16.8 17.3377 17.3373 16.8004 18 16.8004H20.4C21.0628 16.8004 21.6 17.3377 21.6 18.0004V20.4004C21.6 21.0631 21.0628 21.6004 20.4 21.6004H18C17.3373 21.6004 16.8 21.0631 16.8 20.4004V18.0004Z" stroke="currentColor"/>
    </svg>
  );
}
Grid04Filled.displayName = "Grid04Filled";

export default Grid04Filled;