Vela UI Docs
venizia.ai

palette

Palette, 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-palette.

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

Installation

pnpm dlx velaui add @velaui/icon-palette

Usage

// components/icons/palette.tsx
import Palette from "@/components/icons/palette"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Palette({ size = 24, strokeWidth = 1, className, ref, ...props }: PaletteProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M12.0003 6.00039V6.03362M6.03325 12.0006H6.00002M16.243 7.75794L16.2195 7.78143M7.7812 16.2197L7.7577 16.2432M7.7812 7.78106L7.7577 7.75756M12 21.6004C6.69809 21.6004 2.40002 17.3023 2.40002 12.0004C2.40002 6.69846 6.69809 2.40039 12 2.40039C17.302 2.40039 21.6 6.69846 21.6 12.0004C21.6 13.6145 20.1086 14.6884 18.4946 14.6884H17.868C17.5445 14.6884 17.2254 14.7637 16.936 14.9084C15.9066 15.4231 15.4893 16.6749 16.004 17.7044C16.1487 17.9937 16.224 18.3128 16.224 18.6363V18.8255C16.224 19.9261 15.6064 20.9683 14.545 21.2594C13.7345 21.4817 12.8811 21.6004 12 21.6004Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Palette.displayName = "Palette";

export default Palette;