Vela UI Docs
venizia.ai

star-01

Star01, 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-star-01.

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

Installation

pnpm dlx velaui add @velaui/icon-star-01

Usage

// components/icons/star-01.tsx
import Star01 from "@/components/icons/star-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Star01({ size = 24, strokeWidth = 1, className, ref, ...props }: Star01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M10.891 3.17251C11.272 2.14302 12.7281 2.14302 13.109 3.17251L15.0051 8.29665C15.1249 8.62032 15.3801 8.87552 15.7038 8.99529L20.8279 10.8914C21.8574 11.2723 21.8574 12.7284 20.8279 13.1094L15.7038 15.0055C15.3801 15.1253 15.1249 15.3805 15.0051 15.7041L13.109 20.8283C12.7281 21.8578 11.272 21.8578 10.891 20.8283L8.99492 15.7041C8.87515 15.3805 8.61996 15.1253 8.29629 15.0055L3.17215 13.1094C2.14265 12.7284 2.14265 11.2723 3.17215 10.8914L8.29629 8.99529C8.61996 8.87552 8.87515 8.62032 8.99492 8.29665L10.891 3.17251Z" stroke="currentColor" strokeLinejoin="round"/>
    </svg>
  );
}
Star01.displayName = "Star01";

export default Star01;