Arrow Sync Checkmark icon

Use the Arrow Sync Checkmark 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 { ArrowSyncCheckmark24Regular, ArrowSyncCheckmark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowSyncCheckmark24Regular aria-label="Arrow Sync Checkmark" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_sync_checkmark_24_regular.svg" width="24" height="24" alt="Arrow Sync Checkmark">

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="M16.3921 6.23128C16.0627 5.9801 15.9994 5.50947 16.2506 5.18011C16.5017 4.85075 16.9724 4.78738 17.3017 5.03856C19.4582 6.68321 20.75 9.23526 20.75 12C20.75 16.5903 17.2154 20.355 12.7194 20.7208L13.4697 21.4697L13.5423 21.5538C13.7601 21.8474 13.7359 22.2641 13.4697 22.5303C13.1768 22.8232 12.7019 22.8232 12.409 22.5303L10.409 20.5303L10.3364 20.4462C10.1185 20.1526 10.1427 19.7359 10.409 19.4697L10.742 19.1367C11.1506 19.2083 11.5711 19.2456 12.0002 19.2456C12.2699 19.2456 12.5362 19.2309 12.7983 19.2021L12.7933 19.2071C16.4242 18.812 19.25 15.736 19.25 12C19.25 9.70821 18.1804 7.59515 16.3921 6.23128ZM10.5303 2.53033C10.2374 2.23744 10.2374 1.76256 10.5303 1.46967C10.8232 1.17678 11.2981 1.17678 11.591 1.46967L13.591 3.46967C13.8839 3.76256 13.8839 4.23744 13.591 4.53033L13.2577 4.86361C12.8493 4.79215 12.4291 4.75488 12.0002 4.75488C11.7298 4.75488 11.4629 4.7697 11.2002 4.79856L11.2057 4.79301C7.57532 5.18861 4.75 8.26436 4.75 12C4.75 14.1922 5.72793 16.2229 7.3861 17.5926C7.70545 17.8564 7.75048 18.3292 7.48669 18.6485C7.22289 18.9679 6.75016 19.0129 6.43081 18.7491C4.43126 17.0974 3.25 14.6445 3.25 12C3.25 7.41008 6.78409 3.6456 11.2796 3.27923L10.5303 2.53033ZM15.0303 11.0303C15.3232 10.7374 15.3232 10.2626 15.0303 9.96967C14.7374 9.67678 14.2626 9.67678 13.9697 9.96967L11 12.9393L10.0303 11.9697C9.73744 11.6768 9.26256 11.6768 8.96967 11.9697C8.67678 12.2626 8.67678 12.7374 8.96967 13.0303L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.0303 11.0303ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16.5C9.51472 16.5 7.5 14.4853 7.5 12C7.5 9.51472 9.51472 7.5 12 7.5C14.4853 7.5 16.5 9.51472 16.5 12C16.5 14.4853 14.4853 16.5 12 16.5Z" 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_sync_checkmark_24_regular.svg";

Details

Keywords

arrowdirectionsynchronizecheckmark