Text Grammar Arrow Left icon
Used in text grammar check scenarios. The Text Grammar Arrow Left 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 Grammar Arrow Left 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 { TextGrammarArrowLeft24Regular, TextGrammarArrowLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextGrammarArrowLeft24Regular aria-label="Text Grammar Arrow Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_grammar_arrow_left_24_regular.svg" width="24" height="24" alt="Text Grammar Arrow Left"> 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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM16.7192 14.5886L16.65 14.6464L14.1344 17.1628L14.0937 17.2134L14.0496 17.2901L14.0268 17.3488L14.0079 17.4341L14.0055 17.5443L14.0205 17.6296L14.0495 17.7098L14.0834 17.7711L14.1343 17.8371L16.65 20.3536C16.8452 20.5488 17.1618 20.5488 17.3571 20.3536C17.5306 20.18 17.5499 19.9106 17.4149 19.7157L17.3571 19.6464L15.711 18H20.5C20.7455 18 20.9496 17.8231 20.9919 17.5899L21 17.5C21 17.2545 20.8231 17.0504 20.5899 17.0081L20.5 17H15.711L17.3571 15.3536C17.5306 15.18 17.5499 14.9106 17.4149 14.7157L17.3571 14.6464C17.1835 14.4729 16.9141 14.4536 16.7192 14.5886ZM11.0189 17H2.75L2.64823 17.0068C2.28215 17.0565 2 17.3703 2 17.75C2 18.1642 2.33579 18.5 2.75 18.5H11.0764C11.0261 18.174 11 17.8401 11 17.5C11 17.3318 11.0064 17.165 11.0189 17ZM11.7322 14.5H2.75C2.33579 14.5 2 14.1642 2 13.75C2 13.3703 2.28215 13.0565 2.64823 13.0068L2.75 13H12.8096C12.3832 13.4443 12.0194 13.949 11.7322 14.5ZM21.25 9H2.75L2.64823 9.00685C2.28215 9.05651 2 9.3703 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5H21.25L21.3518 10.4932C21.7178 10.4435 22 10.1297 22 9.75C22 9.33579 21.6642 9 21.25 9ZM21.25 5H2.75L2.64823 5.00685C2.28215 5.05651 2 5.3703 2 5.75C2 6.16421 2.33579 6.5 2.75 6.5H21.25L21.3518 6.49315C21.7178 6.44349 22 6.1297 22 5.75C22 5.33579 21.6642 5 21.25 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_grammar_arrow_left_24_regular.svg";Details
| Name | Text Grammar Arrow Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_grammar_arrow_left_24_regular.svg |
| Filled file | ic_fluent_text_grammar_arrow_left_24_filled.svg |
| React components | TextGrammarArrowLeft24Regular, TextGrammarArrowLeft24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
typetexttypographyeditcreatewanddismisscheckmarkarrowleftarrowrightgearsettings