Vela UI Docs
venizia.ai

headphones

Headphones, 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-headphones.

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

Installation

pnpm dlx velaui add @velaui/icon-headphones

Usage

// components/icons/headphones.tsx
import Headphones from "@/components/icons/headphones"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Headphones({ size = 24, strokeWidth = 1, className, ref, ...props }: HeadphonesProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M3.60001 15.6001H6.00001C6.66275 15.6001 7.20001 16.1374 7.20001 16.8001V19.2001C7.20001 19.8628 6.66275 20.4001 6.00001 20.4001H3.60001V12.0001C3.60001 7.36091 7.36081 3.6001 12 3.6001C16.6392 3.6001 20.4 7.36091 20.4 12.0001V20.4001H18C17.3373 20.4001 16.8 19.8628 16.8 19.2001V16.8001C16.8 16.1374 17.3373 15.6001 18 15.6001H20.4" stroke="currentColor" strokeLinejoin="round"/>
    </svg>
  );
}
Headphones.displayName = "Headphones";

export default Headphones;