chat bubble text icon
chat-bubble-text-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.
- Name
- chat-bubble-text-fill
- Set
- Framework7 Icons
- Style
- Fill
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Related icons in Framework7 Icons
Use the chat bubble text icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M2.17 25.56C2.17 13.59 13.733 3.885 28 3.885c14.265 0 25.83 9.704 25.83 21.673c0 11.971-11.565 21.676-25.83 21.676c-1.549 0-3.063-.115-4.537-.333l-.009-.002c-3.489-.832-4.966 3.048-12.917 5.06c-1.633.414-1.83.002-.579-1.325c2.264-2.396 4.446-6.302 2.178-7.972c-.07-.04-.944-.644-1.277-.888c-5.33-3.97-8.689-9.767-8.689-16.216M40.102 16H16.453C15.61 16 15 16.633 15 17.43c0 .82.61 1.453 1.453 1.453h23.649a1.43 1.43 0 0 0 1.453-1.453c0-.797-.633-1.43-1.453-1.43m0 8.18H16.453c-.844 0-1.453.656-1.453 1.476c0 .797.61 1.407 1.453 1.407h23.649c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476M31.758 32H16.453C15.61 32 15 32.656 15 33.477c0 .796.61 1.406 1.453 1.406h15.305c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476"/></svg>
React
import type { SVGProps } from "react";
export function F7ChatBubbleTextFill(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="M2.17 25.56C2.17 13.59 13.733 3.885 28 3.885c14.265 0 25.83 9.704 25.83 21.673c0 11.971-11.565 21.676-25.83 21.676c-1.549 0-3.063-.115-4.537-.333l-.009-.002c-3.489-.832-4.966 3.048-12.917 5.06c-1.633.414-1.83.002-.579-1.325c2.264-2.396 4.446-6.302 2.178-7.972c-.07-.04-.944-.644-1.277-.888c-5.33-3.97-8.689-9.767-8.689-16.216M40.102 16H16.453C15.61 16 15 16.633 15 17.43c0 .82.61 1.453 1.453 1.453h23.649a1.43 1.43 0 0 0 1.453-1.453c0-.797-.633-1.43-1.453-1.43m0 8.18H16.453c-.844 0-1.453.656-1.453 1.476c0 .797.61 1.407 1.453 1.407h23.649c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476M31.758 32H16.453C15.61 32 15 32.656 15 33.477c0 .796.61 1.406 1.453 1.406h15.305c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M2.17 25.56C2.17 13.59 13.733 3.885 28 3.885c14.265 0 25.83 9.704 25.83 21.673c0 11.971-11.565 21.676-25.83 21.676c-1.549 0-3.063-.115-4.537-.333l-.009-.002c-3.489-.832-4.966 3.048-12.917 5.06c-1.633.414-1.83.002-.579-1.325c2.264-2.396 4.446-6.302 2.178-7.972c-.07-.04-.944-.644-1.277-.888c-5.33-3.97-8.689-9.767-8.689-16.216M40.102 16H16.453C15.61 16 15 16.633 15 17.43c0 .82.61 1.453 1.453 1.453h23.649a1.43 1.43 0 0 0 1.453-1.453c0-.797-.633-1.43-1.453-1.43m0 8.18H16.453c-.844 0-1.453.656-1.453 1.476c0 .797.61 1.407 1.453 1.407h23.649c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476M31.758 32H16.453C15.61 32 15 32.656 15 33.477c0 .796.61 1.406 1.453 1.406h15.305c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476"/></svg> </template>
CSS
.icon-chat-bubble-text-fill {
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%22M2.17%2025.56C2.17%2013.59%2013.733%203.885%2028%203.885c14.265%200%2025.83%209.704%2025.83%2021.673c0%2011.971-11.565%2021.676-25.83%2021.676c-1.549%200-3.063-.115-4.537-.333l-.009-.002c-3.489-.832-4.966%203.048-12.917%205.06c-1.633.414-1.83.002-.579-1.325c2.264-2.396%204.446-6.302%202.178-7.972c-.07-.04-.944-.644-1.277-.888c-5.33-3.97-8.689-9.767-8.689-16.216M40.102%2016H16.453C15.61%2016%2015%2016.633%2015%2017.43c0%20.82.61%201.453%201.453%201.453h23.649a1.43%201.43%200%200%200%201.453-1.453c0-.797-.633-1.43-1.453-1.43m0%208.18H16.453c-.844%200-1.453.656-1.453%201.476c0%20.797.61%201.407%201.453%201.407h23.649c.82%200%201.453-.61%201.453-1.407c0-.82-.633-1.476-1.453-1.476M31.758%2032H16.453C15.61%2032%2015%2032.656%2015%2033.477c0%20.796.61%201.406%201.453%201.406h15.305c.82%200%201.453-.61%201.453-1.407c0-.82-.633-1.476-1.453-1.476%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%22M2.17%2025.56C2.17%2013.59%2013.733%203.885%2028%203.885c14.265%200%2025.83%209.704%2025.83%2021.673c0%2011.971-11.565%2021.676-25.83%2021.676c-1.549%200-3.063-.115-4.537-.333l-.009-.002c-3.489-.832-4.966%203.048-12.917%205.06c-1.633.414-1.83.002-.579-1.325c2.264-2.396%204.446-6.302%202.178-7.972c-.07-.04-.944-.644-1.277-.888c-5.33-3.97-8.689-9.767-8.689-16.216M40.102%2016H16.453C15.61%2016%2015%2016.633%2015%2017.43c0%20.82.61%201.453%201.453%201.453h23.649a1.43%201.43%200%200%200%201.453-1.453c0-.797-.633-1.43-1.453-1.43m0%208.18H16.453c-.844%200-1.453.656-1.453%201.476c0%20.797.61%201.407%201.453%201.407h23.649c.82%200%201.453-.61%201.453-1.407c0-.82-.633-1.476-1.453-1.476M31.758%2032H16.453C15.61%2032%2015%2032.656%2015%2033.477c0%20.796.61%201.406%201.453%201.406h15.305c.82%200%201.453-.61%201.453-1.407c0-.82-.633-1.476-1.453-1.476%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/chat-bubble-text-fill.svg?color=%231a73e8&size=48
