Vela UI Docsvenizia.ai

pointing

Pointing, 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-pointing.

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

Installation

pnpm dlx velaui add @velaui/icon-pointing

Usage

// components/icons/pointing.tsx
import Pointing from "@/components/icons/pointing"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Pointing({ size = 24, strokeWidth = 1, className, ref, ...props }: PointingProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 17 19"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <g filter="url(#filter0_d_2185_4180)">
      <path d="M4.20461 12.396C3.92454 12.036 3.57446 11.3058 2.96432 10.3956C2.61425 9.89546 1.75405 8.94525 1.49399 8.45514C1.30652 8.1573 1.25212 7.79464 1.34396 7.45491C1.50095 6.80897 2.11369 6.38048 2.77428 6.45468C3.2852 6.55731 3.75473 6.80773 4.12459 7.17484C4.38283 7.41807 4.62037 7.68238 4.83475 7.96502C4.99479 8.16507 5.0348 8.24509 5.21484 8.47514C5.39488 8.70519 5.51491 8.93525 5.42489 8.59517C5.35487 8.09505 5.23484 7.25486 5.0648 6.50469C4.93477 5.93456 4.90477 5.84454 4.78474 5.41444C4.66471 4.98435 4.5947 4.62426 4.46467 4.13415C4.34581 3.65261 4.25232 3.16516 4.1846 2.67382C4.05853 2.04538 4.15025 1.39274 4.44466 0.823397C4.79414 0.494691 5.30679 0.407934 5.74496 0.603346C6.18566 0.928757 6.51424 1.38318 6.68517 1.90364C6.9473 2.54418 7.12223 3.21701 7.20529 3.9041C7.36533 4.90433 7.6754 6.36466 7.6854 6.66473C7.6854 6.29464 7.61539 5.51447 7.6854 5.16439C7.75477 4.79943 8.00843 4.49655 8.35555 4.3642C8.65343 4.27281 8.96854 4.25226 9.27576 4.30419C9.58587 4.36902 9.86056 4.54739 10.0459 4.8043C10.2777 5.38783 10.4063 6.00718 10.426 6.63472C10.4528 6.08518 10.5469 5.541 10.7061 5.01435C10.8732 4.77885 11.1173 4.60905 11.3962 4.53424C11.7269 4.47378 12.0658 4.47378 12.3965 4.53424C12.6676 4.62489 12.9048 4.79582 13.0766 5.02435C13.2884 5.55482 13.4167 6.11494 13.4567 6.68473C13.4567 6.82476 13.5267 6.29464 13.7468 5.94456C13.8611 5.60508 14.1479 5.3524 14.4991 5.28169C14.8503 5.21098 15.2125 5.33299 15.4493 5.60176C15.6861 5.87053 15.7616 6.24523 15.6472 6.58471C15.6472 7.23486 15.6472 7.20485 15.6472 7.64495C15.6472 8.08505 15.6472 8.47514 15.6472 8.84522C15.6108 9.43054 15.5305 10.0123 15.4072 10.5856C15.2331 11.0929 14.9908 11.574 14.687 12.0159C14.2013 12.556 13.8 13.1664 13.4967 13.8264C13.4215 14.1542 13.3879 14.4903 13.3967 14.8266C13.3957 15.1373 13.4361 15.4467 13.5167 15.7468C13.1078 15.79 12.6954 15.79 12.2865 15.7468C11.8964 15.6868 11.4163 14.9066 11.2862 14.6666C11.2219 14.5377 11.0902 14.4562 10.9461 14.4562C10.8021 14.4562 10.6704 14.5377 10.6061 14.6666C10.386 15.0466 9.89591 15.7368 9.55583 15.7768C8.88567 15.8568 7.50536 15.7768 6.41511 15.7768C6.41511 15.7768 6.59515 14.7766 6.18506 14.4165C5.77497 14.0564 5.35487 13.6363 5.0448 13.3563L4.20461 12.396Z" fill="currentColor"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M4.20461 12.396C3.92454 12.036 3.57446 11.3058 2.96432 10.3956C2.61425 9.89546 1.75405 8.94525 1.49399 8.45514C1.30652 8.1573 1.25212 7.79464 1.34396 7.45491C1.50095 6.80897 2.11369 6.38048 2.77428 6.45468C3.2852 6.55731 3.75473 6.80773 4.12459 7.17484C4.38283 7.41807 4.62037 7.68238 4.83475 7.96502C4.99479 8.16507 5.0348 8.24509 5.21484 8.47514C5.39488 8.70519 5.51491 8.93525 5.42489 8.59517C5.35487 8.09505 5.23484 7.25486 5.0648 6.50469C4.93477 5.93456 4.90477 5.84454 4.78474 5.41444C4.66471 4.98435 4.5947 4.62426 4.46467 4.13415C4.34581 3.65261 4.25232 3.16516 4.1846 2.67382C4.05853 2.04538 4.15025 1.39274 4.44466 0.823397C4.79414 0.494691 5.30679 0.407934 5.74496 0.603346C6.18566 0.928757 6.51424 1.38318 6.68517 1.90364C6.9473 2.54418 7.12223 3.21701 7.20529 3.9041C7.36533 4.90433 7.6754 6.36466 7.6854 6.66473C7.6854 6.29464 7.61539 5.51447 7.6854 5.16439C7.75477 4.79943 8.00843 4.49655 8.35555 4.3642C8.65343 4.27281 8.96854 4.25226 9.27576 4.30419C9.58587 4.36902 9.86056 4.54739 10.0459 4.8043C10.2777 5.38783 10.4063 6.00718 10.426 6.63472C10.4528 6.08518 10.5469 5.541 10.7061 5.01435C10.8732 4.77885 11.1173 4.60905 11.3962 4.53424C11.7269 4.47378 12.0658 4.47378 12.3965 4.53424C12.6676 4.62489 12.9048 4.79582 13.0766 5.02435C13.2884 5.55482 13.4167 6.11494 13.4567 6.68473C13.4567 6.82476 13.5267 6.29464 13.7468 5.94456C13.8611 5.60508 14.1479 5.3524 14.4991 5.28169C14.8503 5.21098 15.2125 5.33299 15.4493 5.60176C15.6861 5.87053 15.7616 6.24523 15.6472 6.58471C15.6472 7.23486 15.6472 7.20485 15.6472 7.64495C15.6472 8.08505 15.6472 8.47514 15.6472 8.84522C15.6108 9.43054 15.5305 10.0123 15.4072 10.5856C15.2331 11.0929 14.9908 11.574 14.687 12.0159C14.2013 12.556 13.8001 13.1664 13.4967 13.8264C13.4215 14.1542 13.3879 14.4903 13.3967 14.8266C13.3957 15.1373 13.4361 15.4467 13.5167 15.7468C13.1078 15.79 12.6954 15.79 12.2865 15.7468C11.8964 15.6868 11.4163 14.9066 11.2862 14.6666C11.2219 14.5377 11.0902 14.4562 10.9461 14.4562C10.8021 14.4562 10.6704 14.5377 10.6061 14.6666C10.386 15.0466 9.89591 15.7368 9.55583 15.7768C8.88567 15.8568 7.50536 15.7768 6.41511 15.7768C6.41511 15.7768 6.59515 14.7766 6.18506 14.4165C5.77497 14.0564 5.35487 13.6363 5.0448 13.3563L4.20461 12.396Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12.6865 12.9421V9.48955C12.6865 9.28289 12.5186 9.11536 12.3115 9.11536C12.1043 9.11536 11.9364 9.28289 11.9364 9.48955V12.9421C11.9364 13.1488 12.1043 13.3163 12.3115 13.3163C12.5186 13.3163 12.6865 13.1488 12.6865 12.9421Z" fill="currentColor"/>
      <path d="M10.7061 12.9409L10.6861 9.48652C10.6849 9.28035 10.516 9.11418 10.3088 9.11537C10.1017 9.11655 9.93473 9.28465 9.93593 9.49082L9.95593 12.9452C9.95712 13.1513 10.126 13.3175 10.3332 13.3163C10.5403 13.3151 10.7073 13.147 10.7061 12.9409Z" fill="currentColor"/>
      <path d="M7.93547 9.49444L7.95548 12.9416C7.95668 13.1498 8.12559 13.3175 8.33274 13.3163C8.53989 13.3151 8.70684 13.1454 8.70563 12.9372L8.68563 9.49004C8.68442 9.2819 8.51551 9.11415 8.30836 9.11537C8.10121 9.11658 7.93426 9.2863 7.93547 9.49444Z" fill="currentColor"/>
      </g>
      <defs>
      <filter id="filter0_d_2185_4180" x="-1.22217e-05" y="0" width="17" height="18.1127" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
      <feFlood floodOpacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="1"/>
      <feGaussianBlur stdDeviation="0.4"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2185_4180"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2185_4180" result="shape"/>
      </filter>
      </defs>
    </svg>
  );
}
Pointing.displayName = "Pointing";

export default Pointing;