Vela UI Docs
venizia.ai

help-square-contained

HelpSquareContained, 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-help-square-contained.

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

Installation

pnpm dlx velaui add @velaui/icon-help-square-contained

Usage

// components/icons/help-square-contained.tsx
import HelpSquareContained from "@/components/icons/help-square-contained"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function HelpSquareContained({ size = 24, strokeWidth = 1, className, ref, ...props }: HelpSquareContainedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12 16.4999V16.5395M9.75098 9.22996C9.75098 7.96386 10.7583 6.93748 12.001 6.93748C13.2436 6.93748 14.251 7.96386 14.251 9.22996C14.251 10.4961 13.2436 11.5224 12.001 11.5224C12.001 11.5224 12 12.2067 12 13.0508M21 6.37498L21 17.625C21 19.489 19.489 21 17.625 21H6.375C4.51104 21 3 19.489 3 17.625V6.37498C3 4.51103 4.51104 3 6.375 3H17.625C19.489 3 21 4.51103 21 6.37498Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
HelpSquareContained.displayName = "HelpSquareContained";

export default HelpSquareContained;