Vela UI Docs
venizia.ai

color-swatch-01

ColorSwatch01, 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-01.

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

Installation

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

Usage

// components/icons/color-swatch-01.tsx
import ColorSwatch01 from "@/components/icons/color-swatch-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ColorSwatch01({ size = 24, strokeWidth = 1, className, ref, ...props }: ColorSwatch01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M6.00032 9.87394C3.56606 10.6385 1.80032 12.9127 1.80032 15.5993C1.80032 18.913 4.48661 21.5993 7.80032 21.5993C9.47876 21.5993 10.9962 20.9101 12.0852 19.7993C13.1461 18.717 13.8003 17.2345 13.8003 15.5993M18.0003 9.87394C20.4348 10.6384 22.2008 12.9127 22.2008 15.5994C22.2008 18.9131 19.5145 21.5994 16.2008 21.5994C14.8499 21.5994 13.6032 21.1529 12.6003 20.3995M18.0003 8.39914C18.0003 11.7128 15.314 14.3991 12.0003 14.3991C8.68661 14.3991 6.00032 11.7128 6.00032 8.39914C6.00032 5.08543 8.68661 2.39914 12.0003 2.39914C15.314 2.39914 18.0003 5.08543 18.0003 8.39914Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
ColorSwatch01.displayName = "ColorSwatch01";

export default ColorSwatch01;