Vela UI Docs
venizia.ai

signal

Signal, 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-signal.

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

Installation

pnpm dlx velaui add @velaui/icon-signal

Usage

// components/icons/signal.tsx
import Signal from "@/components/icons/signal"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Signal({ size = 24, strokeWidth = 1, className, ref, ...props }: SignalProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11.9473 11.796H12M9.8198 7.85843C8.43635 8.62608 7.5 10.1017 7.5 11.796C7.5 13.4902 8.43635 14.9658 9.8198 15.7335M14.1802 7.85843C15.5637 8.62608 16.5 10.1017 16.5 11.796C16.5 13.4902 15.5637 14.9658 14.1802 15.7335M7.5 19.5919C4.80989 18.0358 3 15.1272 3 11.796C3 8.46469 4.80989 5.55614 7.5 4M16.5 19.5919C19.1901 18.0358 21 15.1272 21 11.796C21 8.46469 19.1901 5.55614 16.5 4" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Signal.displayName = "Signal";

export default Signal;