Vela UI Docs
venizia.ai

tag

Tag, 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-tag.

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

Installation

pnpm dlx velaui add @velaui/icon-tag

Usage

// components/icons/tag.tsx
import Tag from "@/components/icons/tag"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Tag({ size = 24, strokeWidth = 1, className, ref, ...props }: TagProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M16.354 7.65238L16.3476 7.65235M19.5226 2.85129L13.7222 2.40511C13.2079 2.36555 12.7021 2.55269 12.3374 2.91739L2.91751 12.3373C2.22753 13.0272 2.22753 14.1459 2.9175 14.8359L9.16405 21.0824C9.85402 21.7724 10.9727 21.7724 11.6627 21.0824L21.0825 11.6626C21.4472 11.2978 21.6344 10.792 21.5948 10.2777L21.1486 4.47737C21.0818 3.6085 20.3914 2.91813 19.5226 2.85129Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
Tag.displayName = "Tag";

export default Tag;