captions bubble icon

captions-bubble from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name: captions-bubble
Set: Framework7 Icons
Style: Outline
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

Use the captions 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.102Zm-4.218-21.281h9.68c.75 0 1.336-.586 1.336-1.36c0-.726-.586-1.359-1.336-1.359h-9.68c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m14.508 0H43c.75 0 1.36-.586 1.36-1.36c0-.726-.61-1.359-1.36-1.359H27.836c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m-14.508 6.14h3.985a1.34 1.34 0 0 0 1.359-1.336c0-.773-.61-1.382-1.36-1.382h-3.984c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335m8.836 0h11.742a1.32 1.32 0 0 0 1.336-1.336c0-.773-.586-1.382-1.336-1.382H22.164c-.75 0-1.36.61-1.36 1.383c0 .75.61 1.335 1.36 1.335m16.57 0H43c.75 0 1.36-.586 1.36-1.336c0-.773-.61-1.382-1.36-1.382h-4.266c-.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 F7CaptionsBubble(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.102Zm-4.218-21.281h9.68c.75 0 1.336-.586 1.336-1.36c0-.726-.586-1.359-1.336-1.359h-9.68c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m14.508 0H43c.75 0 1.36-.586 1.36-1.36c0-.726-.61-1.359-1.36-1.359H27.836c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m-14.508 6.14h3.985a1.34 1.34 0 0 0 1.359-1.336c0-.773-.61-1.382-1.36-1.382h-3.984c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335m8.836 0h11.742a1.32 1.32 0 0 0 1.336-1.336c0-.773-.586-1.382-1.336-1.382H22.164c-.75 0-1.36.61-1.36 1.383c0 .75.61 1.335 1.36 1.335m16.57 0H43c.75 0 1.36-.586 1.36-1.336c0-.773-.61-1.382-1.36-1.382h-4.266c-.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.102Zm-4.218-21.281h9.68c.75 0 1.336-.586 1.336-1.36c0-.726-.586-1.359-1.336-1.359h-9.68c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m14.508 0H43c.75 0 1.36-.586 1.36-1.36c0-.726-.61-1.359-1.36-1.359H27.836c-.75 0-1.336.633-1.336 1.36c0 .773.586 1.359 1.336 1.359m-14.508 6.14h3.985a1.34 1.34 0 0 0 1.359-1.336c0-.773-.61-1.382-1.36-1.382h-3.984c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335m8.836 0h11.742a1.32 1.32 0 0 0 1.336-1.336c0-.773-.586-1.382-1.336-1.382H22.164c-.75 0-1.36.61-1.36 1.383c0 .75.61 1.335 1.36 1.335m16.57 0H43c.75 0 1.36-.586 1.36-1.336c0-.773-.61-1.382-1.36-1.382h-4.266c-.75 0-1.336.61-1.336 1.383c0 .75.586 1.335 1.336 1.335"/></svg>
</template>

CSS

.icon-captions-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.102Zm-4.218-21.281h9.68c.75%200%201.336-.586%201.336-1.36c0-.726-.586-1.359-1.336-1.359h-9.68c-.75%200-1.336.633-1.336%201.36c0%20.773.586%201.359%201.336%201.359m14.508%200H43c.75%200%201.36-.586%201.36-1.36c0-.726-.61-1.359-1.36-1.359H27.836c-.75%200-1.336.633-1.336%201.36c0%20.773.586%201.359%201.336%201.359m-14.508%206.14h3.985a1.34%201.34%200%200%200%201.359-1.336c0-.773-.61-1.382-1.36-1.382h-3.984c-.75%200-1.336.61-1.336%201.383c0%20.75.586%201.335%201.336%201.335m8.836%200h11.742a1.32%201.32%200%200%200%201.336-1.336c0-.773-.586-1.382-1.336-1.382H22.164c-.75%200-1.36.61-1.36%201.383c0%20.75.61%201.335%201.36%201.335m16.57%200H43c.75%200%201.36-.586%201.36-1.336c0-.773-.61-1.382-1.36-1.382h-4.266c-.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.102Zm-4.218-21.281h9.68c.75%200%201.336-.586%201.336-1.36c0-.726-.586-1.359-1.336-1.359h-9.68c-.75%200-1.336.633-1.336%201.36c0%20.773.586%201.359%201.336%201.359m14.508%200H43c.75%200%201.36-.586%201.36-1.36c0-.726-.61-1.359-1.36-1.359H27.836c-.75%200-1.336.633-1.336%201.36c0%20.773.586%201.359%201.336%201.359m-14.508%206.14h3.985a1.34%201.34%200%200%200%201.359-1.336c0-.773-.61-1.382-1.36-1.382h-3.984c-.75%200-1.336.61-1.336%201.383c0%20.75.586%201.335%201.336%201.335m8.836%200h11.742a1.32%201.32%200%200%200%201.336-1.336c0-.773-.586-1.382-1.336-1.382H22.164c-.75%200-1.36.61-1.36%201.383c0%20.75.61%201.335%201.36%201.335m16.57%200H43c.75%200%201.36-.586%201.36-1.336c0-.773-.61-1.382-1.36-1.382h-4.266c-.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/captions-bubble.svg?color=%231a73e8&size=48