Globe Sync icon

Use the Globe 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 { GlobeSync24Regular, GlobeSync24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_globe_sync_24_regular.svg" width="24" height="24" alt="Globe 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.0016 1.99902C17.5253 1.99902 22.0031 6.47687 22.0031 12.0006C22.0031 12.2641 21.9929 12.5253 21.9729 12.7837C21.535 12.3682 21.0392 12.0131 20.4989 11.7317C20.4804 11.1367 20.4008 10.5572 20.2662 9.99909L16.9081 9.99994C16.9404 10.3346 16.9647 10.6751 16.9806 11.0204C16.4648 11.0612 15.966 11.1622 15.4911 11.3164C15.4752 10.8662 15.4438 10.4266 15.3985 9.99999H8.60462C8.5366 10.6403 8.5 11.31 8.5 12.0006C8.5 13.0601 8.58615 14.0704 8.73973 15.0007H11.4979C11.3003 15.4747 11.1571 15.9772 11.0764 16.5003H9.06265C9.6609 18.7153 10.6643 20.2345 11.7167 20.4701C12.0003 21.0212 12.3604 21.5265 12.7829 21.9721C12.5251 21.992 12.2645 22.0021 12.0016 22.0021C6.47785 22.0021 2 17.5243 2 12.0006C2 6.47687 6.47785 1.99902 12.0016 1.99902ZM7.50986 16.5009L4.78738 16.5007C5.74572 18.0338 7.17916 19.2394 8.88154 19.9114C8.35927 19.0915 7.92828 18.0653 7.61127 16.8959L7.50986 16.5009ZM7.09497 9.99992H3.73737L3.73261 10.0171C3.58053 10.6535 3.5 11.3176 3.5 12.0006C3.5 13.0567 3.69259 14.0679 4.04456 15.0009L7.21773 15.0005C7.07543 14.0514 7 13.0432 7 12.0006C7 11.3166 7.03246 10.6474 7.09497 9.99992ZM8.8826 4.08973L8.8597 4.09844C6.81238 4.91315 5.15637 6.50046 4.2517 8.50033L7.29982 8.50069C7.61317 6.7479 8.16002 5.22198 8.8826 4.08973ZM12.0016 3.49902L11.8859 3.50432C10.6205 3.62008 9.39798 5.62205 8.83026 8.50027H15.1728C14.6067 5.63011 13.3895 3.63131 12.1278 3.50534L12.0016 3.49902ZM15.1216 4.08979L15.2284 4.26388C15.8976 5.37635 16.4057 6.83623 16.7033 8.50069L19.7514 8.50033C18.8868 6.58892 17.3358 5.05439 15.4128 4.21106L15.1216 4.08979ZM12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5ZM20.5 14C20.7761 14 21 14.2239 21 14.5V16.5C21 16.7761 20.7761 17 20.5 17H18.5C18.2239 17 18 16.7761 18 16.5C18 16.2239 18.2239 16 18.5 16H19.5003C19.0436 15.392 18.3174 15 17.5 15C16.6666 15 15.9283 15.4073 15.4733 16.036C15.3113 16.2597 14.9987 16.3098 14.775 16.1478C14.5514 15.9859 14.5013 15.6733 14.6632 15.4496C15.2982 14.5724 16.3323 14 17.5 14C18.4798 14 19.3651 14.4027 20 15.0506V14.5C20 14.2239 20.2239 14 20.5 14ZM15 19.9494V20.5C15 20.7761 14.7761 21 14.5 21C14.2239 21 14 20.7761 14 20.5V18.5C14 18.2239 14.2239 18 14.5 18H16.5C16.7761 18 17 18.2239 17 18.5C17 18.7761 16.7761 19 16.5 19H15.4998C15.9564 19.608 16.6827 20 17.5 20C18.2663 20 18.9518 19.6558 19.4112 19.1118C19.5893 18.9008 19.9048 18.8742 20.1158 19.0523C20.3268 19.2305 20.3534 19.546 20.1752 19.7569C19.534 20.5164 18.5732 21 17.5 21C16.5203 21 15.6349 20.5973 15 19.9494Z" 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/globe_sync_24_regular.svg";

Details

Keywords

webworldearthglobal