Vela UI Docs
venizia.ai

compare

Compare, 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-compare.

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

Installation

pnpm dlx velaui add @velaui/icon-compare

Usage

// components/icons/compare.tsx
import Compare from "@/components/icons/compare"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Compare({ size = 24, strokeWidth = 0, className, ref, ...props }: CompareProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.7 9.7C5.42386 9.7 5.2 9.92386 5.2 10.2C5.2 10.4761 5.42386 10.7 5.7 10.7V10.2V9.7ZM9.75 10.2L10.1036 10.5536C10.2988 10.3583 10.2988 10.0417 10.1036 9.84645L9.75 10.2ZM7.59645 11.6464C7.40118 11.8417 7.40118 12.1583 7.59645 12.3536C7.79171 12.5488 8.10829 12.5488 8.30355 12.3536L7.95 12L7.59645 11.6464ZM8.30355 8.04645C8.10829 7.85118 7.79171 7.85118 7.59645 8.04645C7.40118 8.24171 7.40118 8.55829 7.59645 8.75355L7.95 8.4L8.30355 8.04645ZM17.85 14.3C18.1261 14.3 18.35 14.0761 18.35 13.8C18.35 13.5239 18.1261 13.3 17.85 13.3V13.8V14.3ZM13.8 13.8L13.4464 13.4464C13.2512 13.6417 13.2512 13.9583 13.4464 14.1536L13.8 13.8ZM15.9536 12.3536C16.1488 12.1583 16.1488 11.8417 15.9536 11.6464C15.7583 11.4512 15.4417 11.4512 15.2464 11.6464L15.6 12L15.9536 12.3536ZM15.2464 15.9536C15.4417 16.1488 15.7583 16.1488 15.9536 15.9536C16.1488 15.7583 16.1488 15.4417 15.9536 15.2464L15.6 15.6L15.2464 15.9536ZM4.8 3V3.5H11.1V3V2.5H4.8V3ZM11.55 17.4V16.9H4.8V17.4V17.9H11.55V17.4ZM3 15.6H3.5V4.8H3H2.5V15.6H3ZM12.9 4.8H12.4V7.5H12.9H13.4V4.8H12.9ZM4.8 17.4V16.9C4.08203 16.9 3.5 16.318 3.5 15.6H3H2.5C2.5 16.8703 3.52974 17.9 4.8 17.9V17.4ZM11.1 3V3.5C11.818 3.5 12.4 4.08203 12.4 4.8H12.9H13.4C13.4 3.52975 12.3703 2.5 11.1 2.5V3ZM4.8 3V2.5C3.52975 2.5 2.5 3.52975 2.5 4.8H3H3.5C3.5 4.08203 4.08203 3.5 4.8 3.5V3ZM12.9 6.6V7.1H19.2V6.6V6.1H12.9V6.6ZM21 8.4H20.5V19.2H21H21.5V8.4H21ZM19.2 21V20.5H12.9V21V21.5H19.2V21ZM11.1 19.2H11.6V8.4H11.1H10.6V19.2H11.1ZM12.9 21V20.5C12.182 20.5 11.6 19.918 11.6 19.2H11.1H10.6C10.6 20.4703 11.6297 21.5 12.9 21.5V21ZM21 19.2H20.5C20.5 19.918 19.918 20.5 19.2 20.5V21V21.5C20.4703 21.5 21.5 20.4703 21.5 19.2H21ZM19.2 6.6V7.1C19.918 7.1 20.5 7.68203 20.5 8.4H21H21.5C21.5 7.12975 20.4703 6.1 19.2 6.1V6.6ZM12.9 6.6V6.1C11.6297 6.1 10.6 7.12975 10.6 8.4H11.1H11.6C11.6 7.68203 12.182 7.1 12.9 7.1V6.6ZM5.7 10.2V10.7H9.75V10.2V9.7H5.7V10.2ZM7.95 12L8.30355 12.3536L10.1036 10.5536L9.75 10.2L9.39645 9.84645L7.59645 11.6464L7.95 12ZM9.75 10.2L10.1036 9.84645L8.30355 8.04645L7.95 8.4L7.59645 8.75355L9.39645 10.5536L9.75 10.2ZM17.85 13.8V13.3H13.8V13.8V14.3H17.85V13.8ZM15.6 12L15.2464 11.6464L13.4464 13.4464L13.8 13.8L14.1536 14.1536L15.9536 12.3536L15.6 12ZM13.8 13.8L13.4464 14.1536L15.2464 15.9536L15.6 15.6L15.9536 15.2464L14.1536 13.4464L13.8 13.8Z" fill="currentColor"/>
    </svg>
  );
}
Compare.displayName = "Compare";

export default Compare;