Chat Settings icon
Used in real time chat scenarios (versus comment - different icon). The Chat Settings 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 Settings 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 { ChatSettings24Regular, ChatSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <ChatSettings24Regular aria-label="Chat Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_chat_settings_24_regular.svg" width="24" height="24" alt="Chat Settings"> 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="M22 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 22C12.2628 22 12.5232 21.9899 12.7809 21.97C12.3658 21.5319 12.0111 21.0361 11.73 20.4958C10.3592 20.4531 9.04305 20.0852 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 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6041 3.5 20.3532 7.16054 20.4958 11.73C21.0361 12.0111 21.5319 12.3658 21.97 12.7809C21.9899 12.5232 22 12.2628 22 12ZM12.837 16.4718C13.9386 16.1992 14.593 15.0658 14.2782 13.9756L14.0801 13.2894C14.5194 12.907 15.0193 12.5969 15.5629 12.3766L16.0617 12.9015C16.85 13.731 18.1722 13.7313 18.9608 12.902L19.4539 12.3835C19.9985 12.6063 20.499 12.9195 20.9381 13.3052L20.7519 13.9361C20.4281 15.0337 21.0894 16.1787 22.2019 16.4466L22.7409 16.5764C22.7899 16.8767 22.8155 17.1852 22.8155 17.5C22.8155 17.8008 22.7922 18.096 22.7472 18.3837L22.1635 18.5281C21.062 18.8007 20.4076 19.9341 20.7223 21.0244L20.9204 21.7103C20.4811 22.0927 19.9811 22.4029 19.4375 22.6232L18.9388 22.0984C18.1506 21.2689 16.8283 21.2687 16.0397 22.0979L15.5464 22.6166C15.0019 22.3939 14.5014 22.0807 14.0623 21.6951L14.2486 21.0638C14.5725 19.9663 13.9111 18.8212 12.7986 18.5533L12.2592 18.4234C12.2101 18.1232 12.1846 17.8147 12.1846 17.5C12.1846 17.1992 12.2079 16.904 12.2528 16.6163L12.837 16.4718ZM18.9497 17.5C18.9497 16.6716 18.3007 16 17.5 16C16.6994 16 16.0504 16.6716 16.0504 17.5C16.0504 18.3284 16.6994 19 17.5 19C18.3007 19 18.9497 18.3284 18.9497 17.5Z" 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_settings_24_regular.svg";Details
| Name | Chat Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_chat_settings_24_regular.svg |
| Filled file | ic_fluent_chat_settings_24_filled.svg |
| React components | ChatSettings24Regular, ChatSettings24Filled |
| License | MIT (© Microsoft Corporation) |