Phone Chat icon
Used to represent a physical or digital mobile phone scenarios. The Phone 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 Phone 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 { PhoneChat24Regular, PhoneChat24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneChat24Regular aria-label="Phone Chat" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_chat_24_regular.svg" width="24" height="24" alt="Phone 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="M18 4.25C18 3.00736 16.9926 2 15.75 2H8.25C7.00736 2 6 3.00736 6 4.25V19.75C6 20.9926 7.00736 22 8.25 22H11.0867L11.5434 20.5H8.25C7.83579 20.5 7.5 20.1642 7.5 19.75V4.25C7.5 3.83579 7.83579 3.5 8.25 3.5H15.75C16.1642 3.5 16.5 3.83579 16.5 4.25V11.0767C16.8265 11.0262 17.1611 11 17.5018 11C17.6692 11 17.8353 11.0063 18 11.0188V4.25ZM21 13.2558C20.1623 12.5646 19.1166 12.1166 17.9708 12.0198C17.816 12.0067 17.6593 12 17.5011 12C14.4629 12 12 14.463 12 17.5012C12 18.4692 12.25 19.3787 12.6889 20.1688L12.0231 22.3553C11.9066 22.7381 12.2644 23.0959 12.6471 22.9795L14.8343 22.3139C15.6242 22.7526 16.5335 23.0024 17.5011 23.0024C20.5393 23.0024 23.0023 20.5395 23.0023 17.5012C23.0023 15.792 22.2228 14.2648 21 13.2558ZM15.5009 17.0011C15.2247 17.0011 15.0008 16.7772 15.0008 16.501C15.0008 16.2248 15.2247 16.0009 15.5009 16.0009H19.5015C19.7777 16.0009 20.0016 16.2248 20.0016 16.501C20.0016 16.7772 19.7777 17.0011 19.5015 17.0011H15.5009ZM17.5011 19.0015H15.5009C15.2247 19.0015 15.0008 18.7776 15.0008 18.5014C15.0008 18.2252 15.2247 18.0013 15.5009 18.0013H17.5011C17.7773 18.0013 18.0012 18.2252 18.0012 18.5014C18.0012 18.7776 17.7773 19.0015 17.5011 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/phone_chat_24_regular.svg";Details
| Name | Phone Chat |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_chat_24_regular.svg |
| Filled file | ic_fluent_phone_chat_24_filled.svg |
| React components | PhoneChat24Regular, PhoneChat24Filled |
| License | MIT (© Microsoft Corporation) |