link

Link, 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-link.

16px
20px
24px
32px

Installation

pnpm dlx velaui add @velaui/icon-link

npx shadcn@latest add @velaui/icon-link

yarn dlx shadcn@latest add @velaui/icon-link

bunx --bun shadcn@latest add @velaui/icon-link

Usage

// components/icons/link.tsx
import Link from "@/components/icons/link"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Link({ size = 24, strokeWidth = 1, className, ref, ...props }: LinkProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M10.0116 7.45264L6.85304 7.45264C5.6734 7.45264 4.53167 7.91599 3.69442 8.76564C2.85717 9.61528 2.3815 10.7545 2.40058 11.971C2.38145 13.1875 2.85731 14.3269 3.69442 15.1764C4.55063 16.0453 5.65425 16.5088 6.83394 16.5088H9.99252M13.9884 16.5474H17.147C18.3267 16.5474 19.4684 16.084 20.3056 15.2344C21.1429 14.3847 21.6185 13.2455 21.5995 12.029C21.5995 10.8319 21.1238 9.69263 20.2865 8.84298C19.4493 7.99333 18.3267 7.51062 17.147 7.5106H13.9884M7.25247 11.9578L16.7282 11.9578" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Link.displayName = "Link";

export default Link;