Vela UI Docs
venizia.ai

color-swatch-02

ColorSwatch02, 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-color-swatch-02.

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

Installation

pnpm dlx velaui add @velaui/icon-color-swatch-02

Usage

// components/icons/color-swatch-02.tsx
import ColorSwatch02 from "@/components/icons/color-swatch-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ColorSwatch02({ size = 24, strokeWidth = 1, className, ref, ...props }: ColorSwatch02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M17.3333 21.6004C16.2017 21.6004 15.1165 21.1509 14.3163 20.3507C13.5162 19.5506 13.0667 18.4653 13.0667 17.3337V4.53372C13.0667 3.96793 13.2914 3.42531 13.6915 3.02523C14.0916 2.62515 14.6342 2.40039 15.2 2.40039H19.4667C20.0325 2.40039 20.5751 2.62515 20.9752 3.02523C21.3752 3.42531 21.6 3.96793 21.6 4.53372V17.3337C21.6 18.4653 21.1505 19.5506 20.3503 20.3507C19.5502 21.1509 18.4649 21.6004 17.3333 21.6004ZM17.3333 21.6004H4.53333C3.96754 21.6004 3.42492 21.3756 3.02484 20.9755C2.62476 20.5755 2.4 20.0328 2.4 19.4671V15.2004C2.4 14.6346 2.62476 14.092 3.02484 13.6919C3.42492 13.2918 3.96754 13.0671 4.53333 13.0671H6.98667M13.0667 7.04039L10.9333 4.90706C10.5333 4.50712 9.99075 4.28245 9.42507 4.28245C8.85938 4.28245 8.31686 4.50712 7.9168 4.90706L4.90027 7.92359C4.50033 8.32365 4.27566 8.86617 4.27566 9.43186C4.27566 9.99754 4.50033 10.5401 4.90027 10.9401L14.5003 20.5401M17.3333 17.3337V17.3444" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
ColorSwatch02.displayName = "ColorSwatch02";

export default ColorSwatch02;