Vela UI Docs
venizia.ai

card-edit

CardEdit, 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-card-edit.

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

Installation

pnpm dlx velaui add @velaui/icon-card-edit

Usage

// components/icons/card-edit.tsx
import CardEdit from "@/components/icons/card-edit"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function CardEdit({ size = 24, strokeWidth = 0, className, ref, ...props }: CardEditProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M1.50096 15.6599L1.00096 15.6599L1.50096 15.6599ZM1.5007 6.66008L2.0007 6.66006L1.5007 6.66008ZM11.7006 18.56C11.9768 18.56 12.2006 18.3362 12.2006 18.06C12.2006 17.7839 11.9768 17.56 11.7006 17.56L11.7006 18.06L11.7006 18.56ZM3.90092 18.0599L3.90093 17.5599H3.90093L3.90092 18.0599ZM20.7002 6.65885L20.2002 6.65886V6.65886L20.7002 6.65885ZM2.10024 7.95986C1.8241 7.95986 1.60024 8.18372 1.60024 8.45986C1.60024 8.736 1.8241 8.95986 2.10024 8.95986V8.45986V7.95986ZM20.1002 8.95986C20.3764 8.95986 20.6002 8.736 20.6002 8.45986C20.6002 8.18372 20.3764 7.95986 20.1002 7.95986V8.45986V8.95986ZM15.2993 16.8599L14.9457 16.5063C14.852 16.6001 14.7993 16.7273 14.7993 16.8599H15.2993ZM19.6193 12.5399L19.9728 12.1863C19.7776 11.991 19.461 11.991 19.2657 12.1863L19.6193 12.5399ZM22.4993 15.4199L22.8528 15.7734C22.9466 15.6796 22.9993 15.5525 22.9993 15.4199C22.9993 15.2873 22.9466 15.1601 22.8528 15.0663L22.4993 15.4199ZM18.1793 19.7399V20.2399C18.3119 20.2399 18.4391 20.1872 18.5328 20.0934L18.1793 19.7399ZM15.2993 19.7399H14.7993C14.7993 20.016 15.0231 20.2399 15.2993 20.2399V19.7399ZM3.9007 4.26001V4.76001H18.3V4.26001V3.76001H3.9007V4.26001ZM1.50096 15.6599L2.00096 15.6599L2.0007 6.66006L1.5007 6.66008L1.0007 6.66009L1.00096 15.6599L1.50096 15.6599ZM11.7006 18.06L11.7006 17.56L3.90093 17.5599L3.90092 18.0599L3.90091 18.5599L11.7006 18.56L11.7006 18.06ZM20.7002 6.65885L20.2002 6.65886L20.2002 9.06002L20.7002 9.06001L21.2002 9.06L21.2002 6.65884L20.7002 6.65885ZM3.9007 4.26001V3.76001C2.29904 3.76001 1.00066 5.05843 1.0007 6.66009L1.5007 6.66008L2.0007 6.66006C2.00067 5.6107 2.85134 4.76001 3.9007 4.76001V4.26001ZM18.3 4.26001V4.76001C19.3498 4.76001 20.2002 5.60978 20.2002 6.65886L20.7002 6.65885L21.2002 6.65885C21.2002 5.05676 19.9013 3.76001 18.3 3.76001V4.26001ZM1.50096 15.6599L1.00096 15.6599C1.001 17.2615 2.29934 18.5598 3.90091 18.5599L3.90092 18.0599L3.90093 17.5599C2.85162 17.5598 2.00099 16.7092 2.00096 15.6599L1.50096 15.6599ZM2.10024 8.45986V8.95986H20.1002V8.45986V7.95986H2.10024V8.45986ZM15.2993 16.8599L15.6528 17.2134L19.9728 12.8934L19.6193 12.5399L19.2657 12.1863L14.9457 16.5063L15.2993 16.8599ZM19.6193 12.5399L19.2657 12.8934L22.1457 15.7734L22.4993 15.4199L22.8528 15.0663L19.9728 12.1863L19.6193 12.5399ZM22.4993 15.4199L22.1457 15.0663L17.8257 19.3863L18.1793 19.7399L18.5328 20.0934L22.8528 15.7734L22.4993 15.4199ZM18.1793 19.7399V19.2399H15.2993V19.7399V20.2399H18.1793V19.7399ZM15.2993 19.7399H15.7993V16.8599H15.2993H14.7993V19.7399H15.2993Z" fill="currentColor"/>
    </svg>
  );
}
CardEdit.displayName = "CardEdit";

export default CardEdit;