Fluent Icons

Arrow Swap icon

Used for swapping content. The Arrow Swap icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 28 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_arrow_swap_24_regular.svg

Arrow Swap icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <ArrowSwap24Regular aria-label="Arrow Swap" />;
}

Arrow Swap icon in SVG

npm install @fluentui/svg-icons

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

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

Arrow Swap icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Arrow Swap icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.arrow_swap_24_regular)

Arrow Swap 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="&#xF18E;" FontSize="24" />

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

Arrow Swap 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_arrow_swap_24_regular"></i>

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

Arrow Swap icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_arrow_swap_24_regular

Arrow Swap icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .arrowSwap24Regular)

Arrow Swap 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 Arrow Swap 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 { ArrowSwap24Regular, ArrowSwap24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowSwap24Regular aria-label="Arrow Swap" />;
}

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_arrow_swap_24_regular.svg" width="24" height="24" alt="Arrow Swap">

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="M14.7824 2.21965L19.2774 6.71441C19.5435 6.98047 19.5679 7.39676 19.3505 7.69038L19.278 7.77451L14.783 12.2794C14.4904 12.5726 14.0155 12.5731 13.7223 12.2805C13.4558 12.0145 13.4311 11.5979 13.6486 11.3041L13.7212 11.2199L16.938 7.997L5.24219 7.99766C4.86249 7.99766 4.5487 7.71551 4.49903 7.34943L4.49219 7.24766C4.49219 6.86797 4.77434 6.55417 5.14042 6.50451L5.24219 6.49766L16.94 6.497L13.7218 3.28035C13.4555 3.01409 13.4313 2.59743 13.6491 2.30381L13.7217 2.21969C13.988 1.95341 14.4047 1.92919 14.6983 2.14704L14.7824 2.21965L19.2774 6.71441L14.7824 2.21965ZM19.5002 16.6491L19.507 16.7509C19.507 17.1306 19.2249 17.4444 18.8588 17.494L18.757 17.5009L7.06103 17.5L10.2822 20.7194C10.5486 20.9856 10.5729 21.4023 10.3552 21.696L10.2826 21.7801C10.0165 22.0465 9.59982 22.0709 9.30612 21.8531L9.22197 21.7806L4.72197 17.2843C4.45559 17.0182 4.43121 16.6015 4.64894 16.3078L4.72153 16.2237L9.22153 11.7199C9.5143 11.4269 9.98917 11.4267 10.2822 11.7194C10.5486 11.9856 10.5729 12.4023 10.3552 12.696L10.2826 12.7801L7.06503 16L18.757 16.0009C19.1367 16.0009 19.4505 16.283 19.5002 16.6491L19.507 16.7509L19.5002 16.6491Z" fill="currentColor"/></svg>

Details

NameArrow Swap
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_arrow_swap_24_regular.svg
Filled fileic_fluent_arrow_swap_24_filled.svg
React (Regular)ArrowSwap16Regular, ArrowSwap20Regular, ArrowSwap24Regular, ArrowSwap28Regular
React (Filled)ArrowSwap16Filled, ArrowSwap20Filled, ArrowSwap24Filled, ArrowSwap28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

arrowdirection

Related icons

Arrow ClockwiseArrow Clockwise DashesArrow Clockwise Dashes SettingsArrow Collapse AllArrow CounterclockwiseArrow Counterclockwise DashesArrow Down RightArrow Enter LeftArrow Enter UpArrow Expand AllArrow ExportArrow Export Up