link-broken

LinkBroken, 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-broken.

16px
20px
24px
32px

Installation

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

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

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

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

Usage

// components/icons/link-broken.tsx
import LinkBroken from "@/components/icons/link-broken"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function LinkBroken({ size = 24, strokeWidth = 1, className, ref, ...props }: LinkBrokenProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M7.47114 10.2831L5.23768 12.5166C4.40355 13.3507 3.92387 14.4857 3.93264 15.6785C3.9414 16.8713 4.41059 18.0132 5.2843 18.8599C6.13099 19.7337 7.27311 20.2028 8.46573 20.2116C9.68556 20.2206 10.7937 19.7679 11.6278 18.9338L13.8613 16.7003M16.7141 13.9021L18.9476 11.6686C19.7817 10.8345 20.2614 9.69951 20.2526 8.5067C20.2439 7.31389 19.7747 6.172 18.901 5.32527C18.0545 4.47878 16.9125 4.00957 15.7197 4.00081C14.5269 3.99204 13.3918 4.44449 12.5576 5.27865L10.3242 7.5121M8.70573 15.4198L15.4061 8.71941M5.33629 5.2171L4.22999 4.11079M9.17779 3.26835L9.35878 1.44482M1.72186 9.08141L3.61252 8.89376M18.9409 18.5057L20.0472 19.612M15.0994 20.4545L14.9184 22.278M22.5554 14.6414L20.6647 14.8291" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
LinkBroken.displayName = "LinkBroken";

export default LinkBroken;