bubbles icon

bubbles-rounded from Material Symbols Light by Google · Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: bubbles-rounded
Set: Material Symbols Light
Style: Rounded
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: bubbles-outline-rounded

2 other variants in Material Symbols Light

bubbles bubbles-sharp

The same icon in other sets

bubblesFluent Emoji bubblesFluent Emoji Flat bubblesFluent Emoji High Contrast bubblesHuge Icons bubblesLucide bubblesMaterial Symbols bubblesMyna UI Icons bubblesNoto Emoji bubblesOpenMoji bubblesTwitter Emoji

More ui actions icons from Material Symbols Light

Use the bubbles icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.196 13.27L9.37 9.46q-.16-.14-.162-.34q-.003-.202.162-.367q.16-.16.354-.16t.354.16l3.807 3.802v-2.437q0-.213.144-.357q.143-.143.356-.143q.214 0 .357.143t.143.357v3.342q0 .348-.23.578q-.229.23-.577.23h-3.342q-.214 0-.357-.143q-.144-.143-.144-.357t.144-.357t.357-.143zM18.577 19q-1.02 0-1.721-.702t-.702-1.721t.702-1.721t1.721-.702t1.721.702t.702 1.721t-.702 1.721t-1.721.702M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v4.615q0 .213-.143.357t-.357.143t-.357-.143T20 11.23V6.616q0-.27-.173-.443T19.385 6H4.615q-.269 0-.442.173T4 6.616v10.769q0 .269.173.442t.443.173h8.615q.213 0 .357.143t.143.357t-.143.357t-.357.143z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightBubblesRounded(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.196 13.27L9.37 9.46q-.16-.14-.162-.34q-.003-.202.162-.367q.16-.16.354-.16t.354.16l3.807 3.802v-2.437q0-.213.144-.357q.143-.143.356-.143q.214 0 .357.143t.143.357v3.342q0 .348-.23.578q-.229.23-.577.23h-3.342q-.214 0-.357-.143q-.144-.143-.144-.357t.144-.357t.357-.143zM18.577 19q-1.02 0-1.721-.702t-.702-1.721t.702-1.721t1.721-.702t1.721.702t.702 1.721t-.702 1.721t-1.721.702M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v4.615q0 .213-.143.357t-.357.143t-.357-.143T20 11.23V6.616q0-.27-.173-.443T19.385 6H4.615q-.269 0-.442.173T4 6.616v10.769q0 .269.173.442t.443.173h8.615q.213 0 .357.143t.143.357t-.143.357t-.357.143z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.196 13.27L9.37 9.46q-.16-.14-.162-.34q-.003-.202.162-.367q.16-.16.354-.16t.354.16l3.807 3.802v-2.437q0-.213.144-.357q.143-.143.356-.143q.214 0 .357.143t.143.357v3.342q0 .348-.23.578q-.229.23-.577.23h-3.342q-.214 0-.357-.143q-.144-.143-.144-.357t.144-.357t.357-.143zM18.577 19q-1.02 0-1.721-.702t-.702-1.721t.702-1.721t1.721-.702t1.721.702t.702 1.721t-.702 1.721t-1.721.702M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v4.615q0 .213-.143.357t-.357.143t-.357-.143T20 11.23V6.616q0-.27-.173-.443T19.385 6H4.615q-.269 0-.442.173T4 6.616v10.769q0 .269.173.442t.443.173h8.615q.213 0 .357.143t.143.357t-.143.357t-.357.143z"/></svg>
</template>

CSS

.icon-bubbles-rounded {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.196%2013.27L9.37%209.46q-.16-.14-.162-.34q-.003-.202.162-.367q.16-.16.354-.16t.354.16l3.807%203.802v-2.437q0-.213.144-.357q.143-.143.356-.143q.214%200%20.357.143t.143.357v3.342q0%20.348-.23.578q-.229.23-.577.23h-3.342q-.214%200-.357-.143q-.144-.143-.144-.357t.144-.357t.357-.143zM18.577%2019q-1.02%200-1.721-.702t-.702-1.721t.702-1.721t1.721-.702t1.721.702t.702%201.721t-.702%201.721t-1.721.702M4.616%2019q-.691%200-1.153-.462T3%2017.384V6.616q0-.691.463-1.153T4.615%205h14.77q.69%200%201.152.463T21%206.616v4.615q0%20.213-.143.357t-.357.143t-.357-.143T20%2011.23V6.616q0-.27-.173-.443T19.385%206H4.615q-.269%200-.442.173T4%206.616v10.769q0%20.269.173.442t.443.173h8.615q.213%200%20.357.143t.143.357t-.143.357t-.357.143z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.196%2013.27L9.37%209.46q-.16-.14-.162-.34q-.003-.202.162-.367q.16-.16.354-.16t.354.16l3.807%203.802v-2.437q0-.213.144-.357q.143-.143.356-.143q.214%200%20.357.143t.143.357v3.342q0%20.348-.23.578q-.229.23-.577.23h-3.342q-.214%200-.357-.143q-.144-.143-.144-.357t.144-.357t.357-.143zM18.577%2019q-1.02%200-1.721-.702t-.702-1.721t.702-1.721t1.721-.702t1.721.702t.702%201.721t-.702%201.721t-1.721.702M4.616%2019q-.691%200-1.153-.462T3%2017.384V6.616q0-.691.463-1.153T4.615%205h14.77q.69%200%201.152.463T21%206.616v4.615q0%20.213-.143.357t-.357.143t-.357-.143T20%2011.23V6.616q0-.27-.173-.443T19.385%206H4.615q-.269%200-.442.173T4%206.616v10.769q0%20.269.173.442t.443.173h8.615q.213%200%20.357.143t.143.357t-.143.357t-.357.143z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/bubbles-rounded.svg?color=%231a73e8&size=48