Text Effects icon
Used in general type creation and editing scenarios. The Text Effects 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 Effects 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 { TextEffects24Regular, TextEffects24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextEffects24Regular aria-label="Text Effects" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_effects_24_regular.svg" width="24" height="24" alt="Text Effects"> 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="M14.2984 4.01519C13.9045 3.09599 13.0006 2.5 12.0006 2.5C11.0005 2.5 10.0966 3.096 9.7027 4.01522L5.4388 13.9645C5.42322 13.9987 5.40839 14.0332 5.39433 14.0682L3.70277 18.0153C3.15889 19.2844 3.74678 20.754 5.01586 21.2979C6.28493 21.8418 7.75463 21.2539 8.29851 19.9848L9.3634 17.5001H14.6379L15.7028 19.9849C16.2467 21.2539 17.7164 21.8418 18.9854 21.2979C20.2545 20.754 20.8424 19.2843 20.2985 18.0153L18.6069 14.0682C18.5928 14.0332 18.578 13.9986 18.5624 13.9644L14.2984 4.01519ZM12.495 12.5001L12.0006 11.3465L11.5062 12.5001H12.495ZM12.9197 4.60608L17.1968 14.5858C17.203 14.5995 17.2089 14.6133 17.2146 14.6273L18.9198 18.6061C19.1373 19.1138 18.9022 19.7016 18.3946 19.9192C17.8869 20.1368 17.2991 19.9016 17.0815 19.394L15.6269 16.0001H8.3743L6.91979 19.394C6.70224 19.9016 6.11436 20.1368 5.60673 19.9192C5.0991 19.7017 4.86394 19.1138 5.08149 18.6061L6.78667 14.6273C6.7923 14.6133 6.79823 14.5995 6.80446 14.5858L11.0814 4.60609C11.239 4.2384 11.6005 4 12.0006 4C12.4006 4 12.7621 4.23839 12.9197 4.60608ZM14.7698 14.0001H9.23143L12.0006 7.5386L14.7698 14.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/text_effects_24_regular.svg";Details
| Name | Text Effects |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_effects_24_regular.svg |
| Filled file | ic_fluent_text_effects_24_filled.svg |
| React components | TextEffects24Regular, TextEffects24Filled |
| License | MIT (© Microsoft Corporation) |