Crop Arrow Rotate icon

The Crop Arrow Rotate icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_crop_arrow_rotate_24_regular.svg

Crop Arrow Rotate icon in React

npm install @fluentui/react-icons

import { CropArrowRotate24Regular } from "@fluentui/react-icons";

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

Crop Arrow Rotate icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/crop_arrow_rotate_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/crop_arrow_rotate_24_regular.svg" width="24" height="24" alt="Crop Arrow Rotate">

Crop Arrow Rotate icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.CropArrowRotate())" />

Crop Arrow Rotate icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.crop_arrow_rotate_24_regular)

Crop Arrow Rotate icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF05EA;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF05EA;" FontSize="24" />

Crop Arrow Rotate icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_crop_arrow_rotate_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f05ea";
  font-size: 24px;
}

Crop Arrow Rotate icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_crop_arrow_rotate_24_regular" />

// Kotlin
R.drawable.ic_fluent_crop_arrow_rotate_24_regular

Crop Arrow Rotate icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .cropArrowRotate24Regular)

Crop Arrow Rotate icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameCrop Arrow Rotate
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_crop_arrow_rotate_24_regular.svg
Filled fileic_fluent_crop_arrow_rotate_24_filled.svg
React (Regular)CropArrowRotate16Regular, CropArrowRotate20Regular, CropArrowRotate24Regular
React (Filled)CropArrowRotate16Filled, CropArrowRotate20Filled, CropArrowRotate24Filled
LicenseMIT (© Microsoft Corporation)

Related icons