Vela UI Docs
venizia.ai

umbrella

Umbrella, 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-umbrella.

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

Installation

pnpm dlx velaui add @velaui/icon-umbrella

Usage

// components/icons/umbrella.tsx
import Umbrella from "@/components/icons/umbrella"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Umbrella({ size = 24, strokeWidth = 1, className, ref, ...props }: UmbrellaProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.8727 12.675L10.4496 16.8719M17.2672 3.9126C15.2148 5.16484 11.0639 8.44022 10.8788 11.5238M18.2641 4.48815C18.2513 6.91791 17.5675 12.1951 14.935 13.8657M1.80005 19.1896L4.3335 18.075C5.88155 17.394 7.58722 17.1523 9.26352 17.3766L9.3411 17.387C11.0432 17.6147 12.6477 18.3137 13.9735 19.4052L16 21.0735M6.66626 9.09171L19.0792 16.2583C19.7812 16.6636 20.6789 16.4231 21.0843 15.721C23.3812 11.7427 22.0181 6.65554 18.0397 4.35863L17.4914 4.04204C13.513 1.74513 8.4259 3.10822 6.12899 7.08658C5.72365 7.78864 5.9642 8.68637 6.66626 9.09171Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Umbrella.displayName = "Umbrella";

export default Umbrella;