Vela UI Docs
venizia.ai

message-notify-circle

MessageNotifyCircle, 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-circle.

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

Installation

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

Usage

// components/icons/message-notify-circle.tsx
import MessageNotifyCircle from "@/components/icons/message-notify-circle"

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

/** Custom vela-ui icon, synced from Figma (node under section "Icons"). */
export function MessageNotifyCircle({ size = 24, strokeWidth = 0, className, ref, ...props }: MessageNotifyCircleProps) {
  return (
    <svg
      ref={ref}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={strokeWidth}
      className={className}
      {...props}
    >
      <path d="M22.0991 12.5998C22.0991 12.3237 21.8752 12.0998 21.5991 12.0998C21.323 12.0998 21.0991 12.3237 21.0991 12.5998H21.5991H22.0991ZM20.7836 16.4778L20.3263 16.2756C20.2885 16.3612 20.2754 16.4558 20.2886 16.5485L20.7836 16.4778ZM16.698 20.9732L16.8193 20.4881C16.6953 20.4571 16.5643 20.4747 16.4529 20.5374L16.698 20.9732ZM21.6009 22.1989L21.4797 22.684C21.6412 22.7243 21.8122 22.6817 21.9358 22.5702C22.0594 22.4587 22.1194 22.293 22.0959 22.1282L21.6009 22.1989ZM10.2923 3.65952C10.5636 3.60805 10.7418 3.3464 10.6903 3.07509C10.6389 2.80379 10.3772 2.62558 10.1059 2.67704L10.1991 3.16828L10.2923 3.65952ZM21.5991 12.5998H21.0991C21.0991 13.9089 20.823 15.1521 20.3263 16.2756L20.7836 16.4778L21.2409 16.6799C21.7928 15.4316 22.0991 14.0508 22.0991 12.5998H21.5991ZM11.9991 22.1998V21.6998C6.97332 21.6998 2.89911 17.6256 2.89911 12.5998H2.39911H1.89911C1.89911 18.1779 6.42103 22.6998 11.9991 22.6998V22.1998ZM16.698 20.9732L16.4529 20.5374C15.1368 21.2775 13.6181 21.6998 11.9991 21.6998V22.1998V22.6998C13.7942 22.6998 15.4813 22.2311 16.9431 21.409L16.698 20.9732ZM21.6009 22.1989L21.7222 21.7138L16.8193 20.4881L16.698 20.9732L16.5767 21.4582L21.4797 22.684L21.6009 22.1989ZM20.7836 16.4778L20.2886 16.5485L21.106 22.2696L21.6009 22.1989L22.0959 22.1282L21.2786 16.4071L20.7836 16.4778ZM2.39911 12.5998H2.89911C2.89911 8.15775 6.08235 4.45812 10.2923 3.65952L10.1991 3.16828L10.1059 2.67704C5.43277 3.56351 1.89911 7.66845 1.89911 12.5998H2.39911ZM21.5991 5.3998H21.0991C21.0991 7.11189 19.7112 8.4998 17.9991 8.4998V8.9998V9.4998C20.2635 9.4998 22.0991 7.66417 22.0991 5.3998H21.5991ZM17.9991 8.9998V8.4998C16.287 8.4998 14.8991 7.11189 14.8991 5.3998H14.3991H13.8991C13.8991 7.66417 15.7347 9.4998 17.9991 9.4998V8.9998ZM14.3991 5.3998H14.8991C14.8991 3.68772 16.287 2.2998 17.9991 2.2998V1.7998V1.2998C15.7347 1.2998 13.8991 3.13544 13.8991 5.3998H14.3991ZM17.9991 1.7998V2.2998C19.7112 2.2998 21.0991 3.68772 21.0991 5.3998H21.5991H22.0991C22.0991 3.13544 20.2635 1.2998 17.9991 1.2998V1.7998Z" fill="currentColor"/>
    </svg>
  );
}
MessageNotifyCircle.displayName = "MessageNotifyCircle";

export default MessageNotifyCircle;