Settings Chat icon

Use the Settings 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 { SettingsChat24Regular, SettingsChat24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SettingsChat24Regular aria-label="Settings Chat" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_settings_chat_24_regular.svg" width="24" height="24" alt="Settings 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="M12.0132 2.25C12.7471 2.25846 13.4782 2.34326 14.1947 2.50304C14.5074 2.57279 14.7413 2.83351 14.7768 3.15196L14.947 4.67881C15.024 5.37986 15.6159 5.91084 16.3216 5.91158C16.5113 5.91188 16.6989 5.87238 16.8742 5.79483L18.2748 5.17956C18.5661 5.05159 18.9064 5.12136 19.1239 5.35362C20.1361 6.43464 20.8899 7.73115 21.3287 9.14558C21.4233 9.45058 21.3144 9.78203 21.0573 9.9715L19.8159 10.8866C19.6641 10.9981 19.5389 11.1378 19.4454 11.2955C18.961 11.144 18.4522 11.0475 17.9264 11.0136C18.1185 10.4861 18.4631 10.0191 18.9268 9.67847L19.7237 9.09109C19.403 8.25061 18.9478 7.46784 18.3757 6.77356L17.4793 7.16737C17.1139 7.32901 16.7188 7.4122 16.3196 7.41158C14.85 7.41004 13.6165 6.30355 13.4561 4.84383L13.3472 3.8667C12.9016 3.7942 12.4536 3.75512 12.0133 3.7499C11.5593 3.75524 11.1065 3.79443 10.6588 3.86702L10.5499 4.84418C10.448 5.75368 9.92101 6.56102 9.1314 7.01903C8.33695 7.48317 7.36834 7.53903 6.52556 7.16917L5.62727 6.77456C5.05534 7.46873 4.60012 8.25135 4.2795 9.09168L5.0773 9.67879C5.81611 10.2216 6.25245 11.0837 6.25245 12.0005C6.25245 12.9172 5.81611 13.7793 5.07807 14.3215L4.27902 14.9102C4.59936 15.752 5.05465 16.5361 5.62698 17.2316L6.53211 16.8351C7.3702 16.4692 8.33222 16.5227 9.12451 16.9794C9.91679 17.4361 10.4453 18.2417 10.549 19.1526L10.6579 20.1365C10.9716 20.1898 11.2876 20.2244 11.6043 20.2401L11.6154 20.2637L11.1738 21.7139C10.7121 21.6735 10.2526 21.5994 9.79901 21.4915C9.49088 21.4182 9.26202 21.1592 9.22716 20.8444L9.05834 19.32C9.00875 18.8843 8.75532 18.498 8.3754 18.279C7.99549 18.06 7.53418 18.0343 7.13318 18.2094L5.72655 18.8256C5.4352 18.9533 5.09501 18.8833 4.87776 18.6509C3.8656 17.5685 3.11217 16.2705 2.67418 14.8548C2.57984 14.5499 2.68884 14.2186 2.94582 14.0293L4.18915 13.1133C4.54329 12.8531 4.75245 12.4399 4.75245 12.0005C4.75245 11.561 4.54329 11.1478 4.18869 10.8873L2.94614 9.97285C2.68877 9.78345 2.57967 9.45178 2.67434 9.14658C3.1131 7.73215 3.86692 6.43564 4.8791 5.35462C5.09657 5.12236 5.43691 5.05259 5.72822 5.18056L7.1286 5.79572C7.53154 5.97256 7.99478 5.94585 8.37675 5.72269C8.75707 5.50209 9.01026 5.11422 9.05914 4.67764L9.22922 3.15196C9.26474 2.83335 9.49884 2.57254 9.81178 2.50294C10.5291 2.34342 11.2609 2.25865 12.0132 2.25ZM17.7526 12.0056C18.2866 12.0296 18.8008 12.1297 19.2846 12.2953C19.2846 12.2953 19.2846 12.2953 19.2846 12.2953C21.4477 13.036 23.0028 15.087 23.0028 17.5012C23.0028 20.5395 20.5398 23.0024 17.5016 23.0024C16.534 23.0024 15.6247 22.7526 14.8347 22.3139L12.6476 22.9795C12.2648 23.0959 11.9071 22.7381 12.0236 22.3553L12.6894 20.1688C12.2505 19.3787 12.0005 18.4692 12.0005 17.5012C12.0005 14.463 14.4634 12 17.5016 12C17.5857 12 17.6694 12.0019 17.7526 12.0056C17.7526 12.0056 17.7526 12.0056 17.7526 12.0056ZM17.5016 18.0013H15.5014C15.2252 18.0013 15.0013 18.2252 15.0013 18.5014C15.0013 18.617 15.0405 18.7234 15.1063 18.8081C15.1063 18.8081 15.1063 18.808 15.1063 18.8081C15.1978 18.9257 15.3406 19.0015 15.5012 19.0015H17.5016C17.7778 19.0015 18.0017 18.7776 18.0017 18.5014C18.0017 18.2252 17.7778 18.0013 17.5016 18.0013ZM15.5012 17.0011C15.5013 17.0011 15.5011 17.0011 15.5012 17.0011H19.502C19.7782 17.0011 20.0021 16.7772 20.0021 16.501C20.0021 16.2248 19.7782 16.0009 19.502 16.0009H15.5012C15.225 16.0009 15.0011 16.2248 15.0011 16.501C15.0011 16.6331 15.0524 16.7531 15.136 16.8425C15.1361 16.8425 15.136 16.8425 15.136 16.8425C15.2273 16.94 15.3571 17.001 15.5012 17.0011ZM12.0007 8.24995C13.8182 8.24995 15.3338 9.54303 15.6776 11.2594C15.1726 11.4068 14.6931 11.6137 14.2471 11.8721C14.1809 10.689 13.2004 9.74995 12.0007 9.74995C10.758 9.74995 9.75067 10.7573 9.75067 12C9.75067 13.1997 10.6897 14.1801 11.8729 14.2464C11.6144 14.6924 11.4075 15.1719 11.2601 15.6768C9.54375 15.3331 8.25067 13.8175 8.25067 12C8.25067 9.92888 9.9296 8.24995 12.0007 8.24995Z" 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/settings_chat_24_regular.svg";

Details

Keywords

gearoptionscog