chat add icon

chat-add-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.

Name
chat-add-48
Set
Fluent UI System Color Icons
Style
48
Viewbox
48×48
License
MIT

5 other variants in Fluent UI System Color Icons

chat-add-16chat-add-20chat-add-24chat-add-28chat-add-32

The same icon in other sets

chat-addAkar Iconschat-add-16-filledFluent UI System Iconschat-addHuge Iconschat-add-16Octiconschat-addTDesign Icons

Related icons in Fluent UI System Color Icons

chat-bubbles-question-16chat-more-16chat-multiple-16

Use the chat add icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVG24lVjexL)" d="M24 4c11.046 0 20 8.954 20 20s-8.954 20-20 20c-3.45 0-6.698-.874-9.533-2.414L6.23 43.928c-1.319.375-2.537-.844-2.162-2.162l2.342-8.238A19.9 19.9 0 0 1 4 24C4 12.954 12.954 4 24 4m1.25 11.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 1 0 0-2.5h-7.5z"/><path fill="url(#SVGxxP3EdSb)" d="M25.25 15.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 1 0 0-2.5h-7.5z"/><defs><linearGradient id="SVG24lVjexL" x1="5.429" x2="40.348" y1="11.5" y2="71.037" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#cc23d1"/></linearGradient><linearGradient id="SVGxxP3EdSb" x1="15.749" x2="19.075" y1="14.351" y2="35.787" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorChatAdd48(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVG24lVjexL)" d="M24 4c11.046 0 20 8.954 20 20s-8.954 20-20 20c-3.45 0-6.698-.874-9.533-2.414L6.23 43.928c-1.319.375-2.537-.844-2.162-2.162l2.342-8.238A19.9 19.9 0 0 1 4 24C4 12.954 12.954 4 24 4m1.25 11.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 1 0 0-2.5h-7.5z"/><path fill="url(#SVGxxP3EdSb)" d="M25.25 15.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 1 0 0-2.5h-7.5z"/><defs><linearGradient id="SVG24lVjexL" x1="5.429" x2="40.348" y1="11.5" y2="71.037" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#cc23d1"/></linearGradient><linearGradient id="SVGxxP3EdSb" x1="15.749" x2="19.075" y1="14.351" y2="35.787" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVG24lVjexL)" d="M24 4c11.046 0 20 8.954 20 20s-8.954 20-20 20c-3.45 0-6.698-.874-9.533-2.414L6.23 43.928c-1.319.375-2.537-.844-2.162-2.162l2.342-8.238A19.9 19.9 0 0 1 4 24C4 12.954 12.954 4 24 4m1.25 11.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 1 0 0-2.5h-7.5z"/><path fill="url(#SVGxxP3EdSb)" d="M25.25 15.25a1.25 1.25 0 1 0-2.5 0v7.5h-7.5a1.25 1.25 0 1 0 0 2.5h7.5v7.5a1.25 1.25 0 1 0 2.5 0v-7.5h7.5a1.25 1.25 0 1 0 0-2.5h-7.5z"/><defs><linearGradient id="SVG24lVjexL" x1="5.429" x2="40.348" y1="11.5" y2="71.037" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#cc23d1"/></linearGradient><linearGradient id="SVGxxP3EdSb" x1="15.749" x2="19.075" y1="14.351" y2="35.787" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-chat-add-48 {
  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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG24lVjexL)%22%20d%3D%22M24%204c11.046%200%2020%208.954%2020%2020s-8.954%2020-20%2020c-3.45%200-6.698-.874-9.533-2.414L6.23%2043.928c-1.319.375-2.537-.844-2.162-2.162l2.342-8.238A19.9%2019.9%200%200%201%204%2024C4%2012.954%2012.954%204%2024%204m1.25%2011.25a1.25%201.25%200%201%200-2.5%200v7.5h-7.5a1.25%201.25%200%201%200%200%202.5h7.5v7.5a1.25%201.25%200%201%200%202.5%200v-7.5h7.5a1.25%201.25%200%201%200%200-2.5h-7.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGxxP3EdSb)%22%20d%3D%22M25.25%2015.25a1.25%201.25%200%201%200-2.5%200v7.5h-7.5a1.25%201.25%200%201%200%200%202.5h7.5v7.5a1.25%201.25%200%201%200%202.5%200v-7.5h7.5a1.25%201.25%200%201%200%200-2.5h-7.5z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG24lVjexL%22%20x1%3D%225.429%22%20x2%3D%2240.348%22%20y1%3D%2211.5%22%20y2%3D%2271.037%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cc23d1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGxxP3EdSb%22%20x1%3D%2215.749%22%20x2%3D%2219.075%22%20y1%3D%2214.351%22%20y2%3D%2235.787%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVG24lVjexL)%22%20d%3D%22M24%204c11.046%200%2020%208.954%2020%2020s-8.954%2020-20%2020c-3.45%200-6.698-.874-9.533-2.414L6.23%2043.928c-1.319.375-2.537-.844-2.162-2.162l2.342-8.238A19.9%2019.9%200%200%201%204%2024C4%2012.954%2012.954%204%2024%204m1.25%2011.25a1.25%201.25%200%201%200-2.5%200v7.5h-7.5a1.25%201.25%200%201%200%200%202.5h7.5v7.5a1.25%201.25%200%201%200%202.5%200v-7.5h7.5a1.25%201.25%200%201%200%200-2.5h-7.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGxxP3EdSb)%22%20d%3D%22M25.25%2015.25a1.25%201.25%200%201%200-2.5%200v7.5h-7.5a1.25%201.25%200%201%200%200%202.5h7.5v7.5a1.25%201.25%200%201%200%202.5%200v-7.5h7.5a1.25%201.25%200%201%200%200-2.5h-7.5z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG24lVjexL%22%20x1%3D%225.429%22%20x2%3D%2240.348%22%20y1%3D%2211.5%22%20y2%3D%2271.037%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cc23d1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGxxP3EdSb%22%20x1%3D%2215.749%22%20x2%3D%2219.075%22%20y1%3D%2214.351%22%20y2%3D%2235.787%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%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/fluent-color/chat-add-48.svg?color=%231a73e8&size=48