chat logo
chat-background from Web3 Icons Branded by 0xa3k5 · Background · MIT Free for personal and commercial use.
- Name
- chat-background
- Set
- Web3 Icons Branded
- Style
- Background
- Viewbox
- 24×24
- License
- MIT
1 other variant in Web3 Icons Branded
The same logo in other sets
chatBootstrap IconschatBoxIcons v2chatBoxIcons v2 SolidchatCarbonchat-12-filledFluent UI System Iconschat-16Fluent UI System Color IconschatHuge IconschatHumbleiconschatMaterial Line IconschatMajesticonschatMaterial SymbolschatMaterial Symbols LightchatMaterial Design IconschatMyna UI Iconschat-16OcticonschatPhosphorchatPixelarticonschatTDesign Iconschat-outlineTeenyiconschatWeb3 IconschatUnicons
Use the chat logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd141)"><path fill="url(#SVGxqUs5dhH)" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.224 17.783a9.3 9.3 0 0 0 1.667-.268a4.6 4.6 0 0 0 2.082.134l.083-.006c.248 0 .573.142 1.048.442v-.493a.48.48 0 0 1 .249-.42q.31-.174.573-.394c.692-.578 1.082-1.348 1.082-2.165q0-.407-.127-.794a6.3 6.3 0 0 0 .502-1.207c.4.59.615 1.288.617 2.002c0 1.109-.523 2.143-1.428 2.9q-.227.189-.476.348v1.154c0 .397-.464.625-.791.389q-.465-.343-.96-.64a2.4 2.4 0 0 0-.295-.147q-.409.06-.831.06c-1.13 0-2.173-.334-2.995-.895M6.25 15.476C4.824 14.283 4 12.655 4 10.911C4 7.348 7.406 4.5 11.566 4.5s7.566 2.848 7.566 6.41c0 3.564-3.407 6.412-7.567 6.412a9 9 0 0 1-1.382-.107c-.196.046-.979.505-2.108 1.319c-.409.295-.989.01-.989-.487V16.08a7.4 7.4 0 0 1-.835-.604m3.96.526q.051 0 .104.008q.614.103 1.25.103c3.514 0 6.326-2.351 6.326-5.202s-2.812-5.2-6.325-5.2s-6.326 2.35-6.326 5.2c0 1.378.657 2.676 1.818 3.647q.44.367.957.657a.6.6 0 0 1 .312.524v1.135c.893-.591 1.48-.872 1.883-.872"/><path fill="#fff" d="M8.5 12a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3.25 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2M15 12a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/></g><defs><linearGradient id="SVGxqUs5dhH" x1="12" x2="12" y1="4.5" y2="19.501" gradientUnits="userSpaceOnUse"><stop stop-color="#1bc9fa"/><stop offset="1" stop-color="#1778f0"/></linearGradient><clipPath id="SVGHcSWxdhd141"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function TokenBrandedChatBackground(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"><g clipPath="url(#SVGHcSWxdhd141)"><path fill="url(#SVGxqUs5dhH)" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.224 17.783a9.3 9.3 0 0 0 1.667-.268a4.6 4.6 0 0 0 2.082.134l.083-.006c.248 0 .573.142 1.048.442v-.493a.48.48 0 0 1 .249-.42q.31-.174.573-.394c.692-.578 1.082-1.348 1.082-2.165q0-.407-.127-.794a6.3 6.3 0 0 0 .502-1.207c.4.59.615 1.288.617 2.002c0 1.109-.523 2.143-1.428 2.9q-.227.189-.476.348v1.154c0 .397-.464.625-.791.389q-.465-.343-.96-.64a2.4 2.4 0 0 0-.295-.147q-.409.06-.831.06c-1.13 0-2.173-.334-2.995-.895M6.25 15.476C4.824 14.283 4 12.655 4 10.911C4 7.348 7.406 4.5 11.566 4.5s7.566 2.848 7.566 6.41c0 3.564-3.407 6.412-7.567 6.412a9 9 0 0 1-1.382-.107c-.196.046-.979.505-2.108 1.319c-.409.295-.989.01-.989-.487V16.08a7.4 7.4 0 0 1-.835-.604m3.96.526q.051 0 .104.008q.614.103 1.25.103c3.514 0 6.326-2.351 6.326-5.202s-2.812-5.2-6.325-5.2s-6.326 2.35-6.326 5.2c0 1.378.657 2.676 1.818 3.647q.44.367.957.657a.6.6 0 0 1 .312.524v1.135c.893-.591 1.48-.872 1.883-.872"/><path fill="#fff" d="M8.5 12a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3.25 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2M15 12a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/></g><defs><linearGradient id="SVGxqUs5dhH" x1="12" x2="12" y1="4.5" y2="19.501" gradientUnits="userSpaceOnUse"><stop stopColor="#1bc9fa"/><stop offset="1" stopColor="#1778f0"/></linearGradient><clipPath id="SVGHcSWxdhd141"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><g clip-path="url(#SVGHcSWxdhd141)"><path fill="url(#SVGxqUs5dhH)" d="M24 0H0v24h24z"/><path fill="#fff" d="M12.224 17.783a9.3 9.3 0 0 0 1.667-.268a4.6 4.6 0 0 0 2.082.134l.083-.006c.248 0 .573.142 1.048.442v-.493a.48.48 0 0 1 .249-.42q.31-.174.573-.394c.692-.578 1.082-1.348 1.082-2.165q0-.407-.127-.794a6.3 6.3 0 0 0 .502-1.207c.4.59.615 1.288.617 2.002c0 1.109-.523 2.143-1.428 2.9q-.227.189-.476.348v1.154c0 .397-.464.625-.791.389q-.465-.343-.96-.64a2.4 2.4 0 0 0-.295-.147q-.409.06-.831.06c-1.13 0-2.173-.334-2.995-.895M6.25 15.476C4.824 14.283 4 12.655 4 10.911C4 7.348 7.406 4.5 11.566 4.5s7.566 2.848 7.566 6.41c0 3.564-3.407 6.412-7.567 6.412a9 9 0 0 1-1.382-.107c-.196.046-.979.505-2.108 1.319c-.409.295-.989.01-.989-.487V16.08a7.4 7.4 0 0 1-.835-.604m3.96.526q.051 0 .104.008q.614.103 1.25.103c3.514 0 6.326-2.351 6.326-5.202s-2.812-5.2-6.325-5.2s-6.326 2.35-6.326 5.2c0 1.378.657 2.676 1.818 3.647q.44.367.957.657a.6.6 0 0 1 .312.524v1.135c.893-.591 1.48-.872 1.883-.872"/><path fill="#fff" d="M8.5 12a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3.25 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2M15 12a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/></g><defs><linearGradient id="SVGxqUs5dhH" x1="12" x2="12" y1="4.5" y2="19.501" gradientUnits="userSpaceOnUse"><stop stop-color="#1bc9fa"/><stop offset="1" stop-color="#1778f0"/></linearGradient><clipPath id="SVGHcSWxdhd141"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></g></svg> </template>
CSS
.icon-chat-background {
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%3E%3Cg%20clip-path%3D%22url(%23SVGHcSWxdhd141)%22%3E%3Cpath%20fill%3D%22url(%23SVGxqUs5dhH)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.224%2017.783a9.3%209.3%200%200%200%201.667-.268a4.6%204.6%200%200%200%202.082.134l.083-.006c.248%200%20.573.142%201.048.442v-.493a.48.48%200%200%201%20.249-.42q.31-.174.573-.394c.692-.578%201.082-1.348%201.082-2.165q0-.407-.127-.794a6.3%206.3%200%200%200%20.502-1.207c.4.59.615%201.288.617%202.002c0%201.109-.523%202.143-1.428%202.9q-.227.189-.476.348v1.154c0%20.397-.464.625-.791.389q-.465-.343-.96-.64a2.4%202.4%200%200%200-.295-.147q-.409.06-.831.06c-1.13%200-2.173-.334-2.995-.895M6.25%2015.476C4.824%2014.283%204%2012.655%204%2010.911C4%207.348%207.406%204.5%2011.566%204.5s7.566%202.848%207.566%206.41c0%203.564-3.407%206.412-7.567%206.412a9%209%200%200%201-1.382-.107c-.196.046-.979.505-2.108%201.319c-.409.295-.989.01-.989-.487V16.08a7.4%207.4%200%200%201-.835-.604m3.96.526q.051%200%20.104.008q.614.103%201.25.103c3.514%200%206.326-2.351%206.326-5.202s-2.812-5.2-6.325-5.2s-6.326%202.35-6.326%205.2c0%201.378.657%202.676%201.818%203.647q.44.367.957.657a.6.6%200%200%201%20.312.524v1.135c.893-.591%201.48-.872%201.883-.872%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.5%2012a1%201%200%201%200%200-2a1%201%200%200%200%200%202m3.25%200a1%201%200%201%200%200-2a1%201%200%200%200%200%202M15%2012a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGxqUs5dhH%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%224.5%22%20y2%3D%2219.501%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231bc9fa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231778f0%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd141%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%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%3E%3Cg%20clip-path%3D%22url(%23SVGHcSWxdhd141)%22%3E%3Cpath%20fill%3D%22url(%23SVGxqUs5dhH)%22%20d%3D%22M24%200H0v24h24z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.224%2017.783a9.3%209.3%200%200%200%201.667-.268a4.6%204.6%200%200%200%202.082.134l.083-.006c.248%200%20.573.142%201.048.442v-.493a.48.48%200%200%201%20.249-.42q.31-.174.573-.394c.692-.578%201.082-1.348%201.082-2.165q0-.407-.127-.794a6.3%206.3%200%200%200%20.502-1.207c.4.59.615%201.288.617%202.002c0%201.109-.523%202.143-1.428%202.9q-.227.189-.476.348v1.154c0%20.397-.464.625-.791.389q-.465-.343-.96-.64a2.4%202.4%200%200%200-.295-.147q-.409.06-.831.06c-1.13%200-2.173-.334-2.995-.895M6.25%2015.476C4.824%2014.283%204%2012.655%204%2010.911C4%207.348%207.406%204.5%2011.566%204.5s7.566%202.848%207.566%206.41c0%203.564-3.407%206.412-7.567%206.412a9%209%200%200%201-1.382-.107c-.196.046-.979.505-2.108%201.319c-.409.295-.989.01-.989-.487V16.08a7.4%207.4%200%200%201-.835-.604m3.96.526q.051%200%20.104.008q.614.103%201.25.103c3.514%200%206.326-2.351%206.326-5.202s-2.812-5.2-6.325-5.2s-6.326%202.35-6.326%205.2c0%201.378.657%202.676%201.818%203.647q.44.367.957.657a.6.6%200%200%201%20.312.524v1.135c.893-.591%201.48-.872%201.883-.872%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.5%2012a1%201%200%201%200%200-2a1%201%200%200%200%200%202m3.25%200a1%201%200%201%200%200-2a1%201%200%200%200%200%202M15%2012a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGxqUs5dhH%22%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%224.5%22%20y2%3D%2219.501%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%231bc9fa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231778f0%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22SVGHcSWxdhd141%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/token-branded/chat-background.svg?color=%231a73e8&size=48
