Slide Text Cursor icon

Use the Slide Text Cursor 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 { SlideTextCursor24Regular, SlideTextCursor24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SlideTextCursor24Regular aria-label="Slide Text Cursor" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_slide_text_cursor_24_regular.svg" width="24" height="24" alt="Slide Text Cursor">

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="M6.75 8C6.33579 8 6 8.33579 6 8.75C6 9.16421 6.33579 9.5 6.75 9.5H10.25C10.6642 9.5 11 9.16421 11 8.75C11 8.33579 10.6642 8 10.25 8H6.75ZM6 11.75C6 11.3358 6.33579 11 6.75 11H14.1735C14.0646 11.2294 14.0048 11.4843 14.0047 11.7492L14.0043 12.5H6.75C6.33579 12.5 6 12.1642 6 11.75ZM20.5 6.75V14.3987L22 16.0619V6.75C22 5.23122 20.7688 4 19.25 4H4.75C3.23122 4 2 5.23122 2 6.75V17.25C2 18.7688 3.23122 20 4.75 20H14.0006L14.0014 18.5H4.75C4.05964 18.5 3.5 17.9404 3.5 17.25V6.75C3.5 6.05964 4.05964 5.5 4.75 5.5H19.25C19.9404 5.5 20.5 6.05964 20.5 6.75ZM6.75 14C6.33579 14 6 14.3358 6 14.75C6 15.1642 6.33579 15.5 6.75 15.5H12.25C12.6642 15.5 13 15.1642 13 14.75C13 14.3358 12.6642 14 12.25 14H6.75ZM15.4858 11.0499C15.7755 10.9386 16.1038 11.0173 16.3116 11.2477L22.6766 18.3052C22.8974 18.55 22.9324 18.9104 22.7628 19.1932C22.5932 19.476 22.2589 19.6148 21.9389 19.5354L18.4023 18.6572L16.3721 21.6715C16.1878 21.9452 15.8463 22.0662 15.5308 21.9698C15.2153 21.8734 14.9998 21.5821 15 21.2522L15.0047 11.7497C15.0048 11.4393 15.1961 11.1611 15.4858 11.0499Z" 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/slide_text_cursor_24_regular.svg";

Details

Keywords

slidelandscapedocumentpresentationcursorclick