Calendar Chat icon
Used in calendar scenarios. The Calendar Chat 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 Calendar Chat 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 { CalendarChat24Regular, CalendarChat24Filled } from "@fluentui/react-icons";
export function Example() {
return <CalendarChat24Regular aria-label="Calendar Chat" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_chat_24_regular.svg" width="24" height="24" alt="Calendar Chat"> 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="M17.75 3C19.5449 3 21 4.45507 21 6.25V12.0208C20.5368 11.7244 20.0334 11.4852 19.5 11.313V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.3135C11.3982 19.7622 11.499 20.0172 11.6149 20.2637L11.3907 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5ZM19.5 12.3743C20.0482 12.5882 20.5536 12.8875 21 13.2558C22.2228 14.2648 23.0023 15.792 23.0023 17.5012C23.0023 20.5395 20.5393 23.0024 17.5011 23.0024C16.5335 23.0024 15.6242 22.7526 14.8343 22.3139L12.6471 22.9795C12.2644 23.0959 11.9066 22.7381 12.0231 22.3553L12.6889 20.1688C12.25 19.3787 12 18.4692 12 17.5012C12 14.5216 14.3689 12.0952 17.3261 12.0027C17.3755 12.0012 17.4252 12.0003 17.475 12.0001C17.4837 12 17.4924 12 17.5011 12C18.2063 12 18.8804 12.1326 19.5 12.3743ZM19.5015 17.0011C19.7777 17.0011 20.0016 16.7772 20.0016 16.501C20.0016 16.2248 19.7777 16.0009 19.5015 16.0009H15.5007C15.2245 16.0009 15.0006 16.2248 15.0006 16.501C15.0006 16.7772 15.2245 17.0011 15.5007 17.0011H19.5015ZM15.5007 19.0015H17.5011C17.7773 19.0015 18.0012 18.7776 18.0012 18.5014C18.0012 18.2252 17.7773 18.0013 17.5011 18.0013H15.5007C15.2245 18.0013 15.0006 18.2252 15.0006 18.5014C15.0006 18.7776 15.2245 19.0015 15.5007 19.0015Z" 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/calendar_chat_24_regular.svg";Details
| Name | Calendar Chat |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_chat_24_regular.svg |
| Filled file | ic_fluent_calendar_chat_24_filled.svg |
| React components | CalendarChat24Regular, CalendarChat24Filled |
| License | MIT (© Microsoft Corporation) |