Vela UI Docs
venizia.ai

image-04

Image04, 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-04.

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

Installation

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

Usage

// components/icons/image-04.tsx
import Image04 from "@/components/icons/image-04"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Image04({ size = 24, strokeWidth = 0, className, ref, ...props }: Image04Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.45895 17.2714C5.26368 17.4667 5.26368 17.7833 5.45895 17.9786C5.65421 18.1738 5.97079 18.1738 6.16605 17.9786L5.8125 17.625L5.45895 17.2714ZM8.625 14.8125L8.97855 14.4589C8.78329 14.2637 8.46671 14.2637 8.27145 14.4589L8.625 14.8125ZM10.875 17.0625L10.5214 17.4161C10.7167 17.6113 11.0333 17.6113 11.2286 17.4161L10.875 17.0625ZM15.9375 12L16.2911 11.6464C16.0958 11.4512 15.7792 11.4512 15.5839 11.6464L15.9375 12ZM19.5214 16.2911C19.7167 16.4863 20.0333 16.4863 20.2286 16.2911C20.4238 16.0958 20.4238 15.7792 20.2286 15.5839L19.875 15.9375L19.5214 16.2911ZM5.8125 17.625L6.16605 17.9786L8.97855 15.1661L8.625 14.8125L8.27145 14.4589L5.45895 17.2714L5.8125 17.625ZM8.625 14.8125L8.27145 15.1661L10.5214 17.4161L10.875 17.0625L11.2286 16.7089L8.97855 14.4589L8.625 14.8125ZM10.875 17.0625L11.2286 17.4161L16.2911 12.3536L15.9375 12L15.5839 11.6464L10.5214 16.7089L10.875 17.0625ZM15.9375 12L15.5839 12.3536L19.5214 16.2911L19.875 15.9375L20.2286 15.5839L16.2911 11.6464L15.9375 12ZM12 21V20.5C7.30558 20.5 3.5 16.6944 3.5 12H3H2.5C2.5 17.2467 6.7533 21.5 12 21.5V21ZM21 12H20.5C20.5 16.6944 16.6944 20.5 12 20.5V21V21.5C17.2467 21.5 21.5 17.2467 21.5 12H21ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.7533 17.2467 2.5 12 2.5V3ZM12 3V2.5C6.7533 2.5 2.5 6.7533 2.5 12H3H3.5C3.5 7.30558 7.30558 3.5 12 3.5V3ZM10.875 9.1875H10.375C10.375 9.84334 9.84334 10.375 9.1875 10.375V10.875V11.375C10.3956 11.375 11.375 10.3956 11.375 9.1875H10.875ZM9.1875 10.875V10.375C8.53166 10.375 8 9.84334 8 9.1875H7.5H7C7 10.3956 7.97938 11.375 9.1875 11.375V10.875ZM7.5 9.1875H8C8 8.53166 8.53166 8 9.1875 8V7.5V7C7.97938 7 7 7.97938 7 9.1875H7.5ZM9.1875 7.5V8C9.84334 8 10.375 8.53166 10.375 9.1875H10.875H11.375C11.375 7.97938 10.3956 7 9.1875 7V7.5Z" fill="currentColor"/>
    </svg>
  );
}
Image04.displayName = "Image04";

export default Image04;