Text Quote icon
Used in general type creation and editing scenarios. The Text Quote 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 Text Quote 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 { TextQuote24Regular, TextQuote24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextQuote24Regular aria-label="Text Quote" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_quote_24_regular.svg" width="24" height="24" alt="Text Quote"> 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 5C9.62875 5 10.9526 6.29802 10.9971 7.91602C11.0002 7.94363 11.0029 7.97156 11.0029 8C11.0029 10.9327 9.936 13.3818 8.88965 15.0811C8.3651 15.9329 7.84001 16.6051 7.44434 17.0664C7.24631 17.2973 7.0797 17.4767 6.96094 17.5996C6.9017 17.6609 6.85398 17.7081 6.82031 17.7412C6.80346 17.7578 6.78999 17.771 6.78027 17.7803C6.77548 17.7849 6.77151 17.7892 6.76855 17.792C6.76721 17.7933 6.76558 17.794 6.76465 17.7949L6.76367 17.7969C6.46146 18.08 5.98635 18.0648 5.70312 17.7627C5.41997 17.4605 5.4352 16.9863 5.7373 16.7031C5.73816 16.7023 5.73972 16.7006 5.74219 16.6982C5.74761 16.693 5.75709 16.6841 5.76953 16.6719C5.79442 16.6474 5.83279 16.6084 5.88281 16.5566C5.98286 16.4531 6.12878 16.2961 6.30566 16.0898C6.6604 15.6762 7.1363 15.067 7.6123 14.2939C8.19982 13.3398 8.77816 12.1484 9.1377 10.7754C8.78672 10.9194 8.40287 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5ZM16 5C17.6288 5 18.9526 6.29802 18.9971 7.91602C19.0002 7.94363 19.0029 7.97156 19.0029 8C19.0029 10.9327 17.936 13.3818 16.8896 15.0811C16.3651 15.9329 15.84 16.6051 15.4443 17.0664C15.2463 17.2973 15.0797 17.4767 14.9609 17.5996C14.9017 17.6609 14.854 17.7081 14.8203 17.7412C14.8035 17.7578 14.79 17.771 14.7803 17.7803C14.7755 17.7849 14.7715 17.7892 14.7686 17.792C14.7672 17.7933 14.7656 17.794 14.7646 17.7949L14.7637 17.7969C14.4615 18.08 13.9863 18.0648 13.7031 17.7627C13.42 17.4605 13.4352 16.9863 13.7373 16.7031C13.7382 16.7023 13.7397 16.7006 13.7422 16.6982C13.7476 16.693 13.7571 16.6841 13.7695 16.6719C13.7944 16.6474 13.8328 16.6084 13.8828 16.5566C13.9829 16.4531 14.1288 16.2961 14.3057 16.0898C14.6604 15.6762 15.1363 15.067 15.6123 14.2939C16.1998 13.3398 16.7782 12.1484 17.1377 10.7754C16.7867 10.9194 16.4029 11 16 11C14.3431 11 13 9.65685 13 8C13 6.34315 14.3431 5 16 5ZM8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5ZM16 6.5C15.1716 6.5 14.5 7.17157 14.5 8C14.5 8.82843 15.1716 9.5 16 9.5C16.8284 9.5 17.5 8.82843 17.5 8C17.5 7.17157 16.8284 6.5 16 6.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/text_quote_24_regular.svg";Details
| Name | Text Quote |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_quote_24_regular.svg |
| Filled file | ic_fluent_text_quote_24_filled.svg |
| React components | TextQuote24Regular, TextQuote24Filled |
| License | MIT (© Microsoft Corporation) |