Vela UI Docs
venizia.ai

bar-group-02

BarGroup02, 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-bar-group-02.

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

Installation

pnpm dlx velaui add @velaui/icon-bar-group-02

Usage

// components/icons/bar-group-02.tsx
import BarGroup02 from "@/components/icons/bar-group-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function BarGroup02({ size = 24, strokeWidth = 1, className, ref, ...props }: BarGroup02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M14.9435 21V11.024C14.9435 10.4717 14.4958 10.024 13.9435 10.024H9.88528C9.333 10.024 8.88528 10.4717 8.88528 11.024V21M14.9435 21L14.9421 16.6803C14.9419 16.1279 15.3897 15.68 15.9421 15.68H20C20.5523 15.68 21 16.1277 21 16.68V20C21 20.5523 20.5523 21 20 21H14.9435ZM14.9435 21H8.88528M8.88528 21V4C8.88528 3.44772 8.43757 3 7.88528 3H4C3.44771 3 3 3.44772 3 4V20C3 20.5523 3.44771 21 4 21H8.88528Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
BarGroup02.displayName = "BarGroup02";

export default BarGroup02;