text bubble icon
text-bubble from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- text-bubble
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Related icons in Framework7 Icons
Use the text bubble icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M16.586 52.246c1.172 0 1.969-.61 3.375-1.875l8.11-7.195h15.023c6.984 0 10.734-3.867 10.734-10.735V14.488c0-6.867-3.75-10.734-10.734-10.734H12.906c-6.96 0-10.734 3.844-10.734 10.734v17.953c0 6.891 3.773 10.735 10.734 10.735h1.125v6.093c0 1.805.938 2.977 2.555 2.977m.96-4.289V41.16c0-1.265-.468-1.758-1.757-1.758h-2.86c-4.757 0-6.984-2.414-6.984-6.984v-17.93c0-4.57 2.227-6.96 6.985-6.96h30.164c4.734 0 6.96 2.39 6.96 6.96v17.93c0 4.57-2.226 6.984-6.96 6.984H27.906c-1.289 0-1.968.188-2.86 1.102ZM16.07 17.512h23.86c.75 0 1.36-.586 1.36-1.36c0-.75-.61-1.336-1.36-1.336H16.07a1.32 1.32 0 0 0-1.336 1.336c0 .774.586 1.36 1.336 1.36m0 7.617h23.86c.75 0 1.36-.586 1.36-1.36c0-.726-.61-1.359-1.36-1.359H16.07c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m0 7.64h15.516c.75 0 1.36-.585 1.36-1.335c0-.774-.61-1.383-1.36-1.383H16.07c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335"/></svg>
React
import type { SVGProps } from "react";
export function F7TextBubble(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M16.586 52.246c1.172 0 1.969-.61 3.375-1.875l8.11-7.195h15.023c6.984 0 10.734-3.867 10.734-10.735V14.488c0-6.867-3.75-10.734-10.734-10.734H12.906c-6.96 0-10.734 3.844-10.734 10.734v17.953c0 6.891 3.773 10.735 10.734 10.735h1.125v6.093c0 1.805.938 2.977 2.555 2.977m.96-4.289V41.16c0-1.265-.468-1.758-1.757-1.758h-2.86c-4.757 0-6.984-2.414-6.984-6.984v-17.93c0-4.57 2.227-6.96 6.985-6.96h30.164c4.734 0 6.96 2.39 6.96 6.96v17.93c0 4.57-2.226 6.984-6.96 6.984H27.906c-1.289 0-1.968.188-2.86 1.102ZM16.07 17.512h23.86c.75 0 1.36-.586 1.36-1.36c0-.75-.61-1.336-1.36-1.336H16.07a1.32 1.32 0 0 0-1.336 1.336c0 .774.586 1.36 1.336 1.36m0 7.617h23.86c.75 0 1.36-.586 1.36-1.36c0-.726-.61-1.359-1.36-1.359H16.07c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m0 7.64h15.516c.75 0 1.36-.585 1.36-1.335c0-.774-.61-1.383-1.36-1.383H16.07c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M16.586 52.246c1.172 0 1.969-.61 3.375-1.875l8.11-7.195h15.023c6.984 0 10.734-3.867 10.734-10.735V14.488c0-6.867-3.75-10.734-10.734-10.734H12.906c-6.96 0-10.734 3.844-10.734 10.734v17.953c0 6.891 3.773 10.735 10.734 10.735h1.125v6.093c0 1.805.938 2.977 2.555 2.977m.96-4.289V41.16c0-1.265-.468-1.758-1.757-1.758h-2.86c-4.757 0-6.984-2.414-6.984-6.984v-17.93c0-4.57 2.227-6.96 6.985-6.96h30.164c4.734 0 6.96 2.39 6.96 6.96v17.93c0 4.57-2.226 6.984-6.96 6.984H27.906c-1.289 0-1.968.188-2.86 1.102ZM16.07 17.512h23.86c.75 0 1.36-.586 1.36-1.36c0-.75-.61-1.336-1.36-1.336H16.07a1.32 1.32 0 0 0-1.336 1.336c0 .774.586 1.36 1.336 1.36m0 7.617h23.86c.75 0 1.36-.586 1.36-1.36c0-.726-.61-1.359-1.36-1.359H16.07c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m0 7.64h15.516c.75 0 1.36-.585 1.36-1.335c0-.774-.61-1.383-1.36-1.383H16.07c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335"/></svg> </template>
CSS
.icon-text-bubble {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.586%2052.246c1.172%200%201.969-.61%203.375-1.875l8.11-7.195h15.023c6.984%200%2010.734-3.867%2010.734-10.735V14.488c0-6.867-3.75-10.734-10.734-10.734H12.906c-6.96%200-10.734%203.844-10.734%2010.734v17.953c0%206.891%203.773%2010.735%2010.734%2010.735h1.125v6.093c0%201.805.938%202.977%202.555%202.977m.96-4.289V41.16c0-1.265-.468-1.758-1.757-1.758h-2.86c-4.757%200-6.984-2.414-6.984-6.984v-17.93c0-4.57%202.227-6.96%206.985-6.96h30.164c4.734%200%206.96%202.39%206.96%206.96v17.93c0%204.57-2.226%206.984-6.96%206.984H27.906c-1.289%200-1.968.188-2.86%201.102ZM16.07%2017.512h23.86c.75%200%201.36-.586%201.36-1.36c0-.75-.61-1.336-1.36-1.336H16.07a1.32%201.32%200%200%200-1.336%201.336c0%20.774.586%201.36%201.336%201.36m0%207.617h23.86c.75%200%201.36-.586%201.36-1.36c0-.726-.61-1.359-1.36-1.359H16.07c-.75%200-1.336.633-1.336%201.36c0%20.773.586%201.359%201.336%201.359m0%207.64h15.516c.75%200%201.36-.585%201.36-1.335c0-.774-.61-1.383-1.36-1.383H16.07c-.75%200-1.336.61-1.336%201.383c0%20.75.586%201.335%201.336%201.335%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.586%2052.246c1.172%200%201.969-.61%203.375-1.875l8.11-7.195h15.023c6.984%200%2010.734-3.867%2010.734-10.735V14.488c0-6.867-3.75-10.734-10.734-10.734H12.906c-6.96%200-10.734%203.844-10.734%2010.734v17.953c0%206.891%203.773%2010.735%2010.734%2010.735h1.125v6.093c0%201.805.938%202.977%202.555%202.977m.96-4.289V41.16c0-1.265-.468-1.758-1.757-1.758h-2.86c-4.757%200-6.984-2.414-6.984-6.984v-17.93c0-4.57%202.227-6.96%206.985-6.96h30.164c4.734%200%206.96%202.39%206.96%206.96v17.93c0%204.57-2.226%206.984-6.96%206.984H27.906c-1.289%200-1.968.188-2.86%201.102ZM16.07%2017.512h23.86c.75%200%201.36-.586%201.36-1.36c0-.75-.61-1.336-1.36-1.336H16.07a1.32%201.32%200%200%200-1.336%201.336c0%20.774.586%201.36%201.336%201.36m0%207.617h23.86c.75%200%201.36-.586%201.36-1.36c0-.726-.61-1.359-1.36-1.359H16.07c-.75%200-1.336.633-1.336%201.36c0%20.773.586%201.359%201.336%201.359m0%207.64h15.516c.75%200%201.36-.585%201.36-1.335c0-.774-.61-1.383-1.36-1.383H16.07c-.75%200-1.336.61-1.336%201.383c0%20.75.586%201.335%201.336%201.335%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/text-bubble.svg?color=%231a73e8&size=48
