Vela UI Docs
venizia.ai

message-text-01

MessageText01, 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-text-01.

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

Installation

pnpm dlx velaui add @velaui/icon-message-text-01

Usage

// components/icons/message-text-01.tsx
import MessageText01 from "@/components/icons/message-text-01"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function MessageText01({ size = 24, strokeWidth = 1, className, ref, ...props }: MessageText01Props) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M8.39905 8.40039H15.599M8.39905 13.2004H12.599M21.599 12.0004C21.599 13.3804 21.3079 14.6924 20.7836 15.8783L21.6009 21.5995L16.6979 20.3737C15.309 21.1549 13.7061 21.6004 11.999 21.6004C6.69711 21.6004 2.39905 17.3023 2.39905 12.0004C2.39905 6.69846 6.69711 2.40039 11.999 2.40039C17.301 2.40039 21.599 6.69846 21.599 12.0004Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
MessageText01.displayName = "MessageText01";

export default MessageText01;