Agents Sync icon

Use the Agents Sync 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 { AgentsSync24Regular, AgentsSync24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AgentsSync24Regular aria-label="Agents Sync" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_agents_sync_24_regular.svg" width="24" height="24" alt="Agents Sync">

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="M18.5 12C21.5376 12 24 14.4624 24 17.5C24 20.5376 21.5376 23 18.5 23C15.4625 22.9999 13 20.5375 13 17.5C13 14.4625 15.4625 12.0001 18.5 12ZM11.249 3C11.6632 3 11.999 3.33579 11.999 3.75C11.999 4.16421 11.6632 4.5 11.249 4.5H8.11617C7.84812 4.50019 7.60053 4.64366 7.46676 4.87598L3.56831 11.6455C3.43816 11.8717 3.43558 12.1498 3.5605 12.3789L7.17477 19.0059C7.34082 19.3102 7.66013 19.4997 8.0068 19.5C8.41972 19.5 8.78585 19.2323 8.9111 18.8389L13.4033 4.71973C13.7292 3.69563 14.6811 3.00018 15.7558 3C16.6384 3.00008 17.4539 3.47159 17.8945 4.23633L21.7178 10.877C21.9237 11.2347 22.0226 11.6352 22.0166 12.0342C21.4586 11.6745 20.8423 11.3977 20.1846 11.2217L16.5947 4.98535C16.4219 4.68534 16.1021 4.50008 15.7558 4.5C15.3343 4.50018 14.9608 4.77309 14.833 5.1748L10.3398 19.2939C10.0165 20.3098 9.07292 21 8.0068 21C7.11118 20.9997 6.28725 20.5099 5.85836 19.7236L2.24312 13.0977C1.86815 12.4101 1.87789 11.5763 2.26851 10.8975L6.16598 4.12695C6.56747 3.4297 7.31161 3.00019 8.11617 3H11.249ZM15.5 18C15.2239 18.0001 15 18.2239 15 18.5V20.5C15 20.7761 15.2239 20.9999 15.5 21C15.7761 21 16 20.7761 16 20.5V19.9492C16.6348 20.5971 17.5203 20.9999 18.5 21C19.5732 21 20.5345 20.5163 21.1758 19.7568C21.3536 19.546 21.3268 19.2309 21.1162 19.0527C20.9053 18.8746 20.5893 18.9005 20.4111 19.1113C19.9517 19.6553 19.2663 20 18.5 20C17.6827 19.9999 16.9566 19.6079 16.5 19H17.5C17.7761 19 18 18.7761 18 18.5C18 18.2239 17.7761 18 17.5 18H15.5ZM21.5 14C21.2239 14.0001 21 14.2239 21 14.5V15.0508C20.3651 14.4029 19.4797 14 18.5 14C17.3324 14.0001 16.2981 14.5721 15.6631 15.4492C15.5012 15.6729 15.5517 15.9855 15.7754 16.1475C15.9991 16.3094 16.3117 16.2598 16.4736 16.0361C16.9286 15.4075 17.6666 15.0001 18.5 15C19.3172 15 20.0433 15.3922 20.5 16H19.5C19.2239 16.0001 19 16.2239 19 16.5C19 16.7761 19.2239 16.9999 19.5 17H21.5C21.7761 17 22 16.7761 22 16.5V14.5C22 14.2239 21.7761 14 21.5 14Z" 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/agents_sync_24_regular.svg";

Details