Vela UI Docs
venizia.ai

quote

Quote, 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-quote.

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

Installation

pnpm dlx velaui add @velaui/icon-quote

Usage

// components/icons/quote.tsx
import Quote from "@/components/icons/quote"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Quote({ size = 24, strokeWidth = 1, className, ref, ...props }: QuoteProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M19.8511 6C16.4669 6 13.7234 8.74345 13.7234 12.1277C13.7234 13.6269 14.5701 16.5034 16.0213 17.2876M9.12766 6C5.74345 6 3 8.74345 3 12.1277C3 13.6269 3.84672 16.5034 5.29787 17.2876M21 14.8085C21 16.5006 19.6283 17.8723 17.9362 17.8723C16.2441 17.8723 14.8723 16.5006 14.8723 14.8085C14.8723 13.1164 16.2441 11.7447 17.9362 11.7447C19.6283 11.7447 21 13.1164 21 14.8085ZM10.2766 14.8085C10.2766 16.5006 8.90487 17.8723 7.21277 17.8723C5.52066 17.8723 4.14894 16.5006 4.14894 14.8085C4.14894 13.1164 5.52066 11.7447 7.21277 11.7447C8.90487 11.7447 10.2766 13.1164 10.2766 14.8085Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Quote.displayName = "Quote";

export default Quote;