Text Color icon
Used in general type creation and editing scenarios. Contains locale variants.Collection includes Text Color Accent, which can be colored in Regular variants. The Text Color 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 Color 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 { TextColor24Regular, TextColor24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextColor24Regular aria-label="Text Color" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_color_24_regular.svg" width="24" height="24" alt="Text Color"> 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.75 15C19.9926 15 21 16.0074 21 17.25V19.75C21 20.9926 19.9926 22 18.75 22H5.25C4.00736 22 3 20.9926 3 19.75V17.25C3 16.0074 4.00736 15 5.25 15H18.75ZM5.25 16.5C4.83579 16.5 4.5 16.8358 4.5 17.25V19.75C4.5 20.1642 4.83579 20.5 5.25 20.5H18.75C19.1642 20.5 19.5 20.1642 19.5 19.75V17.25C19.5 16.8358 19.1642 16.5 18.75 16.5H5.25ZM12 2C12.3079 2 12.5842 2.18827 12.6973 2.47461L16.4473 11.9746C16.5993 12.3598 16.4106 12.7951 16.0254 12.9473C15.6402 13.0993 15.2049 12.9106 15.0527 12.5254L14.0547 9.99707C14.0366 9.99837 14.0184 10 14 10H10C9.98126 10 9.96274 9.99842 9.94434 9.99707L8.94727 12.5254C8.79513 12.9106 8.35985 13.0993 7.97461 12.9473C7.58942 12.7951 7.40067 12.3598 7.55273 11.9746L11.3027 2.47461L11.3525 2.37207C11.4855 2.14423 11.7306 2 12 2ZM10.5361 8.5H13.4639L12 4.79102L10.5361 8.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_color_24_regular.svg";Details
| Name | Text Color |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_color_24_regular.svg |
| Filled file | ic_fluent_text_color_24_filled.svg |
| React components | TextColor24Regular, TextColor24Filled |
| License | MIT (© Microsoft Corporation) |