Vela UI Docs
venizia.ai

add-square-04

AddSquare04, 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-add-square-04.

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

Installation

pnpm dlx velaui add @velaui/icon-add-square-04

Usage

// components/icons/add-square-04.tsx
import AddSquare04 from "@/components/icons/add-square-04"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function AddSquare04({ size = 24, strokeWidth = 0, className, ref, ...props }: AddSquare04Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.5 7.5C12.5 7.22386 12.2761 7 12 7C11.7239 7 11.5 7.22386 11.5 7.5H12H12.5ZM11.5 16.5C11.5 16.7761 11.7239 17 12 17C12.2761 17 12.5 16.7761 12.5 16.5H12H11.5ZM16.5 12.5C16.7761 12.5 17 12.2761 17 12C17 11.7239 16.7761 11.5 16.5 11.5V12V12.5ZM7.5 11.5C7.22386 11.5 7 11.7239 7 12C7 12.2761 7.22386 12.5 7.5 12.5V12V11.5ZM21 12H20.5C20.5 16.6944 16.6944 20.5 12 20.5V21V21.5C17.2467 21.5 21.5 17.2467 21.5 12H21ZM12 21V20.5C7.30558 20.5 3.5 16.6944 3.5 12H3H2.5C2.5 17.2467 6.75329 21.5 12 21.5V21ZM3 12H3.5C3.5 7.30558 7.30558 3.5 12 3.5V3V2.5C6.75329 2.5 2.5 6.75329 2.5 12H3ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.75329 17.2467 2.5 12 2.5V3ZM12 7.5H11.5L11.5 12H12H12.5L12.5 7.5H12ZM12 12H11.5V16.5H12H12.5V12H12ZM16.5 12V11.5H12V12V12.5H16.5V12ZM12 12V11.5H7.5V12V12.5H12V12Z" fill="currentColor"/>
    </svg>
  );
}
AddSquare04.displayName = "AddSquare04";

export default AddSquare04;