The Heroicons chat bubble left icon depicts a speech bubble pointing to the left, commonly used to represent incoming messages, replies, or user comments in a chat interface.
Common uses
- Displaying incoming chat messages
- Indicating a user's reply in a thread
- Representing a comment section
Use it in React
Install
npm i @heroicons/reactImport & render
import { ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
<ChatBubbleLeftIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ChatBubbleLeftIcon className="size-6" />24/solid
<ChatBubbleLeftIcon className="size-6" />20/solid
<ChatBubbleLeftIcon className="size-6" />16/solid
<ChatBubbleLeftIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- chatbubbleleftspeech bubblemessage iconcomment icondialogue
FAQ
- What is this icon for?
- This icon represents a chat bubble pointing left, typically used for incoming messages or replies in communication interfaces.
- How do I use this in React?
- Import it from Heroicons like this: `import { ChatBubbleLeftIcon } from '@heroicons/react/24/outline'`. Then use it as a React component: `<ChatBubbleLeftIcon className="h-6 w-6" />`.
- What is the license for this icon?
- The Heroicons chat bubble left icon is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Heroicons.