The Heroicons chat bubble bottom center icon depicts a speech bubble positioned at the bottom center of a container, commonly used to indicate a chat or message feature.
Common uses
- Chat/Messaging entry point
- Notification indicator
- Comment section trigger
Use it in React
Install
npm i @heroicons/reactImport & render
import { ChatBubbleBottomCenterIcon } from '@heroicons/react/24/outline';
<ChatBubbleBottomCenterIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ChatBubbleBottomCenterIcon className="size-6" />24/solid
<ChatBubbleBottomCenterIcon className="size-6" />20/solid
<ChatBubbleBottomCenterIcon className="size-6" />16/solid
<ChatBubbleBottomCenterIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- chatbubblebottomcenterspeech bubblemessage iconcomment icondialogue
FAQ
- What does this icon represent?
- This icon represents a chat bubble, typically used to signify communication, messages, or a chat interface.
- How do I use this icon in React?
- You can import and use it in React with: import { ChatBubbleBottomCenterIcon } from '@heroicons/react/24/outline'
- What is the license for this icon?
- This icon is from the Heroicons library and is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →