Vela UI Docs
venizia.ai

image-add

ImageAdd, 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-image-add.

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

Installation

pnpm dlx velaui add @velaui/icon-image-add

Usage

// components/icons/image-add.tsx
import ImageAdd from "@/components/icons/image-add"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ImageAdd({ size = 24, strokeWidth = 1, className, ref, ...props }: ImageAddProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M6.19732 20.9343L15.2559 12.4086L19.5187 16.6714M6.19732 20.9343H16.8545C18.6202 20.9343 20.0516 19.5029 20.0516 17.7371V12.4086M6.19732 20.9343C4.43159 20.9343 3.00018 19.5029 3.00018 17.7371V7.08001C3.00018 5.31427 4.43159 3.88287 6.19732 3.88287H13.1245M18.9859 9.02859L18.9859 6.01429M18.9859 6.01429L18.9859 3M18.9859 6.01429L15.9716 6.01429M18.9859 6.01429L22.0002 6.01429M9.39447 8.67858C9.39447 9.56144 8.67876 10.2771 7.7959 10.2771C6.91303 10.2771 6.19732 9.56144 6.19732 8.67858C6.19732 7.79571 6.91303 7.08001 7.7959 7.08001C8.67876 7.08001 9.39447 7.79571 9.39447 8.67858Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
ImageAdd.displayName = "ImageAdd";

export default ImageAdd;