Vela UI Docs
venizia.ai

play-02

Play02, 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-play-02.

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

Installation

pnpm dlx velaui add @velaui/icon-play-02

Usage

// components/icons/play-02.tsx
import Play02 from "@/components/icons/play-02"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Play02({ size = 24, strokeWidth = 0, className, ref, ...props }: Play02Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M15.3744 12.7588L15.1016 12.3398L15.0946 12.3443L15.0878 12.3491L15.3744 12.7588ZM15.3744 11.4687L15.0779 11.8713L15.1002 11.8877L15.1242 11.9016L15.3744 11.4687ZM10.2037 7.66122L10.5001 7.2586L10.486 7.24821L10.4712 7.23883L10.2037 7.66122ZM9.11966 8.22991L9.61973 8.22846L9.61955 8.21971L9.11966 8.22991ZM9.14134 15.709L8.64134 15.7105L8.64138 15.7246L8.64222 15.7387L9.14134 15.709ZM10.2651 16.3323L10.5072 16.7697L10.5302 16.757L10.5517 16.742L10.2651 16.3323ZM12 21V20.5C7.30558 20.5 3.5 16.6944 3.5 12H3H2.5C2.5 17.2467 6.7533 21.5 12 21.5V21ZM21 12H20.5C20.5 16.6944 16.6944 20.5 12 20.5V21V21.5C17.2467 21.5 21.5 17.2467 21.5 12H21ZM12 3V3.5C16.6944 3.5 20.5 7.30558 20.5 12H21H21.5C21.5 6.7533 17.2467 2.5 12 2.5V3ZM12 3V2.5C6.7533 2.5 2.5 6.7533 2.5 12H3H3.5C3.5 7.30558 7.30558 3.5 12 3.5V3ZM15.3744 12.7588L15.6471 13.1779C16.0186 12.936 16.37 12.5778 16.3694 12.0944C16.3687 11.5999 16.003 11.2545 15.6245 11.0358L15.3744 11.4687L15.1242 11.9016C15.2534 11.9762 15.3207 12.0393 15.352 12.0791C15.3797 12.1144 15.3694 12.1179 15.3694 12.0958C15.3694 12.0756 15.3782 12.0856 15.3441 12.1317C15.3078 12.1808 15.2346 12.2532 15.1016 12.3398L15.3744 12.7588ZM15.3744 11.4687L15.6708 11.0661L10.5001 7.2586L10.2037 7.66122L9.90719 8.06384L15.0779 11.8713L15.3744 11.4687ZM10.2037 7.66122L10.4712 7.23883C10.1109 7.01055 9.65226 6.90889 9.24371 7.09964C8.80754 7.3033 8.60979 7.75137 8.61976 8.24011L9.11966 8.22991L9.61955 8.21971C9.61727 8.10781 9.6385 8.04948 9.65069 8.02615C9.65669 8.01469 9.6613 8.00989 9.66269 8.00855C9.66402 8.00726 9.66503 8.00656 9.66678 8.00574C9.66985 8.00431 9.76049 7.97236 9.9361 8.0836L10.2037 7.66122ZM9.11966 8.22991L8.61966 8.23136L8.64134 15.7105L9.14134 15.709L9.64134 15.7076L9.61966 8.22846L9.11966 8.22991ZM9.14134 15.709L8.64222 15.7387C8.66881 16.1853 8.81789 16.6556 9.24409 16.8832C9.66512 17.1081 10.1345 16.976 10.5072 16.7697L10.2651 16.3323L10.023 15.8948C9.89852 15.9637 9.81015 15.9902 9.75644 15.9976C9.70673 16.0045 9.70137 15.9937 9.71519 16.0011C9.75145 16.0205 9.65964 16.0015 9.64045 15.6793L9.14134 15.709ZM10.2651 16.3323L10.5517 16.742L15.6609 13.1686L15.3744 12.7588L15.0878 12.3491L9.97852 15.9225L10.2651 16.3323Z" fill="currentColor"/>
    </svg>
  );
}
Play02.displayName = "Play02";

export default Play02;