Vela UI Docs
venizia.ai

image-indent-right

ImageIndentRight, 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-indent-right.

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

Installation

pnpm dlx velaui add @velaui/icon-image-indent-right

Usage

// components/icons/image-indent-right.tsx
import ImageIndentRight from "@/components/icons/image-indent-right"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ImageIndentRight({ size = 24, strokeWidth = 1, className, ref, ...props }: ImageIndentRightProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M21.6 19.2002L2.39998 19.2002M10.8 14.0002L2.39998 14.0002M10.8 8.80019L2.39998 8.80019M21.6 3.6002L2.39998 3.60019M20.4 8.40019L16.8 8.40019C16.1372 8.40019 15.6 8.93745 15.6 9.60019L15.6 13.2002C15.6 13.8629 16.1372 14.4002 16.8 14.4002L20.4 14.4002C21.0627 14.4002 21.6 13.8629 21.6 13.2002L21.6 9.60019C21.6 8.93745 21.0627 8.40019 20.4 8.40019Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
ImageIndentRight.displayName = "ImageIndentRight";

export default ImageIndentRight;