Chat Bubbles Question icon

Use the Chat Bubbles Question 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 { ChatBubblesQuestion24Regular, ChatBubblesQuestion24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChatBubblesQuestion24Regular aria-label="Chat Bubbles Question" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_bubbles_question_24_regular.svg" width="24" height="24" alt="Chat Bubbles Question">

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="M8.14303 6.30723C8.57707 6.07535 9.04414 6.00076 9.49888 6.00073C10.0253 6.0007 10.6367 6.17363 11.1305 6.57829C11.6475 7.00192 11.9989 7.65186 11.9989 8.5C11.9989 9.47459 11.3102 10.0037 10.9219 10.302C10.8918 10.3252 10.8634 10.347 10.8373 10.3675C10.4127 10.7012 10.2489 10.8795 10.2489 11.25C10.2489 11.6642 9.91314 12 9.49892 12C9.08471 12 8.74892 11.6642 8.74892 11.25C8.74892 10.116 9.46017 9.54195 9.91052 9.18806C10.4238 8.78469 10.4989 8.69484 10.4989 8.5C10.4989 8.10296 10.3503 7.87825 10.1798 7.73853C9.98616 7.57985 9.72254 7.50072 9.49896 7.50073C9.20371 7.50075 9.00078 7.54962 8.84982 7.63027C8.70637 7.7069 8.55459 7.84146 8.40826 8.11137C8.21083 8.47551 7.7556 8.61066 7.39146 8.41324C7.02732 8.21582 6.89217 7.76058 7.08959 7.39644C7.35326 6.91012 7.70147 6.54311 8.14303 6.30723ZM9.49909 15.0001C10.0514 15.0001 10.4992 14.5524 10.4992 14.0001C10.4992 13.4477 10.0514 13 9.49909 13C8.94677 13 8.49902 13.4477 8.49902 14.0001C8.49902 14.5524 8.94677 15.0001 9.49909 15.0001ZM9.49908 3C5.35694 3 1.99908 6.35786 1.99908 10.5C1.99908 11.6329 2.25075 12.7088 2.70173 13.6734C2.4477 14.6714 2.16388 15.7842 1.97749 16.5147C1.74447 17.428 2.5669 18.2588 3.48124 18.039C4.23146 17.8587 5.38449 17.5819 6.41197 17.337C7.35428 17.7631 8.39991 18 9.49908 18C13.6412 18 16.9991 14.6421 16.9991 10.5C16.9991 6.35786 13.6412 3 9.49908 3ZM3.49908 10.5C3.49908 7.18629 6.18537 4.5 9.49908 4.5C12.8128 4.5 15.4991 7.18629 15.4991 10.5C15.4991 13.8137 12.8128 16.5 9.49908 16.5C8.53834 16.5 7.63237 16.2748 6.82911 15.8749L6.5857 15.7537L6.32118 15.8167C5.39845 16.0363 4.33239 16.2919 3.53342 16.4838C3.73217 15.7047 3.99534 14.6724 4.22351 13.7757L4.29369 13.4998L4.16318 13.2468C3.73895 12.4246 3.49908 11.4914 3.49908 10.5ZM14.4991 21.0001C12.5297 21.0001 10.7376 20.241 9.39941 18.9995C9.43261 18.9999 9.46585 19.0001 9.49913 19.0001C10.2171 19.0001 10.9143 18.911 11.5802 18.7434C12.4442 19.2254 13.4396 19.5001 14.4991 19.5001C15.4598 19.5001 16.3658 19.2748 17.1691 18.8749L17.4125 18.7537L17.677 18.8167C18.5986 19.0361 19.6421 19.2625 20.4162 19.4262C20.2412 18.6757 20.0025 17.6711 19.7747 16.7757L19.7045 16.4999L19.835 16.2469C20.2592 15.4247 20.4991 14.4915 20.4991 13.5001C20.4991 11.3853 19.4051 9.52617 17.7521 8.45761C17.5738 7.73435 17.3028 7.04756 16.9525 6.41052C19.8898 7.42684 21.9991 10.2171 21.9991 13.5001C21.9991 14.6332 21.7473 15.7094 21.2961 16.6741C21.5492 17.6821 21.8054 18.774 21.9679 19.4773C22.1723 20.3623 21.3929 21.1633 20.5005 20.9768C19.7733 20.8248 18.6308 20.581 17.587 20.3367C16.6445 20.763 15.5986 21.0001 14.4991 21.0001Z" 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_bubbles_question_24_regular.svg";

Details

Keywords

discussionmessagepost