Vela UI Docs
venizia.ai

cursor-grab

CursorGrab, 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-grab.

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

Installation

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

Usage

// components/icons/cursor-grab.tsx
import CursorGrab from "@/components/icons/cursor-grab"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CursorGrab({ size = 24, strokeWidth = 1, className, ref, ...props }: CursorGrabProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 20 20"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <g clipPath="url(#clip0_4879_14261)">
      <g filter="url(#filter0_d_4879_14261)">
      <path d="M6.42444 10.3476C6.32444 9.97757 6.22444 9.49757 6.01444 8.79757C5.80444 8.09757 5.67444 7.93757 5.54444 7.56757C5.41444 7.19757 5.24444 6.84757 5.04444 6.38757C4.86125 5.91763 4.70761 5.43669 4.58444 4.94757C4.50121 4.53538 4.60362 4.10743 4.86444 3.77757C5.2233 3.4274 5.74112 3.29413 6.22444 3.42757C6.6031 3.59316 6.92351 3.86831 7.14444 4.21757C7.43948 4.68924 7.68097 5.19235 7.86444 5.71757C8.14618 6.4372 8.35067 7.18473 8.47444 7.94757L8.56444 8.39757C8.56444 8.39757 8.56444 7.27757 8.56444 7.23757C8.56444 6.23757 8.50444 5.41757 8.56444 4.29757C8.56444 4.16757 8.62444 3.70757 8.64444 3.57757C8.6703 3.14754 8.92656 2.76505 9.31444 2.57757C9.75973 2.37779 10.2692 2.37779 10.7144 2.57757C11.1131 2.75601 11.3791 3.14159 11.4044 3.57757C11.4044 3.68757 11.4944 4.57757 11.4944 4.68757C11.4944 5.68757 11.4944 6.32757 11.4944 6.85757C11.4944 7.08757 11.4944 8.48757 11.4944 8.32757C11.518 7.00803 11.6316 5.69164 11.8344 4.38757C11.9529 3.97901 12.2404 3.64059 12.6244 3.45757C13.0994 3.27051 13.6389 3.36301 14.0244 3.69757C14.3126 4.01386 14.4822 4.42027 14.5044 4.84757C14.5044 5.25757 14.5044 5.74757 14.5044 6.09757C14.5044 6.96757 14.5044 7.41757 14.5044 8.21757C14.5044 8.21757 14.5044 8.51757 14.5044 8.39757C14.5944 8.11757 14.6944 7.85757 14.7744 7.65757C14.8544 7.45757 15.0144 7.04757 15.1344 6.79757C15.2566 6.55924 15.3935 6.32878 15.5444 6.10757C15.7013 5.85331 15.9364 5.6568 16.2144 5.54757C16.4649 5.45075 16.7438 5.45873 16.9883 5.5697C17.2328 5.68067 17.4224 5.88532 17.5144 6.13757C17.574 6.50182 17.574 6.87332 17.5144 7.23757C17.4478 7.797 17.3306 8.34926 17.1644 8.88757C17.0344 9.33757 16.8944 10.1176 16.8244 10.4876C16.7544 10.8576 16.5944 11.8676 16.4644 12.3076C16.272 12.8325 16.006 13.3274 15.6744 13.7776C15.1893 14.3178 14.7881 14.928 14.4844 15.5876C14.4097 15.9155 14.3761 16.2514 14.3844 16.5876C14.3828 16.8982 14.4232 17.2077 14.5044 17.5076C14.0956 17.5512 13.6833 17.5512 13.2744 17.5076C12.8844 17.4476 12.4044 16.6676 12.2744 16.4276C12.2101 16.2987 12.0785 16.2173 11.9344 16.2173C11.7904 16.2173 11.6588 16.2987 11.5944 16.4276C11.3644 16.8076 10.8844 17.4976 10.5444 17.5376C9.87444 17.6176 8.49444 17.5376 7.40444 17.5376C7.40444 17.5376 7.59444 16.5376 7.17444 16.1776C6.75444 15.8176 6.34444 15.3976 6.03444 15.1176L5.20444 14.1976C4.92444 13.8376 4.57444 13.1076 3.96444 12.1976C3.61444 11.6976 2.96444 11.1076 2.68444 10.6176C2.44937 10.2199 2.38107 9.74541 2.49444 9.29757C2.66425 8.70294 3.25511 8.33203 3.86444 8.43757C4.32794 8.46812 4.76636 8.65904 5.10444 8.97757C5.37216 9.20921 5.62281 9.45986 5.85444 9.72757C6.01444 9.91757 6.05444 10.0076 6.23444 10.2376C6.41444 10.4676 6.53444 10.6976 6.44444 10.3576" fill="currentColor"/>
      <path d="M6.42444 10.3476C6.32444 9.97757 6.22444 9.49757 6.01444 8.79757C5.80444 8.09757 5.67444 7.93757 5.54444 7.56757C5.41444 7.19757 5.24444 6.84757 5.04444 6.38757C4.86125 5.91763 4.70761 5.43669 4.58444 4.94757C4.50121 4.53538 4.60362 4.10743 4.86444 3.77757C5.2233 3.4274 5.74112 3.29413 6.22444 3.42757C6.6031 3.59316 6.92351 3.86831 7.14444 4.21757C7.43948 4.68924 7.68097 5.19235 7.86444 5.71757C8.14618 6.4372 8.35067 7.18473 8.47444 7.94757L8.56444 8.39757C8.56444 8.39757 8.56444 7.27757 8.56444 7.23757C8.56444 6.23757 8.50444 5.41757 8.56444 4.29757C8.56444 4.16757 8.62444 3.70757 8.64444 3.57757C8.6703 3.14754 8.92656 2.76505 9.31444 2.57757C9.75973 2.37779 10.2692 2.37779 10.7144 2.57757C11.1131 2.75601 11.3791 3.14159 11.4044 3.57757C11.4044 3.68757 11.4944 4.57757 11.4944 4.68757C11.4944 5.68757 11.4944 6.32757 11.4944 6.85757C11.4944 7.08757 11.4944 8.48757 11.4944 8.32757C11.518 7.00803 11.6316 5.69164 11.8344 4.38757C11.9529 3.97901 12.2404 3.64059 12.6244 3.45757C13.0994 3.27051 13.6389 3.36301 14.0244 3.69757C14.3126 4.01386 14.4822 4.42027 14.5044 4.84757C14.5044 5.25757 14.5044 5.74757 14.5044 6.09757C14.5044 6.96757 14.5044 7.41757 14.5044 8.21757C14.5044 8.21757 14.5044 8.51757 14.5044 8.39757C14.5944 8.11757 14.6944 7.85757 14.7744 7.65757C14.8544 7.45757 15.0144 7.04757 15.1344 6.79757C15.2566 6.55924 15.3935 6.32878 15.5444 6.10757C15.7013 5.85331 15.9364 5.6568 16.2144 5.54757C16.4649 5.45075 16.7438 5.45873 16.9883 5.5697C17.2328 5.68067 17.4224 5.88532 17.5144 6.13757C17.574 6.50182 17.574 6.87332 17.5144 7.23757C17.4478 7.797 17.3306 8.34926 17.1644 8.88757C17.0344 9.33757 16.8944 10.1176 16.8244 10.4876C16.7544 10.8576 16.5944 11.8676 16.4644 12.3076C16.272 12.8325 16.006 13.3274 15.6744 13.7776C15.1893 14.3178 14.7881 14.928 14.4844 15.5876C14.4097 15.9155 14.3761 16.2514 14.3844 16.5876C14.3828 16.8982 14.4232 17.2077 14.5044 17.5076C14.0956 17.5512 13.6833 17.5512 13.2744 17.5076C12.8844 17.4476 12.4044 16.6676 12.2744 16.4276C12.2101 16.2987 12.0785 16.2173 11.9344 16.2173C11.7904 16.2173 11.6588 16.2987 11.5944 16.4276C11.3644 16.8076 10.8844 17.4976 10.5444 17.5376C9.87444 17.6176 8.49444 17.5376 7.40444 17.5376C7.40444 17.5376 7.59444 16.5376 7.17444 16.1776C6.75444 15.8176 6.34444 15.3976 6.03444 15.1176L5.20444 14.1976C4.92444 13.8376 4.57444 13.1076 3.96444 12.1976C3.61444 11.6976 2.96444 11.1076 2.68444 10.6176C2.44937 10.2199 2.38107 9.74541 2.49444 9.29757C2.66425 8.70294 3.25511 8.33203 3.86444 8.43757C4.32794 8.46812 4.76636 8.65904 5.10444 8.97757C5.37216 9.20921 5.62281 9.45986 5.85444 9.72757C6.01444 9.91757 6.05444 10.0076 6.23444 10.2376C6.41444 10.4676 6.53444 10.6976 6.44444 10.3576" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M13.7944 14.5085V11.0567C13.7944 10.8501 13.6265 10.6826 13.4194 10.6826C13.2123 10.6826 13.0444 10.8501 13.0444 11.0567V14.5085C13.0444 14.7151 13.2123 14.8826 13.4194 14.8826C13.6265 14.8826 13.7944 14.7151 13.7944 14.5085Z" fill="currentColor"/>
      <path d="M11.8044 14.5083L11.7944 11.0548C11.7938 10.8486 11.6255 10.682 11.4184 10.6826C11.2112 10.6832 11.0438 10.8508 11.0444 11.0569L11.0544 14.5105C11.055 14.7166 11.2234 14.8832 11.4305 14.8826C11.6376 14.882 11.805 14.7144 11.8044 14.5083Z" fill="currentColor"/>
      <path d="M9.04945 11.0576L9.06945 14.5022C9.07066 14.7108 9.23953 14.8789 9.44663 14.8777C9.65374 14.8765 9.82064 14.7064 9.81943 14.4978L9.79943 11.0532C9.79822 10.8446 9.62935 10.6765 9.42225 10.6777C9.21514 10.679 9.04823 10.849 9.04945 11.0576Z" fill="currentColor"/>
      </g>
      </g>
      <defs>
      <filter id="filter0_d_4879_14261" x="1.14092" y="0" width="21.6591" height="21.8" 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_4879_14261"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4879_14261" result="shape"/>
      </filter>
      <clipPath id="clip0_4879_14261">
      <rect width="20" height="20" fill="white"/>
      </clipPath>
      </defs>
    </svg>
  );
}
CursorGrab.displayName = "CursorGrab";

export default CursorGrab;