Cloud Sync icon

Use the Cloud 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 { CloudSync24Regular, CloudSync24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cloud_sync_24_regular.svg" width="24" height="24" alt="Cloud 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="M12 4.5C9.58676 4.5 7.61684 6.39994 7.50502 8.78512C7.48627 9.18524 7.15641 9.5 6.75585 9.5H6.5C4.84315 9.5 3.5 10.8431 3.5 12.5C3.5 14.1569 4.84315 15.5 6.5 15.5H10.0764C10.0261 15.826 10 16.1599 10 16.5C10 16.6682 10.0064 16.835 10.0189 17H6.5C4.01472 17 2 14.9853 2 12.5C2 10.1564 3.79155 8.23125 6.07981 8.01936C6.54808 5.17188 9.02022 3 12 3C14.9798 3 17.4519 5.17189 17.9202 8.01936C20.2085 8.23125 22 10.1564 22 12.5C22 12.6664 21.991 12.8307 21.9734 12.9925C21.5031 12.2601 20.8898 11.6283 20.1729 11.1365C19.6764 10.165 18.6659 9.5 17.5 9.5H17.2442C16.8436 9.5 16.5137 9.18524 16.495 8.78512C16.3832 6.39994 14.4132 4.5 12 4.5ZM16.5 22C19.5376 22 22 19.5376 22 16.5C22 13.4624 19.5376 11 16.5 11C13.4624 11 11 13.4624 11 16.5C11 19.5376 13.4624 22 16.5 22ZM18.5003 15C18.0436 14.392 17.3174 14 16.5 14C15.7597 14 15.095 14.3212 14.6365 14.8335C14.4523 15.0392 14.1362 15.0567 13.9305 14.8726C13.7247 14.6884 13.7072 14.3723 13.8913 14.1665C14.5315 13.4513 15.4634 13 16.5 13C17.4798 13 18.3651 13.4027 19 14.0506V13.5C19 13.2239 19.2239 13 19.5 13C19.7761 13 20 13.2239 20 13.5V15.5C20 15.7761 19.7761 16 19.5 16H17.5C17.2239 16 17 15.7761 17 15.5C17 15.2239 17.2239 15 17.5 15H18.5003ZM13 17.5C13 17.2239 13.2239 17 13.5 17H15.5C15.7761 17 16 17.2239 16 17.5C16 17.7761 15.7761 18 15.5 18H14.4997C14.9564 18.608 15.6826 19 16.5 19C17.2403 19 17.905 18.6788 18.3635 18.1665C18.5477 17.9608 18.8638 17.9433 19.0695 18.1274C19.2753 18.3116 19.2928 18.6277 19.1087 18.8335C18.4685 19.5487 17.5366 20 16.5 20C15.5202 20 14.6349 19.5973 14 18.9494V19.5C14 19.7761 13.7761 20 13.5 20C13.2239 20 13 19.7761 13 19.5V17.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/cloud_sync_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesync