Rotate Right icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_rotate_right_24_regular.svg" width="24" height="24" alt="Rotate Right">

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="M8.98489 5.00002C8.90135 5.00019 8.81821 5.00178 8.7355 5.00477C8.7297 5.00498 8.7239 5.0052 8.7181 5.00542C7.55763 5.05015 6.48324 5.36959 5.58643 5.88751C4.02356 6.79009 3 8.29543 3 10C3 11.7078 4.02751 13.2157 5.59546 14.1177C6.56274 14.6741 7.73571 15 9 15H9.5C9.81933 15 10.092 14.8004 10.2002 14.5192C10.2324 14.4357 10.25 14.3449 10.25 14.25C10.25 13.8358 9.91421 13.5 9.5 13.5H9C8.03665 13.5 7.14401 13.2646 6.412 12.8636C5.25554 12.2302 4.5 11.1837 4.5 10C4.5 8.81627 5.25554 7.76979 6.41201 7.13637C7.08679 6.76678 7.89807 6.53782 8.7754 6.50428L9 6.5H15.939L14.2197 8.21967C14.2193 8.21999 14.219 8.22032 14.2187 8.22064C13.9268 8.51361 13.9271 8.98776 14.2197 9.28033C14.4859 9.5466 14.9026 9.5708 15.1962 9.35295L15.2803 9.28033C15.2804 9.2803 15.2803 9.28037 15.2803 9.28033L15.2812 9.27945L18.2803 6.28033C18.2863 6.27432 18.2922 6.26823 18.298 6.26208C18.5616 5.98033 18.5672 5.54487 18.3149 5.25657C18.3038 5.24398 18.2923 5.23167 18.2803 5.21967L15.2813 2.22064C15.2811 2.22046 15.2815 2.22083 15.2813 2.22064C15.2812 2.2205 15.2805 2.21981 15.2803 2.21967L15.1962 2.14705C14.9026 1.9292 14.4859 1.9534 14.2197 2.21967C13.9271 2.51224 13.9268 2.98639 14.2187 3.27936C14.219 3.27968 14.2193 3.28001 14.2197 3.28033L15.938 5H9C8.99496 5 8.98992 5.00001 8.98489 5.00002ZM3.61101 20.0673C3.37203 20.2056 3.29046 20.5115 3.42882 20.7505C3.51821 20.9049 3.68311 21 3.86153 21H20C20.5522 21 21 20.5523 21 20V10.8672C21 10.5911 20.7761 10.3672 20.5 10.3672C20.412 10.3672 20.3256 10.3904 20.2494 10.4345L3.61101 20.0673ZM7.58467 19.5L19.5 12.6017V19.5H7.58467Z" 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_right_24_regular.svg";

Details

Keywords

editcreatecanvashorizontalvertical