Image Arrow Counterclockwise icon
Used to represent images in content and photo editing scenarios. The Image Arrow Counterclockwise icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Image Arrow Counterclockwise 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 { ImageArrowCounterclockwise24Regular, ImageArrowCounterclockwise24Filled } from "@fluentui/react-icons";
export function Example() {
return <ImageArrowCounterclockwise24Regular aria-label="Image Arrow Counterclockwise" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_image_arrow_counterclockwise_24_regular.svg" width="24" height="24" alt="Image Arrow Counterclockwise"> 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="M17.75 3C19.5449 3 21 4.45507 21 6.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V11.9785C3.46317 12.275 3.96659 12.5142 4.5 12.6865V17.75C4.5 17.9584 4.53668 18.1584 4.60352 18.3438L10.4258 12.6426C11.2588 11.8272 12.5671 11.7887 13.4453 12.5264L13.5742 12.6436L19.3965 18.3447C19.4636 18.1591 19.5 17.9588 19.5 17.75V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H12.6865C12.5142 3.96659 12.275 3.46317 11.9785 3H17.75ZM12.5244 13.7148C12.2594 13.4554 11.8499 13.4313 11.5586 13.6436L11.4756 13.7148L5.66797 19.4014C5.84992 19.4655 6.04613 19.5 6.25 19.5H17.75C17.9533 19.5 18.1485 19.4651 18.3301 19.4014L12.5244 13.7148ZM6.5 1C9.53757 1 12 3.46243 12 6.5C12 9.53757 9.53757 12 6.5 12C3.46243 12 1 9.53757 1 6.5C1 3.46243 3.46243 1 6.5 1ZM15.252 6.5C16.4957 6.5 17.5038 7.50822 17.5039 8.75195C17.5039 9.99576 16.4958 11.0039 15.252 11.0039C14.0082 11.0038 13 9.99571 13 8.75195C13.0001 7.50827 14.0083 6.50009 15.252 6.5ZM6.50098 3C5.52139 3 4.63529 3.40222 4 4.05078V3.5C4 3.22386 3.77614 3 3.5 3C3.22386 3 3 3.22386 3 3.5V5.5C3 5.77614 3.22386 6 3.5 6H5.5C5.77614 6 6 5.77614 6 5.5C6 5.22386 5.77614 5 5.5 5H4.50098C4.95709 4.3929 5.68317 4 6.50098 4C7.88156 4.00015 9.00098 5.11938 9.00098 6.5C9.00098 7.88062 7.88156 8.99985 6.50098 9C5.78338 9 5.13562 8.69812 4.67969 8.21387C4.5593 8.086 4.39729 8.00008 4.22168 8C3.81128 8 3.55039 8.4272 3.81348 8.74219C4.45551 9.51082 5.42116 10 6.50098 10C8.43385 9.99985 10.001 8.4329 10.001 6.5C10.001 4.5671 8.43385 3.00015 6.50098 3ZM15.252 8C14.8367 8.00009 14.5001 8.3367 14.5 8.75195C14.5 9.16728 14.8366 9.50382 15.252 9.50391C15.6673 9.50391 16.0039 9.16733 16.0039 8.75195C16.0038 8.33665 15.6673 8 15.252 8Z" 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/image_arrow_counterclockwise_24_regular.svg";Details
| Name | Image Arrow Counterclockwise |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_image_arrow_counterclockwise_24_regular.svg |
| Filled file | ic_fluent_image_arrow_counterclockwise_24_filled.svg |
| React components | ImageArrowCounterclockwise24Regular, ImageArrowCounterclockwise24Filled |
| License | MIT (© Microsoft Corporation) |