chatbubbles icon

chatbubbles-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.

Name: chatbubbles-outline
Set: IonIcons
Style: Outline
Viewbox: 512×512
License: MIT

2 other variants in IonIcons

Use the chatbubbles icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a34 34 0 0 1 2.1-3.1A162 162 0 0 0 464 215c.3-92.2-77.5-167-173.7-167c-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 0 0-3.7 34.2c0 92.3 74.8 169.1 171 169.1c15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.4 26.4 0 0 1 9.3-1.7a26 26 0 0 1 10.1 2l56.7 20.1a13.5 13.5 0 0 0 3.9 1a8 8 0 0 0 8-8a13 13 0 0 0-.5-2.7Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M66.46 232a146.23 146.23 0 0 0 6.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 0 0 2.71 7.68A8.17 8.17 0 0 0 72 464a7.3 7.3 0 0 0 2.91-.6l56.21-22a15.7 15.7 0 0 1 12 .2c18.94 7.38 39.88 12 60.83 12A159.2 159.2 0 0 0 284 432.11"/></svg>

React

import type { SVGProps } from "react";

export function IonChatbubblesOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="32" d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a34 34 0 0 1 2.1-3.1A162 162 0 0 0 464 215c.3-92.2-77.5-167-173.7-167c-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 0 0-3.7 34.2c0 92.3 74.8 169.1 171 169.1c15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.4 26.4 0 0 1 9.3-1.7a26 26 0 0 1 10.1 2l56.7 20.1a13.5 13.5 0 0 0 3.9 1a8 8 0 0 0 8-8a13 13 0 0 0-.5-2.7Z"/><path fill="none" stroke="currentColor" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="32" d="M66.46 232a146.23 146.23 0 0 0 6.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 0 0 2.71 7.68A8.17 8.17 0 0 0 72 464a7.3 7.3 0 0 0 2.91-.6l56.21-22a15.7 15.7 0 0 1 12 .2c18.94 7.38 39.88 12 60.83 12A159.2 159.2 0 0 0 284 432.11"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a34 34 0 0 1 2.1-3.1A162 162 0 0 0 464 215c.3-92.2-77.5-167-173.7-167c-83.9 0-153.9 57.1-170.3 132.9a160.7 160.7 0 0 0-3.7 34.2c0 92.3 74.8 169.1 171 169.1c15.3 0 35.9-4.6 47.2-7.7s22.5-7.2 25.4-8.3a26.4 26.4 0 0 1 9.3-1.7a26 26 0 0 1 10.1 2l56.7 20.1a13.5 13.5 0 0 0 3.9 1a8 8 0 0 0 8-8a13 13 0 0 0-.5-2.7Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M66.46 232a146.23 146.23 0 0 0 6.39 152.67c2.31 3.49 3.61 6.19 3.21 8s-11.93 61.87-11.93 61.87a8 8 0 0 0 2.71 7.68A8.17 8.17 0 0 0 72 464a7.3 7.3 0 0 0 2.91-.6l56.21-22a15.7 15.7 0 0 1 12 .2c18.94 7.38 39.88 12 60.83 12A159.2 159.2 0 0 0 284 432.11"/></svg>
</template>

CSS

.icon-chatbubbles-outline {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M431%20320.6c-1-3.6%201.2-8.6%203.3-12.2a34%2034%200%200%201%202.1-3.1A162%20162%200%200%200%20464%20215c.3-92.2-77.5-167-173.7-167c-83.9%200-153.9%2057.1-170.3%20132.9a160.7%20160.7%200%200%200-3.7%2034.2c0%2092.3%2074.8%20169.1%20171%20169.1c15.3%200%2035.9-4.6%2047.2-7.7s22.5-7.2%2025.4-8.3a26.4%2026.4%200%200%201%209.3-1.7a26%2026%200%200%201%2010.1%202l56.7%2020.1a13.5%2013.5%200%200%200%203.9%201a8%208%200%200%200%208-8a13%2013%200%200%200-.5-2.7Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M66.46%20232a146.23%20146.23%200%200%200%206.39%20152.67c2.31%203.49%203.61%206.19%203.21%208s-11.93%2061.87-11.93%2061.87a8%208%200%200%200%202.71%207.68A8.17%208.17%200%200%200%2072%20464a7.3%207.3%200%200%200%202.91-.6l56.21-22a15.7%2015.7%200%200%201%2012%20.2c18.94%207.38%2039.88%2012%2060.83%2012A159.2%20159.2%200%200%200%20284%20432.11%22%2F%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%20512%20512%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M431%20320.6c-1-3.6%201.2-8.6%203.3-12.2a34%2034%200%200%201%202.1-3.1A162%20162%200%200%200%20464%20215c.3-92.2-77.5-167-173.7-167c-83.9%200-153.9%2057.1-170.3%20132.9a160.7%20160.7%200%200%200-3.7%2034.2c0%2092.3%2074.8%20169.1%20171%20169.1c15.3%200%2035.9-4.6%2047.2-7.7s22.5-7.2%2025.4-8.3a26.4%2026.4%200%200%201%209.3-1.7a26%2026%200%200%201%2010.1%202l56.7%2020.1a13.5%2013.5%200%200%200%203.9%201a8%208%200%200%200%208-8a13%2013%200%200%200-.5-2.7Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M66.46%20232a146.23%20146.23%200%200%200%206.39%20152.67c2.31%203.49%203.61%206.19%203.21%208s-11.93%2061.87-11.93%2061.87a8%208%200%200%200%202.71%207.68A8.17%208.17%200%200%200%2072%20464a7.3%207.3%200%200%200%202.91-.6l56.21-22a15.7%2015.7%200%200%201%2012%20.2c18.94%207.38%2039.88%2012%2060.83%2012A159.2%20159.2%200%200%200%20284%20432.11%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/chatbubbles-outline.svg?color=%231a73e8&size=48