Rotate Left icon

Use the Rotate 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 { RotateLeft24Regular, RotateLeft24Filled } from "@fluentui/react-icons";

export function Example() {
  return <RotateLeft24Regular aria-label="Rotate Left" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_rotate_left_24_regular.svg" width="24" height="24" alt="Rotate 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="M15.0151 5.00002C15.0986 5.00019 15.1818 5.00178 15.2645 5.00477C15.2703 5.00498 15.2761 5.0052 15.2819 5.00542C16.4423 5.05015 17.5167 5.36959 18.4135 5.88751C19.9764 6.79009 21 8.29543 21 10C21 11.7078 19.9725 13.2157 18.4045 14.1177C17.4372 14.6741 16.2643 15 15 15H14.5C14.1806 15 13.9079 14.8004 13.7997 14.5192C13.7676 14.4357 13.75 14.3449 13.75 14.25C13.75 13.8358 14.0858 13.5 14.5 13.5H15C15.9633 13.5 16.856 13.2646 17.588 12.8636C18.7444 12.2302 19.5 11.1837 19.5 10C19.5 8.81627 18.7444 7.76979 17.588 7.13637C16.9132 6.76678 16.1019 6.53782 15.2246 6.50428L15 6.5H8.06097L9.78126 8.22064C10.0732 8.51361 10.0729 8.98776 9.7803 9.28033C9.51403 9.5466 9.09737 9.5708 8.80375 9.35295L8.71964 9.28033L8.71876 9.27945L5.71964 6.28033C5.71363 6.27432 5.70774 6.26823 5.70198 6.26208C5.43837 5.98033 5.43275 5.54487 5.6851 5.25657C5.69612 5.24398 5.70763 5.23167 5.71964 5.21967L8.71866 2.22064L8.71964 2.21967L8.80375 2.14705C9.09737 1.9292 9.51403 1.9534 9.7803 2.21967C10.0729 2.51224 10.0732 2.98639 9.78127 3.27936L8.06197 5H15C15.005 5 15.01 5.00001 15.0151 5.00002ZM20.389 20.0673C20.6279 20.2056 20.7095 20.5115 20.5711 20.7505C20.4818 20.9049 20.3169 21 20.1384 21H4C3.44772 21 3 20.5523 3 20V10.8672C3 10.5911 3.22386 10.3672 3.5 10.3672C3.58797 10.3672 3.67439 10.3904 3.75052 10.4345L20.389 20.0673ZM16.4153 19.5L4.5 12.6017V19.5H16.4153Z" 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/rotate_left_24_regular.svg";

Details

Keywords

editcreatecanvashorizontalvertical