Vela UI Docs
venizia.ai

speaker

Speaker, 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-speaker.

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

Installation

pnpm dlx velaui add @velaui/icon-speaker

Usage

// components/icons/speaker.tsx
import Speaker from "@/components/icons/speaker"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function Speaker({ size = 24, strokeWidth = 1, className, ref, ...props }: SpeakerProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M4 6.375C4 4.51104 5.53502 3 7.42857 3H16.5714C18.465 3 20 4.51104 20 6.375V17.625C20 19.489 18.465 21 16.5714 21H7.42857C5.53502 21 4 19.489 4 17.625V6.375Z" stroke="currentColor" strokeLinejoin="round"/>
      <path d="M12.081 6.375H12V6.44707H12.081V6.375Z" stroke="currentColor" strokeLinejoin="round"/>
      <path d="M15.4286 14.25C15.4286 16.114 13.8935 17.625 12 17.625C10.1065 17.625 8.57143 16.114 8.57143 14.25C8.57143 12.386 10.1065 10.875 12 10.875C13.8935 10.875 15.4286 12.386 15.4286 14.25Z" stroke="currentColor" strokeLinejoin="round"/>
    </svg>
  );
}
Speaker.displayName = "Speaker";

export default Speaker;