Chat Off icon
Used in real time chat scenarios (versus comment - different icon). The Chat Off icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Chat Off 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 { ChatOff24Regular, ChatOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <ChatOff24Regular aria-label="Chat Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_chat_off_24_regular.svg" width="24" height="24" alt="Chat Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L4.41838 5.47908C2.91114 7.2299 2 9.50855 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 22C14.4914 22 16.77 21.0889 18.5208 19.5818L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM17.4566 18.5176C15.9802 19.755 14.0771 20.5 12 20.5C10.5322 20.5 9.12006 20.1281 7.86709 19.4295L7.59755 19.2792L3.61096 20.3914L4.72368 16.4073L4.57303 16.1375C3.87277 14.8834 3.5 13.4696 3.5 12C3.5 9.92285 4.24507 8.01971 5.48254 6.54326L8.48673 9.54752C8.20238 9.65413 8 9.92843 8 10.25C8 10.6642 8.33579 11 8.75 11H9.93919L11.9392 13H8.75L8.64823 13.0069C8.28215 13.0565 8 13.3703 8 13.75C8 14.1642 8.33579 14.5 8.75 14.5H13.2483L13.35 14.4932C13.3735 14.49 13.3967 14.4857 13.4195 14.4804L17.4566 18.5176Z" fill="currentColor"/>
<path d="M15.2545 9.50001H12.6818L14.1818 11H15.2545L15.3563 10.9932C15.7223 10.9435 16.0045 10.6297 16.0045 10.25C16.0045 9.83579 15.6687 9.50001 15.2545 9.50001Z" fill="currentColor"/>
<path d="M20.5 12C20.5 13.5302 20.0957 14.966 19.388 16.2063L20.4816 17.2999C21.4438 15.7634 22 13.9466 22 12C22 6.47716 17.5228 2.00001 12 2.00001C10.0534 2.00001 8.23677 2.55619 6.70025 3.5183L7.79388 4.61195C9.03415 3.90432 10.4699 3.50001 12 3.50001C16.6944 3.50001 20.5 7.30559 20.5 12Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/chat_off_24_regular.svg";Details
| Name | Chat Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_chat_off_24_regular.svg |
| Filled file | ic_fluent_chat_off_24_filled.svg |
| React components | ChatOff24Regular, ChatOff24Filled |
| License | MIT (© Microsoft Corporation) |