Vela UI Docs
venizia.ai

message-x

MessageX, one of the 856 Vela UI icons, in the Communication 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-message-x.

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

Installation

pnpm dlx velaui add @velaui/icon-message-x

Usage

// components/icons/message-x.tsx
import MessageX from "@/components/icons/message-x"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function MessageX({ size = 24, strokeWidth = 1, className, ref, ...props }: MessageXProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M14.3991 14.4004L11.9991 12.0004M11.9991 12.0004L9.59911 9.60039M11.9991 12.0004L9.59911 14.4004M11.9991 12.0004L14.3991 9.60039M21.5991 12.0004C21.5991 12.0004 21.3079 14.6924 20.7836 15.8783L21.6009 21.5995L16.698 20.3737C15.3091 21.1549 13.7061 21.6004 11.9991 21.6004C6.69718 21.6004 2.39911 17.3023 2.39911 12.0004C2.39911 6.69846 6.69718 2.40039 11.9991 2.40039C17.301 2.40039 21.5991 6.69846 21.5991 12.0004Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
MessageX.displayName = "MessageX";

export default MessageX;