Vela UI Docs
venizia.ai

image

Image, 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.

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

Installation

pnpm dlx velaui add @velaui/icon-image

Usage

// components/icons/image.tsx
import Image from "@/components/icons/image"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Image({ size = 24, strokeWidth = 0, className, ref, ...props }: ImageProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M8.68771 12.8273L8.36449 12.4458L8.36449 12.4458L8.68771 12.8273ZM8.73722 12.7799L8.38098 12.429L8.38059 12.4294L8.73722 12.7799ZM6.65437 14.5501L6.33114 14.1687L6.33114 14.1687L6.65437 14.5501ZM6.54298 14.6674L6.95339 14.953L6.95339 14.953L6.54298 14.6674ZM17.3367 12.8993L16.9905 13.26V13.26L17.3367 12.8993ZM15.6013 11.2333L15.2551 11.594L15.2551 11.594L15.6013 11.2333ZM14.9569 11.2287L14.6157 10.8632L14.6144 10.8644L14.9569 11.2287ZM11.7424 14.2498L12.0836 14.6154L12.0849 14.6142L11.7424 14.2498ZM11.0881 14.2355L10.7301 14.5846L10.7308 14.5853L11.0881 14.2355ZM11.0796 14.2269L10.7213 14.5756L10.7216 14.576L11.0796 14.2269ZM11.0337 14.1823L11.3611 13.8044L11.361 13.8043L11.0337 14.1823ZM9.46776 12.8259L9.79512 12.448L9.79512 12.448L9.46776 12.8259ZM9.42164 12.7811L9.78009 12.4326L9.77975 12.4322L9.42164 12.7811ZM9.41339 12.7727L9.7715 12.4237L9.77082 12.423L9.41339 12.7727ZM8.74612 12.7708L8.39059 12.4193L8.38988 12.42L8.74612 12.7708ZM16.0496 6.93731V6.43731C15.7734 6.43731 15.5496 6.66117 15.5496 6.93731H16.0496ZM16.3713 6.93731H16.8713C16.8713 6.66117 16.6474 6.43731 16.3713 6.43731V6.93731ZM16.3713 7.20977V7.70977C16.6474 7.70977 16.8713 7.48592 16.8713 7.20977H16.3713ZM16.0496 7.20977H15.5496C15.5496 7.48592 15.7734 7.70977 16.0496 7.70977V7.20977ZM3 6.375H2.5V17.625H3H3.5V6.375H3ZM6.375 21V21.5H17.625V21V20.5H6.375V21ZM21 17.625H21.5V6.375H21H20.5V17.625H21ZM17.625 3V2.5H6.375V3V3.5H17.625V3ZM21 6.375H21.5C21.5 4.2349 19.7651 2.5 17.625 2.5V3V3.5C19.2128 3.5 20.5 4.78718 20.5 6.375H21ZM17.625 21V21.5C19.7651 21.5 21.5 19.7651 21.5 17.625H21H20.5C20.5 19.2128 19.2128 20.5 17.625 20.5V21ZM3 17.625H2.5C2.5 19.7651 4.2349 21.5 6.375 21.5V21V20.5C4.78718 20.5 3.5 19.2128 3.5 17.625H3ZM3 6.375H3.5C3.5 4.78718 4.78718 3.5 6.375 3.5V3V2.5C4.2349 2.5 2.5 4.2349 2.5 6.375H3ZM8.68771 12.8273L9.01093 13.2088C9.04869 13.1768 9.08053 13.1439 9.09386 13.1303L8.73722 12.7799L8.38059 12.4294C8.37642 12.4337 8.37341 12.4367 8.37054 12.4396C8.36779 12.4424 8.36587 12.4443 8.36443 12.4457C8.36145 12.4486 8.36183 12.4481 8.36449 12.4458L8.68771 12.8273ZM6.65437 14.5501L6.97759 14.9316L9.01094 13.2088L8.68771 12.8273L8.36449 12.4458L6.33114 14.1687L6.65437 14.5501ZM6.54298 14.6674L6.95339 14.953C6.95042 14.9573 6.94966 14.9575 6.95359 14.9535C6.95768 14.9492 6.96493 14.9424 6.9776 14.9316L6.65437 14.5501L6.33114 14.1687C6.27548 14.2158 6.1992 14.2861 6.13258 14.3818L6.54298 14.6674ZM6.375 15.2029H6.875C6.875 15.1133 6.90253 15.0261 6.95339 14.953L6.54298 14.6674L6.13258 14.3818C5.96545 14.622 5.875 14.9084 5.875 15.2029H6.375ZM6.375 17.1563H6.875V15.2029H6.375H5.875V17.1563H6.375ZM6.84375 17.625V17.125C6.86101 17.125 6.875 17.139 6.875 17.1563H6.375H5.875C5.875 17.6913 6.30873 18.125 6.84375 18.125V17.625ZM17.1562 17.625V17.125H6.84375V17.625V18.125H17.1562V17.625ZM17.625 17.1563H17.125C17.125 17.139 17.139 17.125 17.1562 17.125V17.625V18.125C17.6913 18.125 18.125 17.6913 18.125 17.1563H17.625ZM17.625 13.5756H17.125V17.1563H17.625H18.125V13.5756H17.625ZM17.3367 12.8993L16.9905 13.26C17.0764 13.3425 17.125 13.4564 17.125 13.5756H17.625H18.125C18.125 13.1841 17.9654 12.8097 17.683 12.5386L17.3367 12.8993ZM15.6013 11.2333L15.2551 11.594L16.9905 13.26L17.3367 12.8993L17.683 12.5386L15.9476 10.8726L15.6013 11.2333ZM14.9569 11.2287L15.298 11.5943C15.2859 11.6056 15.267 11.6055 15.2551 11.594L15.6013 11.2333L15.9476 10.8726C15.5765 10.5164 14.9918 10.5122 14.6157 10.8632L14.9569 11.2287ZM11.7424 14.2498L12.0849 14.6142L15.2993 11.5931L14.9569 11.2287L14.6144 10.8644L11.4 13.8855L11.7424 14.2498ZM11.0881 14.2355L10.7308 14.5853C11.0953 14.9576 11.696 14.9771 12.0836 14.6154L11.7424 14.2498L11.4013 13.8843C11.4073 13.8787 11.4163 13.8757 11.4235 13.8759C11.4301 13.8761 11.4387 13.879 11.4453 13.8857L11.0881 14.2355ZM11.0796 14.2269L10.7216 14.576L10.7301 14.5846L11.0881 14.2355L11.446 13.8865L11.4376 13.8778L11.0796 14.2269ZM11.0337 14.1823L10.7063 14.5602C10.7039 14.5581 10.7035 14.5576 10.7063 14.5603C10.7076 14.5617 10.7094 14.5634 10.712 14.566C10.7146 14.5687 10.7174 14.5716 10.7213 14.5756L11.0796 14.2269L11.4379 13.8782C11.4256 13.8655 11.396 13.8346 11.3611 13.8044L11.0337 14.1823ZM9.46776 12.8259L9.14041 13.2039L10.7063 14.5602L11.0337 14.1823L11.361 13.8043L9.79512 12.448L9.46776 12.8259ZM9.42164 12.7811L9.0632 13.1297C9.07564 13.1425 9.10534 13.1735 9.14041 13.2039L9.46776 12.8259L9.79512 12.448C9.79759 12.4501 9.79794 12.4506 9.79516 12.4479C9.79382 12.4466 9.79202 12.4448 9.78946 12.4422C9.78679 12.4394 9.78398 12.4366 9.78009 12.4326L9.42164 12.7811ZM9.41339 12.7727L9.05529 13.1216L9.06354 13.1301L9.42164 12.7811L9.77975 12.4322L9.7715 12.4237L9.41339 12.7727ZM8.74612 12.7708L9.10165 13.1224C9.09463 13.1295 9.0853 13.1323 9.07879 13.1323C9.07223 13.1323 9.06289 13.1294 9.05596 13.1223L9.41339 12.7727L9.77082 12.423C9.39287 12.0367 8.77014 12.0354 8.39059 12.4193L8.74612 12.7708ZM8.73722 12.7799L9.09346 13.1307L9.10236 13.1217L8.74612 12.7708L8.38988 12.42L8.38098 12.429L8.73722 12.7799ZM16.0496 6.93731V7.43731H16.3713V6.93731V6.43731H16.0496V6.93731ZM16.3713 6.93731H15.8713V7.20977H16.3713H16.8713V6.93731H16.3713ZM16.3713 7.20977V6.70977H16.0496V7.20977V7.70977H16.3713V7.20977ZM16.0496 7.20977H16.5496V6.93731H16.0496H15.5496V7.20977H16.0496Z" fill="currentColor"/>
    </svg>
  );
}
Image.displayName = "Image";

export default Image;