Vela UI Docs
venizia.ai

image-focus

ImageFocus, 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-focus.

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

Installation

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

Usage

// components/icons/image-focus.tsx
import ImageFocus from "@/components/icons/image-focus"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ImageFocus({ size = 24, strokeWidth = 1, className, ref, ...props }: ImageFocusProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9 3H5C3.89543 3 3 3.89543 3 5V9M9 21H5C3.89543 21 3 20.1046 3 19V15M15 3H19C20.1046 3 21 3.89543 21 5V9M21 15V19C21 20.1046 20.1046 21 19 21H15M9.75 15.375H14.25C14.8713 15.375 15.375 14.8713 15.375 14.25V9.75C15.375 9.12868 14.8713 8.625 14.25 8.625H9.75C9.12868 8.625 8.625 9.12868 8.625 9.75V14.25C8.625 14.8713 9.12868 15.375 9.75 15.375Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
ImageFocus.displayName = "ImageFocus";

export default ImageFocus;