Vela UI Docs
venizia.ai

embed

Embed, 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-embed.

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

Installation

pnpm dlx velaui add @velaui/icon-embed

Usage

// components/icons/embed.tsx
import Embed from "@/components/icons/embed"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Embed({ size = 24, strokeWidth = 0, className, ref, ...props }: EmbedProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M6.02564 15.7634C6.22325 15.9563 6.53981 15.9525 6.7327 15.7549C6.92559 15.5573 6.92176 15.2407 6.72415 15.0478L6.3749 15.4056L6.02564 15.7634ZM3 12.1114L2.65075 11.7536C2.55435 11.8477 2.5 11.9767 2.5 12.1114C2.5 12.2461 2.55435 12.3751 2.65075 12.4692L3 12.1114ZM6.72415 9.17498C6.92176 8.98209 6.92559 8.66553 6.7327 8.46792C6.53981 8.27031 6.22326 8.26648 6.02565 8.45937L6.3749 8.81717L6.72415 9.17498ZM17.9744 8.45937C17.7767 8.26648 17.4602 8.27031 17.2673 8.46792C17.0744 8.66553 17.0782 8.98209 17.2759 9.17497L17.6251 8.81717L17.9744 8.45937ZM21 12.1114L21.3493 12.4692C21.4456 12.3751 21.5 12.2461 21.5 12.1114C21.5 11.9767 21.4456 11.8477 21.3493 11.7536L21 12.1114ZM17.2759 15.0478C17.0782 15.2407 17.0744 15.5573 17.2673 15.7549C17.4602 15.9525 17.7767 15.9563 17.9744 15.7634L17.6251 15.4056L17.2759 15.0478ZM9.90904 17.8683C9.83629 18.1347 9.99326 18.4096 10.2596 18.4823C10.526 18.5551 10.801 18.3981 10.8737 18.1317L10.3914 18L9.90904 17.8683ZM11.9997 12.1109L11.5177 11.9779L11.5174 11.9791L11.9997 12.1109ZM14.1675 6.13297C14.2409 5.86677 14.0847 5.59144 13.8185 5.518C13.5523 5.44457 13.2769 5.60083 13.2035 5.86703L13.6855 6L14.1675 6.13297ZM6.3749 15.4056L6.72415 15.0478L3.34925 11.7536L3 12.1114L2.65075 12.4692L6.02564 15.7634L6.3749 15.4056ZM3 12.1114L3.34925 12.4692L6.72415 9.17498L6.3749 8.81717L6.02565 8.45937L2.65075 11.7536L3 12.1114ZM17.6251 8.81717L17.2759 9.17497L20.6507 12.4692L21 12.1114L21.3493 11.7536L17.9744 8.45937L17.6251 8.81717ZM21 12.1114L20.6507 11.7536L17.2759 15.0478L17.6251 15.4056L17.9744 15.7634L21.3493 12.4692L21 12.1114ZM10.3914 18L10.8737 18.1317L12.4821 12.2426L11.9997 12.1109L11.5174 11.9791L9.90904 17.8683L10.3914 18ZM11.9997 12.1109L12.4817 12.2438L14.1675 6.13297L13.6855 6L13.2035 5.86703L11.5177 11.9779L11.9997 12.1109Z" fill="currentColor"/>
    </svg>
  );
}
Embed.displayName = "Embed";

export default Embed;