Chat Add icon
Used in real time chat scenarios (versus comment - different icon). The Chat Add icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 24 px
ic_fluent_chat_add_24_regular.svg
Chat Add icon in React
npm install @fluentui/react-icons
import { ChatAdd24Regular } from "@fluentui/react-icons";
export function Example() {
return <ChatAdd24Regular aria-label="Chat Add" />;
}Use the Chat Add icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { ChatAdd24Regular, ChatAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <ChatAdd24Regular aria-label="Chat Add" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_chat_add_24_regular.svg" width="24" height="24" alt="Chat Add"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75V11.25H7.75C7.33579 11.25 7 11.5858 7 12C7 12.4142 7.33579 12.75 7.75 12.75H11.25V16.25C11.25 16.6642 11.5858 17 12 17C12.4142 17 12.75 16.6642 12.75 16.25V12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.5858 16.6642 11.25 16.25 11.25H12.75V7.75ZM22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.6203 2.38637 15.186 3.11461 16.5922L2.04695 20.4151C1.98549 20.6349 1.98546 20.8676 2.04691 21.0876C2.23258 21.7525 2.92212 22.141 3.58704 21.9553L7.41286 20.888C8.81782 21.6146 10.3817 22 12 22C17.5228 22 22 17.5228 22 12ZM3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C10.5322 20.5 9.12006 20.1281 7.86709 19.4295L7.59755 19.2792L3.61096 20.3914L4.72368 16.4072L4.57303 16.1375C3.87277 14.8834 3.5 13.4696 3.5 12Z" fill="currentColor"/></svg>Details
| Name | Chat Add |
|---|---|
| Styles | Regular (outlined), Filled, Color |
| Sizes | 16 px, 20 px, 24 px, 28 px, 32 px, 48 px |
| Regular (outlined) file | ic_fluent_chat_add_24_regular.svg |
| Filled file | ic_fluent_chat_add_24_filled.svg |
| Color file | ic_fluent_chat_add_24_color.svg |
| React (Regular) | ChatAdd16Regular, ChatAdd20Regular, ChatAdd24Regular, ChatAdd28Regular, ChatAdd32Regular, ChatAdd48Regular |
| React (Filled) | ChatAdd16Filled, ChatAdd20Filled, ChatAdd24Filled, ChatAdd28Filled, ChatAdd32Filled, ChatAdd48Filled |
| React (Color) | ChatAdd16Color, ChatAdd20Color, ChatAdd24Color, ChatAdd28Color, ChatAdd32Color, ChatAdd48Color |
| License | MIT (© Microsoft Corporation) |