Vela UI Docs
venizia.ai

help

Help, 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.

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

Installation

pnpm dlx velaui add @velaui/icon-help

Usage

// components/icons/help.tsx
import Help from "@/components/icons/help"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Help({ size = 24, strokeWidth = 1, className, ref, ...props }: HelpProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M14.3865 14.3865C13.0685 15.7045 10.9315 15.7045 9.61351 14.3865M14.3865 14.3865C15.7045 13.0685 15.7045 10.9315 14.3865 9.61351M14.3865 14.3865L17.9662 17.9662M9.61351 14.3865C8.2955 13.0685 8.2955 10.9315 9.61351 9.61351M9.61351 14.3865L6.03379 17.9662M9.61351 9.61351C10.9315 8.2955 13.0685 8.2955 14.3865 9.61351M9.61351 9.61351L6.03379 6.03379M14.3865 9.61351L17.9662 6.03379M18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C2.12132 14.8492 2.12132 9.15076 5.63604 5.63604C9.15076 2.12132 14.8492 2.12132 18.364 5.63604C21.8787 9.15076 21.8787 14.8492 18.364 18.364Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Help.displayName = "Help";

export default Help;