Panel Right Cursor icon

Use the Panel Right 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 { PanelRightCursor24Regular, PanelRightCursor24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PanelRightCursor24Regular aria-label="Panel Right Cursor" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_panel_right_cursor_24_regular.svg" width="24" height="24" alt="Panel Right 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="M22 7.25C22 5.45507 20.5449 4 18.75 4H5.25C3.45507 4 2 5.45507 2 7.25V16.75C2 18.5449 3.45507 20 5.25 20H13.0011L13.0018 18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H14.5V11.0186C15.0452 10.9384 15.6046 11.1199 16 11.5206V5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V16.5075L21.7803 17.9271C21.9222 17.5621 22 17.1651 22 16.75V7.25ZM14.4858 12.0499C14.7755 11.9386 15.1038 12.0173 15.3116 12.2477L21.6766 19.3052C21.8974 19.55 21.9324 19.9104 21.7628 20.1932C21.5932 20.476 21.2589 20.6148 20.9389 20.5354L17.4023 19.6572L15.3721 22.6715C15.1878 22.9452 14.8463 23.0662 14.5308 22.9698C14.2153 22.8734 13.9998 22.5821 14 22.2522L14.0047 12.7497C14.0048 12.4393 14.1961 12.1611 14.4858 12.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/panel_right_cursor_24_regular.svg";

Details

Keywords

panesidebarmodalelevatecursoropen