Vela UI Docs
venizia.ai

colors-02

Colors02, 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-colors-02.

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

Installation

pnpm dlx velaui add @velaui/icon-colors-02

Usage

// components/icons/colors-02.tsx
import Colors02 from "@/components/icons/colors-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Colors02({ size = 24, strokeWidth = 1, className, ref, ...props }: Colors02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M5.8909 18.0196H7.05454M16.3636 13.365H19.2727C20.558 13.365 21.6 14.407 21.6 15.6923V19.1832C21.6 20.4685 20.558 21.5105 19.2727 21.5105H7.05454M11.1273 6.748L14.7044 3.1709C15.6132 2.26204 17.0868 2.26204 17.9956 3.1709L20.4641 5.63934C21.3729 6.5482 21.3729 8.02175 20.4641 8.9306L10.5454 18.8492M4.72727 21.5105H8.21817C9.50349 21.5105 10.5454 20.4685 10.5454 19.1832V5.21959C10.5454 3.93427 9.50349 2.89231 8.21817 2.89231H4.72727C3.44195 2.89231 2.39999 3.93427 2.39999 5.21959V19.1832C2.39999 20.4685 3.44195 21.5105 4.72727 21.5105Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Colors02.displayName = "Colors02";

export default Colors02;