Vela UI Docs
venizia.ai

lightning-filled

LightningFilled, 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-lightning-filled.

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

Installation

pnpm dlx velaui add @velaui/icon-lightning-filled

Usage

// components/icons/lightning-filled.tsx
import LightningFilled from "@/components/icons/lightning-filled"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function LightningFilled({ size = 24, strokeWidth = 1, className, ref, ...props }: LightningFilledProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.28899 13.6315L12.2782 2.64854C12.5467 2.22652 13.2 2.41675 13.2 2.91698V10.7C13.2 10.7552 13.2448 10.8 13.3 10.8H18.2397C18.6442 10.8 18.8812 11.2553 18.6493 11.5867L11.7096 21.5005C11.4293 21.901 10.8 21.7026 10.8 21.2138V14.5C10.8 14.4447 10.7552 14.4 10.7 14.4H5.71082C5.31628 14.4 5.07717 13.9644 5.28899 13.6315Z" stroke="currentColor"/>
    </svg>
  );
}
LightningFilled.displayName = "LightningFilled";

export default LightningFilled;