Vela UI Docs
venizia.ai

message-notify-square

MessageNotifySquare, 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-notify-square.

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

Installation

pnpm dlx velaui add @velaui/icon-message-notify-square

Usage

// components/icons/message-notify-square.tsx
import MessageNotifySquare from "@/components/icons/message-notify-square"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function MessageNotifySquare({ size = 24, strokeWidth = 0, className, ref, ...props }: MessageNotifySquareProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M11.687 17.1911V16.6911C11.5544 16.6911 11.4272 16.7438 11.3334 16.8376L11.687 17.1911ZM6.67828 22.1998H6.17828C6.17828 22.402 6.30011 22.5844 6.48694 22.6617C6.67378 22.7391 6.88884 22.6964 7.03184 22.5534L6.67828 22.1998ZM6.67828 17.1911H7.17828C7.17828 16.915 6.95443 16.6911 6.67828 16.6911V17.1911ZM10.8 3.4998C11.0762 3.4998 11.3 3.27595 11.3 2.9998C11.3 2.72366 11.0762 2.4998 10.8 2.4998V2.9998V3.4998ZM22.1 11.9998C22.1 11.7237 21.8762 11.4998 21.6 11.4998C21.3239 11.4998 21.1 11.7237 21.1 11.9998H21.6H22.1ZM11.687 17.1911L11.3334 16.8376L6.32473 21.8463L6.67828 22.1998L7.03184 22.5534L12.0405 17.5447L11.687 17.1911ZM6.67828 22.1998H7.17828V17.1911H6.67828H6.17828V22.1998H6.67828ZM6.67828 17.1911V16.6911H4.80002V17.1911V17.6911H6.67828V17.1911ZM2.40002 14.7911H2.90002V5.39981H2.40002H1.90002V14.7911H2.40002ZM19.2 17.1911V16.6911H11.687V17.1911V17.6911H19.2V17.1911ZM4.80002 2.9998V3.4998H10.8V2.9998V2.4998H4.80002V2.9998ZM21.6 11.9998H21.1V14.7911H21.6H22.1V11.9998H21.6ZM19.2 17.1911V17.6911C20.8016 17.6911 22.1 16.3927 22.1 14.7911H21.6H21.1C21.1 15.8405 20.2494 16.6911 19.2 16.6911V17.1911ZM2.40002 5.39981H2.90002C2.90002 4.35046 3.75068 3.4998 4.80002 3.4998V2.9998V2.4998C3.1984 2.4998 1.90002 3.79818 1.90002 5.39981H2.40002ZM4.80002 17.1911V16.6911C3.75068 16.6911 2.90002 15.8405 2.90002 14.7911H2.40002H1.90002C1.90002 16.3927 3.1984 17.6911 4.80002 17.6911V17.1911ZM21.6 5.3998H21.1C21.1 7.11189 19.7121 8.4998 18 8.4998V8.9998V9.4998C20.2644 9.4998 22.1 7.66417 22.1 5.3998H21.6ZM18 8.9998V8.4998C16.2879 8.4998 14.9 7.11189 14.9 5.3998H14.4H13.9C13.9 7.66417 15.7357 9.4998 18 9.4998V8.9998ZM14.4 5.3998H14.9C14.9 3.68772 16.2879 2.2998 18 2.2998V1.7998V1.2998C15.7357 1.2998 13.9 3.13544 13.9 5.3998H14.4ZM18 1.7998V2.2998C19.7121 2.2998 21.1 3.68772 21.1 5.3998H21.6H22.1C22.1 3.13544 20.2644 1.2998 18 1.2998V1.7998Z" fill="currentColor"/>
    </svg>
  );
}
MessageNotifySquare.displayName = "MessageNotifySquare";

export default MessageNotifySquare;