Crop Arrow Rotate icon

Use the Crop Arrow Rotate 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 { CropArrowRotate24Regular, CropArrowRotate24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CropArrowRotate24Regular aria-label="Crop Arrow Rotate" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_crop_arrow_rotate_24_regular.svg" width="24" height="24" alt="Crop Arrow Rotate">

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="M4.70183 7.63621C6.18842 5.1568 8.90036 3.5 11.9986 3.5C14.5951 3.5 16.9204 4.66368 18.4804 6.5H16.75C16.3358 6.5 16 6.83579 16 7.25C16 7.66421 16.3358 8 16.75 8H19.9081C19.9288 8.00087 19.9497 8.00087 19.9705 8H20.25C20.6642 8 21 7.66421 21 7.25V3.75C21 3.33579 20.6642 3 20.25 3C19.8358 3 19.5 3.33579 19.5 3.75V5.38637C17.6681 3.31063 14.9867 2 11.9986 2C8.35181 2 5.16173 3.95217 3.41535 6.86487C3.20235 7.22012 3.31767 7.68078 3.67292 7.89378C4.02817 8.10678 4.48883 7.99146 4.70183 7.63621ZM4.5 18.6168V20.25C4.5 20.6642 4.16421 21 3.75 21C3.33579 21 3 20.6642 3 20.25V16.75C3 16.3358 3.33579 16 3.75 16H4.02667C4.04752 15.9991 4.06835 15.9991 4.08912 16H7.25C7.66421 16 8 16.3358 8 16.75C8 17.1642 7.66421 17.5 7.25 17.5H5.51682C7.07683 19.3363 9.40206 20.5 11.9986 20.5C15.0968 20.5 17.8088 18.8432 19.2954 16.3638C19.5084 16.0085 19.969 15.8932 20.3243 16.1062C20.6795 16.3192 20.7948 16.7799 20.5818 17.1351C18.8355 20.0478 15.6454 22 11.9986 22C9.01205 22 6.33182 20.6907 4.5 18.6168ZM9.5 6.75C9.5 6.33579 9.16421 6 8.75 6C8.33579 6 8 6.33579 8 6.75V8H6.75C6.33579 8 6 8.33579 6 8.75C6 9.16421 6.33579 9.5 6.75 9.5H8V13.25C8 14.7688 9.23122 16 10.75 16H14.5V17.25C14.5 17.6642 14.8358 18 15.25 18C15.6642 18 16 17.6642 16 17.25V16H17.25C17.6642 16 18 15.6642 18 15.25C18 14.8358 17.6642 14.5 17.25 14.5H10.75C10.0596 14.5 9.5 13.9404 9.5 13.25V6.75ZM14.5 10.75V13.5H16V10.75C16 9.23122 14.7688 8 13.25 8H10.5V9.5H13.25C13.9404 9.5 14.5 10.0596 14.5 10.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/crop_arrow_rotate_24_regular.svg";

Details