Vela UI Docs
venizia.ai

wrench

Wrench, 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-wrench.

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

Installation

pnpm dlx velaui add @velaui/icon-wrench

Usage

// components/icons/wrench.tsx
import Wrench from "@/components/icons/wrench"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Wrench({ size = 24, strokeWidth = 1, className, ref, ...props }: WrenchProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M20.9814 7.37503C20.9676 7.2148 20.6099 6.90708 20.4586 6.85219C20.3069 6.79697 20.137 6.83456 20.0229 6.94809L17.7333 9.23769L14.7593 6.26374L17.0947 3.93712C17.209 3.82337 17.2463 3.65413 17.1913 3.50324C17.1356 3.35205 16.769 3.03175 16.6078 3.01787C15.1895 2.89613 13.7998 3.40061 12.795 4.40174C11.4189 5.77278 11.0545 7.77488 11.6998 9.48143C11.6293 9.54063 11.5597 9.60336 11.491 9.671L3.69542 16.9993C3.69267 17.002 3.68996 17.0049 3.68698 17.0075C2.77019 17.9209 2.77019 19.407 3.68698 20.3206C4.60392 21.2339 6.08476 21.2228 7.0014 20.3094C7.00535 20.3057 7.00897 20.302 7.01258 20.2979L14.3044 12.4712C14.3709 12.4047 14.4326 12.3351 14.4908 12.2637C16.2042 12.9077 18.2152 12.5455 19.5925 11.1736C20.597 10.1724 21.1038 8.78782 20.9814 7.37503Z" stroke="currentColor" strokeLinejoin="round"/>
    </svg>
  );
}
Wrench.displayName = "Wrench";

export default Wrench;