cursor-grabbed

CursorGrabbed, 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-cursor-grabbed.

16px
20px
24px
32px

Installation

pnpm dlx velaui add @velaui/icon-cursor-grabbed

npx shadcn@latest add @velaui/icon-cursor-grabbed

yarn dlx shadcn@latest add @velaui/icon-cursor-grabbed

bunx --bun shadcn@latest add @velaui/icon-cursor-grabbed

Usage

// components/icons/cursor-grabbed.tsx
import CursorGrabbed from "@/components/icons/cursor-grabbed"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CursorGrabbed({ size = 24, strokeWidth = 1, className, ref, ...props }: CursorGrabbedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 16 15"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <g filter="url(#filter0_d_2185_4200)">
      <path d="M4.01491 1.32771C4.51286 1.14097 5.4984 1.25509 5.75775 1.81529C6.0171 2.37549 6.17271 3.10167 6.18308 2.92531C6.16324 2.38928 6.20852 1.85282 6.31795 1.32771C6.43325 0.991394 6.69744 0.727203 7.03376 0.611896C7.34219 0.51435 7.66967 0.492993 7.98817 0.549652C8.31019 0.61594 8.59541 0.801147 8.78697 1.06835C9.02967 1.6733 9.16653 2.31547 9.19156 2.96681C9.21736 2.41102 9.31144 1.86052 9.47166 1.32771C9.64501 1.08345 9.89817 0.907339 10.1875 0.829751C10.5304 0.767045 10.8819 0.767045 11.2249 0.829751C11.5064 0.923178 11.7526 1.10057 11.9303 1.33808C12.1506 1.88806 12.2837 2.46911 12.3245 3.06017C12.3245 3.20541 12.3971 2.65558 12.6254 2.29249C12.8087 1.7482 13.3986 1.45559 13.9429 1.63893C14.4872 1.82227 14.7798 2.41214 14.5964 2.95643C14.5964 3.63075 14.5964 3.59962 14.5964 4.05608C14.5964 4.51254 14.5964 4.91713 14.5964 5.30097C14.5591 5.90808 14.4758 6.51149 14.3475 7.10605C14.1674 7.63234 13.9161 8.13148 13.6005 8.58954C13.0969 9.1498 12.6808 9.78282 12.366 10.4672C12.2892 10.8075 12.2544 11.1559 12.2623 11.5047C12.2612 11.8269 12.3031 12.1479 12.3868 12.4591C11.9626 12.5044 11.5349 12.5044 11.1108 12.4591C10.7062 12.3968 10.2082 11.5876 10.0734 11.3387C10.0066 11.205 9.87005 11.1205 9.72064 11.1205C9.57122 11.1205 9.43464 11.205 9.36792 11.3387C9.13969 11.7329 8.63136 12.4487 8.33051 12.4902C7.63545 12.5732 6.19346 12.4902 5.07306 12.4902C5.07306 12.4902 5.27017 11.4528 4.83446 11.0793C4.39875 10.7058 3.97341 10.2701 3.65181 9.97966L2.79077 9.02525C2.18357 8.46161 1.73923 7.74495 1.50439 6.95044C1.28653 5.97528 1.30728 5.50845 1.50439 5.11423C1.70542 4.7887 2.01935 4.54864 2.38618 4.43992C2.69094 4.38464 3.00466 4.40603 3.2991 4.50217C3.5027 4.58741 3.67867 4.72746 3.80742 4.90675C4.04603 5.22835 4.12902 5.38396 4.02528 5.03124C3.92154 4.67852 3.69331 4.41917 3.5792 3.99384C3.35704 3.49152 3.22366 2.95449 3.18498 2.40661C3.2275 1.91505 3.57071 1.50154 4.04603 1.3692" fill="currentColor"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M4.01491 1.32771C4.51286 1.14097 5.4984 1.25509 5.75775 1.81529C6.0171 2.37549 6.17271 3.10167 6.18308 2.92531C6.16324 2.38928 6.20852 1.85282 6.31795 1.32771C6.43325 0.991394 6.69744 0.727203 7.03376 0.611896C7.34219 0.51435 7.66967 0.492993 7.98817 0.549652C8.31019 0.61594 8.59541 0.801147 8.78697 1.06835C9.02967 1.6733 9.16653 2.31547 9.19156 2.96681C9.21736 2.41102 9.31144 1.86052 9.47166 1.32771C9.64501 1.08345 9.89817 0.907339 10.1875 0.829751C10.5304 0.767045 10.8819 0.767045 11.2249 0.829751C11.5064 0.923178 11.7526 1.10057 11.9303 1.33808C12.1506 1.88806 12.2837 2.46911 12.3245 3.06017C12.3245 3.20541 12.3971 2.65558 12.6254 2.29249C12.8087 1.7482 13.3986 1.45559 13.9429 1.63893C14.4872 1.82227 14.7798 2.41214 14.5964 2.95643C14.5964 3.63075 14.5964 3.59962 14.5964 4.05608C14.5964 4.51254 14.5964 4.91713 14.5964 5.30097C14.5591 5.90808 14.4758 6.51149 14.3475 7.10605C14.1674 7.63234 13.9161 8.13148 13.6005 8.58954C13.0969 9.1498 12.6808 9.78282 12.366 10.4672C12.2892 10.8075 12.2544 11.1559 12.2623 11.5047C12.2612 11.8269 12.3031 12.1479 12.3868 12.4591C11.9626 12.5044 11.5349 12.5044 11.1108 12.4591C10.7062 12.3968 10.2082 11.5876 10.0734 11.3387C10.0066 11.205 9.87005 11.1205 9.72064 11.1205C9.57122 11.1205 9.43464 11.205 9.36792 11.3387C9.13969 11.7329 8.63136 12.4487 8.33051 12.4902C7.63545 12.5732 6.19346 12.4902 5.07306 12.4902C5.07306 12.4902 5.27017 11.4528 4.83446 11.0793C4.39875 10.7058 3.97341 10.2701 3.65181 9.97966L2.79077 9.02525C2.18357 8.46161 1.73923 7.74495 1.50439 6.95044C1.28653 5.97528 1.30728 5.50845 1.50439 5.11423C1.70542 4.7887 2.01935 4.54864 2.38618 4.43992C2.69094 4.38464 3.00466 4.40603 3.2991 4.50217C3.5027 4.58741 3.67867 4.72746 3.80742 4.90675C4.04603 5.22835 4.12902 5.38396 4.02528 5.03124C3.92154 4.67852 3.69331 4.41917 3.5792 3.99384C3.35704 3.49152 3.22366 2.95449 3.18498 2.40661C3.20619 1.90786 3.53829 1.47614 4.01491 1.32771Z" stroke="currentColor" strokeLinejoin="round"/>
      <path d="M12.0548 9.29077V5.70987C12.0548 5.49553 11.8806 5.32177 11.6657 5.32177C11.4509 5.32177 11.2767 5.49553 11.2767 5.70987V9.29077C11.2767 9.50511 11.4509 9.67887 11.6657 9.67887C11.8806 9.67887 12.0548 9.50511 12.0548 9.29077Z" fill="currentColor"/>
      <path d="M10.0007 9.28945L9.97995 5.70672C9.97872 5.49289 9.80354 5.32054 9.58869 5.32177C9.37384 5.32301 9.20067 5.49735 9.20191 5.71118L9.22266 9.29392C9.2239 9.50775 9.39907 9.68009 9.61392 9.67886C9.82877 9.67763 10.0019 9.50329 10.0007 9.28945Z" fill="currentColor"/>
      <path d="M7.1271 5.71588L7.14785 9.28933C7.14911 9.50573 7.3243 9.68013 7.53915 9.67886C7.754 9.6776 7.92715 9.50115 7.92589 9.28475L7.90514 5.7113C7.90389 5.49491 7.7287 5.32051 7.51385 5.32177C7.299 5.32304 7.12585 5.49949 7.1271 5.71588Z" fill="currentColor"/>
      </g>
      <defs>
      <filter id="filter0_d_2185_4200" x="5.06422e-05" y="0" width="15.9999" height="14.9129" 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_4200"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2185_4200" result="shape"/>
      </filter>
      </defs>
    </svg>
  );
}
CursorGrabbed.displayName = "CursorGrabbed";

export default CursorGrabbed;