Vela UI Docs
venizia.ai

coins

Coins, 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-coins.

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

Installation

pnpm dlx velaui add @velaui/icon-coins

Usage

// components/icons/coins.tsx
import Coins from "@/components/icons/coins"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Coins({ size = 24, strokeWidth = 1, className, ref, ...props }: CoinsProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M9.49332 17.8821C9.09253 17.9594 8.67788 18 8.25334 18C4.79972 18 2 15.3137 2 12C2 8.68629 4.79972 6 8.25334 6C8.67788 6 9.09253 6.04059 9.49332 6.11795M22 12C22 15.3137 19.2003 18 15.7467 18C12.293 18 9.49332 15.3137 9.49332 12C9.49332 8.68629 12.293 6 15.7467 6C19.2003 6 22 8.68629 22 12Z" stroke="currentColor" strokeLinecap="round"/>
    </svg>
  );
}
Coins.displayName = "Coins";

export default Coins;