Vela UI Docs
venizia.ai

image-x

ImageX, 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-x.

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

Installation

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

Usage

// components/icons/image-x.tsx
import ImageX from "@/components/icons/image-x"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ImageX({ size = 24, strokeWidth = 1, className, ref, ...props }: ImageXProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M6.35294 20.8823L15.8529 11.9412L20.3235 16.4118M6.35294 20.8823H17.5294C19.3812 20.8823 20.8824 19.3812 20.8824 17.5294V10.8235M6.35294 20.8823C4.50116 20.8823 3 19.3812 3 17.5294V6.35294C3 4.50116 4.50116 3 6.35294 3H13.6176M22 7.47059L19.7647 5.23529M19.7647 5.23529L17.5294 3M19.7647 5.23529L17.5294 7.47059M19.7647 5.23529L22 3M9.70588 8.02941C9.70588 8.9553 8.9553 9.70588 8.02941 9.70588C7.10352 9.70588 6.35294 8.9553 6.35294 8.02941C6.35294 7.10352 7.10352 6.35294 8.02941 6.35294C8.9553 6.35294 9.70588 7.10352 9.70588 8.02941Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
ImageX.displayName = "ImageX";

export default ImageX;