Vela UI Docs
venizia.ai

paperclip-01

Paperclip01, one of the 856 Vela UI icons, in the Files 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-paperclip-01.

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

Installation

pnpm dlx velaui add @velaui/icon-paperclip-01

Usage

// components/icons/paperclip-01.tsx
import Paperclip01 from "@/components/icons/paperclip-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Paperclip01({ size = 24, strokeWidth = 1, className, ref, ...props }: Paperclip01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M17.5102 8.13323L10.4103 15.2331C9.5661 16.0773 8.19729 16.0773 7.35304 15.2331C6.50702 14.3871 6.50905 13.0148 7.35758 12.1713L12.8633 6.69803L14.246 5.31536C15.9283 3.63302 18.6559 3.63302 20.3383 5.31536C22.0206 6.9977 22.0206 9.72531 20.3383 11.4076L18.9764 12.7695L13.8149 17.931C11.1449 20.7122 7.09933 21.1354 4.27073 18.4199C1.47676 15.7377 1.95033 11.7165 4.77532 8.89147L9.91649 3.74951" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Paperclip01.displayName = "Paperclip01";

export default Paperclip01;