Globe Clock icon
Used in scenarios representing the internet & global representation scenarios. The Globe Clock 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 Globe Clock 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 { GlobeClock24Regular, GlobeClock24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeClock24Regular aria-label="Globe Clock" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_clock_24_regular.svg" width="24" height="24" alt="Globe Clock"> 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 2C17.5253 2 22.0031 6.47785 22.0031 12.0016C22.0031 12.2648 21.9929 12.5256 21.973 12.7837C21.5343 12.3676 21.038 12.0122 20.4971 11.7307L20.501 11.908L20.4933 11.5903C20.4674 11.0452 20.3901 10.5135 20.2662 10.0001L20.2516 10.001L16.9081 10.0009C16.9404 10.3355 16.9647 10.676 16.9806 11.0213C16.4643 11.0613 15.965 11.1624 15.4897 11.3168C15.4751 10.866 15.4437 10.427 15.3985 10.001H8.60462C8.5366 10.6412 8.5 11.3109 8.5 12.0016C8.5 13.0611 8.58615 14.0714 8.73973 15.0016L11.4976 15.0014C11.3 15.4755 11.157 15.978 11.0763 16.5011L9.06265 16.5013C9.66105 18.7168 10.6648 20.2363 11.7176 20.4713C12.0009 21.0221 12.361 21.5273 12.7835 21.9726C12.5256 21.9929 12.2648 22.0031 12.0016 22.0031C6.47785 22.0031 2 17.5253 2 12.0016C2 6.47785 6.47785 2 12.0016 2ZM7.50986 16.5018L4.78738 16.5017C5.74572 18.0348 7.17916 19.2404 8.88154 19.9123C8.30124 19.0014 7.83363 17.8356 7.50986 16.5018ZM3.73737 10.0009L3.73261 10.0181C3.58053 10.6545 3.5 11.3186 3.5 12.0016C3.5 13.0577 3.69259 14.0689 4.04457 15.0019L7.21773 15.0015C7.07543 14.0524 7 13.0442 7 12.0016C7 11.3175 7.03246 10.6483 7.09497 10.0009L3.75155 10.001L3.73737 10.0009ZM8.8826 4.0907L8.8597 4.09942C6.81238 4.91413 5.15637 6.50144 4.2517 8.5013L7.29982 8.50167C7.61317 6.74888 8.16002 5.22295 8.8826 4.0907ZM12.0016 3.5L11.8859 3.5053C10.6205 3.62106 9.39798 5.62302 8.83026 8.50125H15.1728C14.5878 5.53542 13.3076 3.5 12.0016 3.5ZM15.1216 4.09076L15.2284 4.26486C15.8976 5.37732 16.4057 6.83721 16.7033 8.50167L19.7514 8.5013C18.8435 6.49433 17.1789 4.90285 15.1216 4.09076ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM17.5 14C17.7761 14 18 14.2239 18 14.5V17H20C20.2761 17 20.5 17.2239 20.5 17.5C20.5 17.7761 20.2761 18 20 18H17.5C17.2239 18 17 17.7761 17 17.5V14.5C17 14.2239 17.2239 14 17.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/globe_clock_24_regular.svg";Details
| Name | Globe Clock |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_clock_24_regular.svg |
| Filled file | ic_fluent_globe_clock_24_filled.svg |
| React components | GlobeClock24Regular, GlobeClock24Filled |
| License | MIT (© Microsoft Corporation) |