openchat logo
openchat-color from LobeHub AI Icons by LobeHub · Color · MIT Free for personal and commercial use.
- Name
- openchat-color
- Set
- LobeHub AI Icons
- Style
- Color
- Viewbox
- 24×24
- License
- MIT
2 other variants in LobeHub AI Icons
Use the openchat logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID)" d="M2.169 8.748l.1-.695C2.513 6.4 3.19 4.94 4.262 3.65a9.76 9.76 0 013.383-2.646C8.812.454 10.04.102 11.35.022c1.136-.07 2.241.029 3.333.324a8.45 8.45 0 011.665.644c.695.358.793.911.229 1.438a22.639 22.639 0 01-4.309 3.188 23.433 23.433 0 01-3.986 1.786 27.94 27.94 0 01-3.64.957c-.449.088-1.274.218-2.474.39z"/><path fill="url(#svgID1)" d="M4.148 9.181c1.759.41 3.544.66 5.343.789 1.572.113 3.15.11 4.727.036 1.571-.073 3.118-.286 4.658-.569.536-.098 1.055-.262 1.613-.247 1.145.029 1.934.635 2.208 1.715.395 1.551.415 3.105-.007 4.646a9.535 9.535 0 01-2.305 4.101 11.066 11.066 0 01-4.22 2.786c-1.715.64-3.493.846-5.32.68a8.637 8.637 0 01-1.4-.224.36.36 0 00-.292.053C7.93 23.669 6.6 24.01 5.176 24a7.643 7.643 0 01-1.198-.114c-.77-.126-1.044-.823-.568-1.43.26-.33.496-.67.642-1.064.067-.18.13-.361.184-.546a.698.698 0 00-.197-.75c-.886-.861-1.628-1.83-2.143-2.946-1.078-2.334-1.19-4.717-.302-7.136a9.826 9.826 0 01.584-1.275l.072.011c.921.207 1.554.351 1.898.431z"/><defs><linearGradient id="svgID" x1="34.383%" x2="57.623%" y1="37.415%" y2="59.204%"><stop offset="0%" stop-color="#6595f1"/><stop offset="100%" stop-color="#336bd7"/></linearGradient><linearGradient id="svgID1" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#6595f1"/><stop offset="100%" stop-color="#336bd7"/></linearGradient></defs></svg>
React
import type { SVGProps } from "react";
export function LobehubOpenchatColor(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID)" d="M2.169 8.748l.1-.695C2.513 6.4 3.19 4.94 4.262 3.65a9.76 9.76 0 013.383-2.646C8.812.454 10.04.102 11.35.022c1.136-.07 2.241.029 3.333.324a8.45 8.45 0 011.665.644c.695.358.793.911.229 1.438a22.639 22.639 0 01-4.309 3.188 23.433 23.433 0 01-3.986 1.786 27.94 27.94 0 01-3.64.957c-.449.088-1.274.218-2.474.39z"/><path fill="url(#svgID1)" d="M4.148 9.181c1.759.41 3.544.66 5.343.789 1.572.113 3.15.11 4.727.036 1.571-.073 3.118-.286 4.658-.569.536-.098 1.055-.262 1.613-.247 1.145.029 1.934.635 2.208 1.715.395 1.551.415 3.105-.007 4.646a9.535 9.535 0 01-2.305 4.101 11.066 11.066 0 01-4.22 2.786c-1.715.64-3.493.846-5.32.68a8.637 8.637 0 01-1.4-.224.36.36 0 00-.292.053C7.93 23.669 6.6 24.01 5.176 24a7.643 7.643 0 01-1.198-.114c-.77-.126-1.044-.823-.568-1.43.26-.33.496-.67.642-1.064.067-.18.13-.361.184-.546a.698.698 0 00-.197-.75c-.886-.861-1.628-1.83-2.143-2.946-1.078-2.334-1.19-4.717-.302-7.136a9.826 9.826 0 01.584-1.275l.072.011c.921.207 1.554.351 1.898.431z"/><defs><linearGradient id="svgID" x1="34.383%" x2="57.623%" y1="37.415%" y2="59.204%"><stop offset="0%" stopColor="#6595f1"/><stop offset="100%" stopColor="#336bd7"/></linearGradient><linearGradient id="svgID1" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stopColor="#6595f1"/><stop offset="100%" stopColor="#336bd7"/></linearGradient></defs></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID)" d="M2.169 8.748l.1-.695C2.513 6.4 3.19 4.94 4.262 3.65a9.76 9.76 0 013.383-2.646C8.812.454 10.04.102 11.35.022c1.136-.07 2.241.029 3.333.324a8.45 8.45 0 011.665.644c.695.358.793.911.229 1.438a22.639 22.639 0 01-4.309 3.188 23.433 23.433 0 01-3.986 1.786 27.94 27.94 0 01-3.64.957c-.449.088-1.274.218-2.474.39z"/><path fill="url(#svgID1)" d="M4.148 9.181c1.759.41 3.544.66 5.343.789 1.572.113 3.15.11 4.727.036 1.571-.073 3.118-.286 4.658-.569.536-.098 1.055-.262 1.613-.247 1.145.029 1.934.635 2.208 1.715.395 1.551.415 3.105-.007 4.646a9.535 9.535 0 01-2.305 4.101 11.066 11.066 0 01-4.22 2.786c-1.715.64-3.493.846-5.32.68a8.637 8.637 0 01-1.4-.224.36.36 0 00-.292.053C7.93 23.669 6.6 24.01 5.176 24a7.643 7.643 0 01-1.198-.114c-.77-.126-1.044-.823-.568-1.43.26-.33.496-.67.642-1.064.067-.18.13-.361.184-.546a.698.698 0 00-.197-.75c-.886-.861-1.628-1.83-2.143-2.946-1.078-2.334-1.19-4.717-.302-7.136a9.826 9.826 0 01.584-1.275l.072.011c.921.207 1.554.351 1.898.431z"/><defs><linearGradient id="svgID" x1="34.383%" x2="57.623%" y1="37.415%" y2="59.204%"><stop offset="0%" stop-color="#6595f1"/><stop offset="100%" stop-color="#336bd7"/></linearGradient><linearGradient id="svgID1" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#6595f1"/><stop offset="100%" stop-color="#336bd7"/></linearGradient></defs></svg> </template>
CSS
.icon-openchat-color {
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%22url(%23svgID)%22%20d%3D%22M2.169%208.748l.1-.695C2.513%206.4%203.19%204.94%204.262%203.65a9.76%209.76%200%20013.383-2.646C8.812.454%2010.04.102%2011.35.022c1.136-.07%202.241.029%203.333.324a8.45%208.45%200%20011.665.644c.695.358.793.911.229%201.438a22.639%2022.639%200%2001-4.309%203.188%2023.433%2023.433%200%2001-3.986%201.786%2027.94%2027.94%200%2001-3.64.957c-.449.088-1.274.218-2.474.39z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID1)%22%20d%3D%22M4.148%209.181c1.759.41%203.544.66%205.343.789%201.572.113%203.15.11%204.727.036%201.571-.073%203.118-.286%204.658-.569.536-.098%201.055-.262%201.613-.247%201.145.029%201.934.635%202.208%201.715.395%201.551.415%203.105-.007%204.646a9.535%209.535%200%2001-2.305%204.101%2011.066%2011.066%200%2001-4.22%202.786c-1.715.64-3.493.846-5.32.68a8.637%208.637%200%2001-1.4-.224.36.36%200%2000-.292.053C7.93%2023.669%206.6%2024.01%205.176%2024a7.643%207.643%200%2001-1.198-.114c-.77-.126-1.044-.823-.568-1.43.26-.33.496-.67.642-1.064.067-.18.13-.361.184-.546a.698.698%200%2000-.197-.75c-.886-.861-1.628-1.83-2.143-2.946-1.078-2.334-1.19-4.717-.302-7.136a9.826%209.826%200%2001.584-1.275l.072.011c.921.207%201.554.351%201.898.431z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID%22%20x1%3D%2234.383%25%22%20x2%3D%2257.623%25%22%20y1%3D%2237.415%25%22%20y2%3D%2259.204%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%236595f1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23336bd7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID1%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%236595f1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23336bd7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%22url(%23svgID)%22%20d%3D%22M2.169%208.748l.1-.695C2.513%206.4%203.19%204.94%204.262%203.65a9.76%209.76%200%20013.383-2.646C8.812.454%2010.04.102%2011.35.022c1.136-.07%202.241.029%203.333.324a8.45%208.45%200%20011.665.644c.695.358.793.911.229%201.438a22.639%2022.639%200%2001-4.309%203.188%2023.433%2023.433%200%2001-3.986%201.786%2027.94%2027.94%200%2001-3.64.957c-.449.088-1.274.218-2.474.39z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgID1)%22%20d%3D%22M4.148%209.181c1.759.41%203.544.66%205.343.789%201.572.113%203.15.11%204.727.036%201.571-.073%203.118-.286%204.658-.569.536-.098%201.055-.262%201.613-.247%201.145.029%201.934.635%202.208%201.715.395%201.551.415%203.105-.007%204.646a9.535%209.535%200%2001-2.305%204.101%2011.066%2011.066%200%2001-4.22%202.786c-1.715.64-3.493.846-5.32.68a8.637%208.637%200%2001-1.4-.224.36.36%200%2000-.292.053C7.93%2023.669%206.6%2024.01%205.176%2024a7.643%207.643%200%2001-1.198-.114c-.77-.126-1.044-.823-.568-1.43.26-.33.496-.67.642-1.064.067-.18.13-.361.184-.546a.698.698%200%2000-.197-.75c-.886-.861-1.628-1.83-2.143-2.946-1.078-2.334-1.19-4.717-.302-7.136a9.826%209.826%200%2001.584-1.275l.072.011c.921.207%201.554.351%201.898.431z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID%22%20x1%3D%2234.383%25%22%20x2%3D%2257.623%25%22%20y1%3D%2237.415%25%22%20y2%3D%2259.204%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%236595f1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23336bd7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgID1%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%236595f1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23336bd7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/openchat-color.svg?color=%231a73e8&size=48
