Tab Desktop Arrow Clockwise icon

Use the Tab Desktop Arrow Clockwise 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 { TabDesktopArrowClockwise24Regular, TabDesktopArrowClockwise24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TabDesktopArrowClockwise24Regular aria-label="Tab Desktop Arrow Clockwise" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tab_desktop_arrow_clockwise_24_regular.svg" width="24" height="24" alt="Tab Desktop Arrow Clockwise">

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="M5.75 3C4.23122 3 3 4.23122 3 5.75V11.101C3.44348 10.6485 3.9479 10.2558 4.5 9.93648V5.75C4.5 5.05964 5.05964 4.5 5.75 4.5H11V5.75C11 6.99264 12.0074 8 13.25 8H19.5V18.25C19.5 18.9404 18.9404 19.5 18.25 19.5H14.0635C13.7442 20.0521 13.3515 20.5565 12.899 21H18.25C19.7688 21 21 19.7688 21 18.25V5.75C21 4.23122 19.7688 3 18.25 3H5.75ZM19.5 6.5H13.25C12.8358 6.5 12.5 6.16421 12.5 5.75V4.5H18.25C18.9404 4.5 19.5 5.05964 19.5 5.75V6.5ZM12.25 9.75C12.6642 9.75 13 10.0858 13 10.5V13.25C13 13.6642 12.6642 14 12.25 14H9.5C9.08579 14 8.75 13.6642 8.75 13.25C8.75 12.8358 9.08579 12.5 9.5 12.5H10.8293C10.8235 12.4956 10.8178 12.4912 10.8121 12.4867C10.0416 11.869 9.06492 11.5 8 11.5C5.51472 11.5 3.5 13.5147 3.5 16C3.5 18.4853 5.51472 20.5 8 20.5C10.4853 20.5 12.5 18.4853 12.5 16C12.5 15.5858 12.8358 15.25 13.25 15.25C13.6642 15.25 14 15.5858 14 16C14 19.3137 11.3137 22 8 22C4.68629 22 2 19.3137 2 16C2 12.6863 4.68629 10 8 10C9.30535 10 10.5149 10.4176 11.5 11.1261V10.5C11.5 10.0858 11.8358 9.75 12.25 9.75Z" 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/tab_desktop_arrow_clockwise_24_regular.svg";

Details

Keywords

tabmobilerectanglebrowser