Vela UI Docs
venizia.ai

heart

Heart, 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-heart.

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

Installation

pnpm dlx velaui add @velaui/icon-heart

Usage

// components/icons/heart.tsx
import Heart from "@/components/icons/heart"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Heart({ size = 24, strokeWidth = 1, className, ref, ...props }: HeartProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path fillRule="evenodd" clipRule="evenodd" d="M3.80641 6.20635C4.70654 5.30649 5.92722 4.80097 7.20001 4.80097C8.47279 4.80097 9.69347 5.30649 10.5936 6.20635L12 7.61155L13.4064 6.20635C13.8492 5.7479 14.3788 5.38223 14.9645 5.13066C15.5501 4.8791 16.1799 4.74669 16.8173 4.74115C17.4546 4.73561 18.0867 4.85706 18.6766 5.09841C19.2665 5.33975 19.8024 5.69617 20.2531 6.14685C20.7038 6.59754 21.0602 7.13347 21.3015 7.72337C21.5429 8.31327 21.6643 8.94533 21.6588 9.58268C21.6533 10.22 21.5209 10.8499 21.2693 11.4355C21.0177 12.0211 20.6521 12.5508 20.1936 12.9935L12 21.1883L3.80641 12.9935C2.90655 12.0934 2.40103 10.8727 2.40103 9.59995C2.40103 8.32716 2.90655 7.10648 3.80641 6.20635V6.20635Z" stroke="currentColor" strokeLinejoin="round"/>
    </svg>
  );
}
Heart.displayName = "Heart";

export default Heart;