Vela UI Docs
venizia.ai

zoom-in

ZoomIn, 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-zoom-in.

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

Installation

pnpm dlx velaui add @velaui/icon-zoom-in

Usage

// components/icons/zoom-in.tsx
import ZoomIn from "@/components/icons/zoom-in"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ZoomIn({ size = 24, strokeWidth = 0, className, ref, ...props }: ZoomInProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M17.2745 16.6803C17.076 16.4882 16.7595 16.4935 16.5675 16.692C16.3755 16.8904 16.3807 17.207 16.5792 17.399L16.9268 17.0396L17.2745 16.6803ZM20.0523 20.759C20.2508 20.951 20.5673 20.9457 20.7593 20.7473C20.9513 20.5488 20.9461 20.2323 20.7476 20.0403L20.4 20.3996L20.0523 20.759ZM10.9 14.3996C10.9 14.6758 11.1238 14.8996 11.4 14.8996C11.6761 14.8996 11.9 14.6758 11.9 14.3996H11.4H10.9ZM11.9 8.39961C11.9 8.12347 11.6761 7.89961 11.4 7.89961C11.1238 7.89961 10.9 8.12347 10.9 8.39961H11.4H11.9ZM8.39998 10.8996C8.12383 10.8996 7.89998 11.1235 7.89998 11.3996C7.89998 11.6758 8.12383 11.8996 8.39998 11.8996V11.3996V10.8996ZM14.4 11.8996C14.6761 11.8996 14.9 11.6758 14.9 11.3996C14.9 11.1235 14.6761 10.8996 14.4 10.8996V11.3996V11.8996ZM19.28 11.4396H18.78C18.78 15.4934 15.4937 18.7796 11.44 18.7796V19.2796V19.7796C16.046 19.7796 19.78 16.0457 19.78 11.4396H19.28ZM11.44 19.2796V18.7796C7.38621 18.7796 4.09998 15.4934 4.09998 11.4396H3.59998H3.09998C3.09998 16.0457 6.83392 19.7796 11.44 19.7796V19.2796ZM3.59998 11.4396H4.09998C4.09998 7.38584 7.38621 4.09961 11.44 4.09961V3.59961V3.09961C6.83392 3.09961 3.09998 6.83355 3.09998 11.4396H3.59998ZM11.44 3.59961V4.09961C15.4937 4.09961 18.78 7.38584 18.78 11.4396H19.28H19.78C19.78 6.83355 16.046 3.09961 11.44 3.09961V3.59961ZM16.9268 17.0396L16.5792 17.399L20.0523 20.759L20.4 20.3996L20.7476 20.0403L17.2745 16.6803L16.9268 17.0396ZM11.4 14.3996H11.9V11.3996H11.4H10.9V14.3996H11.4ZM11.4 11.3996H11.9V8.39961H11.4H10.9V11.3996H11.4ZM8.39998 11.3996V11.8996H11.4V11.3996V10.8996H8.39998V11.3996ZM11.4 11.3996V11.8996H14.4V11.3996V10.8996H11.4V11.3996Z" fill="currentColor"/>
    </svg>
  );
}
ZoomIn.displayName = "ZoomIn";

export default ZoomIn;