Vela UI Docs
venizia.ai

thumb-down

ThumbDown, 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-thumb-down.

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

Installation

pnpm dlx velaui add @velaui/icon-thumb-down

Usage

// components/icons/thumb-down.tsx
import ThumbDown from "@/components/icons/thumb-down"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function ThumbDown({ size = 24, strokeWidth = 1, className, ref, ...props }: ThumbDownProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M16.999 4L13.239 3.06C13.0804 3.02025 12.9175 3.0001 12.754 3H8.73602C8.36452 3.00001 8.00037 3.10349 7.68439 3.29884C7.36841 3.49419 7.11307 3.77369 6.94702 4.106L3.44702 11.106C3.29465 11.4109 3.22274 11.7497 3.23812 12.0902C3.2535 12.4308 3.35566 12.7617 3.53489 13.0516C3.71412 13.3416 3.96449 13.5809 4.26221 13.7469C4.55994 13.9129 4.89515 14 5.23602 14H10H12M16.999 4L17 13L13.608 18.088C13.211 18.683 13 19.381 13 20.096C13 20.595 12.595 21 12.095 21H11.999C11.4686 21 10.9599 20.7893 10.5848 20.4142C10.2097 20.0391 9.99902 19.5304 9.99902 19V14M16.999 4H19C19.5304 4 20.0392 4.21071 20.4142 4.58579C20.7893 4.96086 21 5.46957 21 6V12C21 12.5304 20.7893 13.0391 20.4142 13.4142C20.0392 13.7893 19.5304 14 19 14H16.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
ThumbDown.displayName = "ThumbDown";

export default ThumbDown;