link-angled

LinkAngled, 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-angled.

16px
20px
24px
32px

Installation

pnpm dlx velaui add @velaui/icon-link-angled

npx shadcn@latest add @velaui/icon-link-angled

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

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

Usage

// components/icons/link-angled.tsx
import LinkAngled from "@/components/icons/link-angled"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function LinkAngled({ size = 24, strokeWidth = 1, className, ref, ...props }: LinkAngledProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M7.37851 10.1905L5.14505 12.424C4.31092 13.2581 3.83124 14.3931 3.84001 15.5859C3.84877 16.7787 4.31796 17.9206 5.19167 18.7673C6.03836 19.641 7.18048 20.1102 8.3731 20.119C9.59293 20.1279 10.701 19.6753 11.5352 18.8411L13.7687 16.6077M16.6215 13.8094L18.8549 11.576C19.6891 10.7418 20.1688 9.60687 20.16 8.41406C20.1512 7.22124 19.682 6.07936 18.8083 5.23262C17.9618 4.38614 16.8199 3.91693 15.6271 3.90816C14.4343 3.8994 13.2992 4.35185 12.465 5.18601L10.2315 7.41946M8.6131 15.3271L15.3135 8.62676" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
LinkAngled.displayName = "LinkAngled";

export default LinkAngled;