chat square unread icon

chat-square-unread-broken from Solar by 480 Design · Broken · Messages · CC-BY-4.0 Attribution required.

Name
chat-square-unread-broken
Set
Solar
Style
Broken
Category
Messages
Viewbox
24×24
License
CC BY 4.0
Aliases
chat-unread-broken

5 other variants in Solar

More messages icons from Solar

Use the chat square unread icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M22 10.5V11.5C22 13.8297 22 14.9946 21.6194 15.9134C21.1119 17.1386 20.1386 18.1119 18.9134 18.6194C18.2531 18.8929 17.4658 18.9698 16.2104 18.9915C15.3601 19.0061 14.9349 19.0134 14.5972 19.2098C14.2595 19.4062 14.0492 19.7615 13.6288 20.4718L13.0867 21.3877C12.6035 22.204 11.3965 22.204 10.9133 21.3877L10.3712 20.4718C9.95074 19.7614 9.7405 19.4063 9.4028 19.2098C9.06511 19.0134 8.63994 19.0061 7.78959 18.9915C6.53423 18.9698 5.7469 18.8929 5.0866 18.6194C3.86146 18.1119 2.88809 17.1386 2.38062 15.9134"/><path stroke-linecap="round" d="M13.5 2H10.5C7.22657 2 5.58985 2 4.38751 2.7368C3.71473 3.14908 3.14908 3.71473 2.7368 4.38751C2 5.58985 2 7.22657 2 10.5"/><circle cx="19" cy="5" r="3"/></g></svg>

React

import type { SVGProps } from "react";

export function SolarChatSquareUnreadBroken(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path strokeLinecap="round" d="M22 10.5V11.5C22 13.8297 22 14.9946 21.6194 15.9134C21.1119 17.1386 20.1386 18.1119 18.9134 18.6194C18.2531 18.8929 17.4658 18.9698 16.2104 18.9915C15.3601 19.0061 14.9349 19.0134 14.5972 19.2098C14.2595 19.4062 14.0492 19.7615 13.6288 20.4718L13.0867 21.3877C12.6035 22.204 11.3965 22.204 10.9133 21.3877L10.3712 20.4718C9.95074 19.7614 9.7405 19.4063 9.4028 19.2098C9.06511 19.0134 8.63994 19.0061 7.78959 18.9915C6.53423 18.9698 5.7469 18.8929 5.0866 18.6194C3.86146 18.1119 2.88809 17.1386 2.38062 15.9134"/><path strokeLinecap="round" d="M13.5 2H10.5C7.22657 2 5.58985 2 4.38751 2.7368C3.71473 3.14908 3.14908 3.71473 2.7368 4.38751C2 5.58985 2 7.22657 2 10.5"/><circle cx="19" cy="5" r="3"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M22 10.5V11.5C22 13.8297 22 14.9946 21.6194 15.9134C21.1119 17.1386 20.1386 18.1119 18.9134 18.6194C18.2531 18.8929 17.4658 18.9698 16.2104 18.9915C15.3601 19.0061 14.9349 19.0134 14.5972 19.2098C14.2595 19.4062 14.0492 19.7615 13.6288 20.4718L13.0867 21.3877C12.6035 22.204 11.3965 22.204 10.9133 21.3877L10.3712 20.4718C9.95074 19.7614 9.7405 19.4063 9.4028 19.2098C9.06511 19.0134 8.63994 19.0061 7.78959 18.9915C6.53423 18.9698 5.7469 18.8929 5.0866 18.6194C3.86146 18.1119 2.88809 17.1386 2.38062 15.9134"/><path stroke-linecap="round" d="M13.5 2H10.5C7.22657 2 5.58985 2 4.38751 2.7368C3.71473 3.14908 3.14908 3.71473 2.7368 4.38751C2 5.58985 2 7.22657 2 10.5"/><circle cx="19" cy="5" r="3"/></g></svg>
</template>

CSS

.icon-chat-square-unread-broken {
  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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M22%2010.5V11.5C22%2013.8297%2022%2014.9946%2021.6194%2015.9134C21.1119%2017.1386%2020.1386%2018.1119%2018.9134%2018.6194C18.2531%2018.8929%2017.4658%2018.9698%2016.2104%2018.9915C15.3601%2019.0061%2014.9349%2019.0134%2014.5972%2019.2098C14.2595%2019.4062%2014.0492%2019.7615%2013.6288%2020.4718L13.0867%2021.3877C12.6035%2022.204%2011.3965%2022.204%2010.9133%2021.3877L10.3712%2020.4718C9.95074%2019.7614%209.7405%2019.4063%209.4028%2019.2098C9.06511%2019.0134%208.63994%2019.0061%207.78959%2018.9915C6.53423%2018.9698%205.7469%2018.8929%205.0866%2018.6194C3.86146%2018.1119%202.88809%2017.1386%202.38062%2015.9134%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M13.5%202H10.5C7.22657%202%205.58985%202%204.38751%202.7368C3.71473%203.14908%203.14908%203.71473%202.7368%204.38751C2%205.58985%202%207.22657%202%2010.5%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M22%2010.5V11.5C22%2013.8297%2022%2014.9946%2021.6194%2015.9134C21.1119%2017.1386%2020.1386%2018.1119%2018.9134%2018.6194C18.2531%2018.8929%2017.4658%2018.9698%2016.2104%2018.9915C15.3601%2019.0061%2014.9349%2019.0134%2014.5972%2019.2098C14.2595%2019.4062%2014.0492%2019.7615%2013.6288%2020.4718L13.0867%2021.3877C12.6035%2022.204%2011.3965%2022.204%2010.9133%2021.3877L10.3712%2020.4718C9.95074%2019.7614%209.7405%2019.4063%209.4028%2019.2098C9.06511%2019.0134%208.63994%2019.0061%207.78959%2018.9915C6.53423%2018.9698%205.7469%2018.8929%205.0866%2018.6194C3.86146%2018.1119%202.88809%2017.1386%202.38062%2015.9134%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M13.5%202H10.5C7.22657%202%205.58985%202%204.38751%202.7368C3.71473%203.14908%203.14908%203.71473%202.7368%204.38751C2%205.58985%202%207.22657%202%2010.5%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/chat-square-unread-broken.svg?color=%231a73e8&size=48