next-icons-logoNext IconsAll Icons
export type IconProps = {
  size?: number | string;
  color?: string;
  className?: string;
} & React.SVGProps<SVGSVGElement>;

export const ChatDotsIcon = ({
  size = 24,
  color = "currentColor",
  className,
  ...props
}: IconProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width={size}
    height={size}
    fill={color}
    className={className}
    {...props}
  >
      <path d="M8 11A1 1 0 1 0 8 13 1 1 0 1 0 8 11z" />
      <path d="M12 11A1 1 0 1 0 12 13 1 1 0 1 0 12 11z" />
      <path d="M16 11A1 1 0 1 0 16 13 1 1 0 1 0 16 11z" />
      <path d="m12,2C6.49,2,2,6.49,2,12c0,2.12.68,4.19,1.93,5.9l-1.75,2.53c-.21.31-.24.7-.06,1.03.17.33.51.54.89.54h9c5.51,0,10-4.49,10-10S17.51,2,12,2Zm0,18h-7.09l1.09-1.57c.26-.37.23-.88-.06-1.22-1.25-1.45-1.93-3.3-1.93-5.21,0-4.41,3.59-8,8-8s8,3.59,8,8-3.59,8-8,8Z" />
  </svg>
);

Icon

ChatDots

Category

chat

Use case

Use this icon in navbar items, social link groups, profile actions, settings rows, and call-to-action buttons.

Size

48px

Color

#18181b

Related chat icons

ChatDiscussionChatExclamationChatLeftChatMessageChatRightChatSquare