chat bubble left right icon
chat-bubble-left-right-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.
- Name
- chat-bubble-left-right-solid
- Set
- HeroIcons
- Style
- Solid 24x24
- Viewbox
- 24×24
- License
- MIT
3 other variants in HeroIcons
Related icons in HeroIcons
Use the chat bubble left right icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M4.913 2.658q3.115-.406 6.337-.408c2.147 0 4.262.139 6.337.408c1.922.25 3.291 1.861 3.405 3.727a4.4 4.4 0 0 0-1.032-.211a51 51 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a49 49 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979"/><path d="M15.75 7.5q-2.065 0-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94q1.865.153 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49 49 0 0 0 15.75 7.5"/></g></svg>
React
import type { SVGProps } from "react";
export function HeroiconsChatBubbleLeftRightSolid(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M4.913 2.658q3.115-.406 6.337-.408c2.147 0 4.262.139 6.337.408c1.922.25 3.291 1.861 3.405 3.727a4.4 4.4 0 0 0-1.032-.211a51 51 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a49 49 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979"/><path d="M15.75 7.5q-2.065 0-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94q1.865.153 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49 49 0 0 0 15.75 7.5"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M4.913 2.658q3.115-.406 6.337-.408c2.147 0 4.262.139 6.337.408c1.922.25 3.291 1.861 3.405 3.727a4.4 4.4 0 0 0-1.032-.211a51 51 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a49 49 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979"/><path d="M15.75 7.5q-2.065 0-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94q1.865.153 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49 49 0 0 0 15.75 7.5"/></g></svg> </template>
CSS
.icon-chat-bubble-left-right-solid {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M4.913%202.658q3.115-.406%206.337-.408c2.147%200%204.262.139%206.337.408c1.922.25%203.291%201.861%203.405%203.727a4.4%204.4%200%200%200-1.032-.211a51%2051%200%200%200-8.42%200c-2.358.196-4.04%202.19-4.04%204.434v4.286a4.47%204.47%200%200%200%202.433%203.984L7.28%2021.53A.75.75%200%200%201%206%2021v-4.03a49%2049%200%200%201-1.087-.128C2.905%2016.58%201.5%2014.833%201.5%2012.862V6.638c0-1.97%201.405-3.718%203.413-3.979%22%2F%3E%3Cpath%20d%3D%22M15.75%207.5q-2.065%200-4.086.169C10.124%207.797%209%209.103%209%2010.609v4.285c0%201.507%201.128%202.814%202.67%202.94q1.865.153%203.768.165l2.782%202.781a.75.75%200%200%200%201.28-.53v-2.39l.33-.026c1.542-.125%202.67-1.433%202.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49%2049%200%200%200%2015.75%207.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M4.913%202.658q3.115-.406%206.337-.408c2.147%200%204.262.139%206.337.408c1.922.25%203.291%201.861%203.405%203.727a4.4%204.4%200%200%200-1.032-.211a51%2051%200%200%200-8.42%200c-2.358.196-4.04%202.19-4.04%204.434v4.286a4.47%204.47%200%200%200%202.433%203.984L7.28%2021.53A.75.75%200%200%201%206%2021v-4.03a49%2049%200%200%201-1.087-.128C2.905%2016.58%201.5%2014.833%201.5%2012.862V6.638c0-1.97%201.405-3.718%203.413-3.979%22%2F%3E%3Cpath%20d%3D%22M15.75%207.5q-2.065%200-4.086.169C10.124%207.797%209%209.103%209%2010.609v4.285c0%201.507%201.128%202.814%202.67%202.94q1.865.153%203.768.165l2.782%202.781a.75.75%200%200%200%201.28-.53v-2.39l.33-.026c1.542-.125%202.67-1.433%202.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49%2049%200%200%200%2015.75%207.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/chat-bubble-left-right-solid.svg?color=%231a73e8&size=48
