Arrow Swap icon
Used for swapping content. The Arrow Swap 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 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" />;
}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>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/arrow_swap_24_regular.svg";Details
| Name | Arrow Swap |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_swap_24_regular.svg |
| Filled file | ic_fluent_arrow_swap_24_filled.svg |
| React components | ArrowSwap24Regular, ArrowSwap24Filled |
| License | MIT (© Microsoft Corporation) |