Text Grammar Wand icon

Use the Text Grammar Wand 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 { TextGrammarWand24Regular, TextGrammarWand24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextGrammarWand24Regular aria-label="Text Grammar Wand" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_grammar_wand_24_regular.svg" width="24" height="24" alt="Text Grammar Wand">

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="M2.75 17H10.5252L9.02514 18.5H2.75C2.33579 18.5 2 18.1642 2 17.75C2 17.3703 2.28215 17.0565 2.64823 17.0068L2.75 17ZM2.75 14.5H10.3138C10.1154 14.2153 10 13.8698 10 13.5C10 13.3268 10.0253 13.1588 10.0726 13H2.75L2.64823 13.0068C2.28215 13.0565 2 13.3703 2 13.75C2 14.1642 2.33579 14.5 2.75 14.5ZM12.7197 16.2197C13.0126 15.9268 13.4874 15.9268 13.7803 16.2197C14.0732 16.5126 14.0732 16.9875 13.7803 17.2804L9.28033 21.7803C8.98744 22.0732 8.51256 22.0732 8.21967 21.7803C7.92678 21.4874 7.92678 21.0126 8.21967 20.7197L12.7197 16.2197ZM2.75 9H13.25C13.6642 9 14 9.33579 14 9.75C14 10.1297 13.7178 10.4435 13.3518 10.4932L13.25 10.5H2.75C2.33579 10.5 2 10.1642 2 9.75C2 9.3703 2.28215 9.05651 2.64823 9.00685L2.75 9ZM2.75 5H21.25C21.6642 5 22 5.33579 22 5.75C22 6.1297 21.7178 6.44349 21.3518 6.49315L21.25 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.3703 2.28215 5.05651 2.64823 5.00685L2.75 5ZM16.5 8C16.8788 8 17.1981 8.28243 17.2444 8.65837L17.3834 9.78797C17.5656 11.2682 18.7318 12.4344 20.212 12.6166L21.3416 12.7556C21.7176 12.8019 22 13.1212 22 13.5C22 13.8788 21.7176 14.1981 21.3416 14.2444L20.212 14.3834C18.7318 14.5656 17.5656 15.7318 17.3834 17.212L17.2444 18.3416C17.1981 18.7176 16.8788 19 16.5 19C16.1212 19 15.8019 18.7176 15.7556 18.3416L15.6166 17.212C15.4344 15.7318 14.2682 14.5656 12.788 14.3834L11.6584 14.2444C11.2824 14.1981 11 13.8788 11 13.5C11 13.1212 11.2824 12.8019 11.6584 12.7556L12.788 12.6166C14.2682 12.4344 15.4344 11.2682 15.6166 9.78797L15.7556 8.65837C15.8019 8.28243 16.1212 8 16.5 8ZM16.5 11.7745C16.085 12.4893 15.4893 13.085 14.7745 13.5C15.4893 13.915 16.085 14.5107 16.5 15.2255C16.915 14.5107 17.5107 13.915 18.2255 13.5C17.5107 13.085 16.915 12.4893 16.5 11.7745Z" 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_wand_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatewanddismisscheckmarkarrowleftarrowrightgearsettings