Globe Desktop icon
Used in scenarios representing the internet & global representation scenarios. The Globe Desktop 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 Desktop 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 { GlobeDesktop24Regular, GlobeDesktop24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeDesktop24Regular aria-label="Globe Desktop" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_desktop_24_regular.svg" width="24" height="24" alt="Globe Desktop"> 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="M22.0016 11.9991C22.0014 6.47562 17.5236 1.99805 12.0001 1.99805C6.47638 1.99805 1.99854 6.47589 1.99854 11.9996C1.99854 17.1858 5.94589 21.45 11.0001 21.9518V20.1091C10.222 19.4966 9.52161 18.204 9.06118 16.4993H11.0001V14.9997H8.73827C8.58468 14.0694 8.49854 13.0591 8.49854 11.9996C8.49854 11.309 8.53514 10.6393 8.60316 9.99901H15.397C15.465 10.6391 15.5016 11.3087 15.5016 11.9991H17.0016C17.0016 11.3153 16.9692 10.6462 16.9067 9.99897L20.2647 9.99811C20.4195 10.6398 20.5016 11.3099 20.5016 11.9991H22.0001L22.0016 11.9991ZM4.78591 16.4998L7.5084 16.4999L7.60981 16.8949C7.92681 18.0643 8.3578 19.0906 8.88008 19.9104C7.1777 19.2384 5.74425 18.0328 4.78591 16.4998ZM3.7359 9.99895H7.09351C7.031 10.6464 6.99854 11.3156 6.99854 11.9996C6.99854 13.0422 7.07396 14.0504 7.21626 14.9995L4.0431 14.9999C3.69112 14.0669 3.49854 13.0558 3.49854 11.9996C3.49854 11.3166 3.57906 10.6525 3.73115 10.0162L3.7359 9.99895ZM8.85823 4.09747L8.88114 4.08875C8.15855 5.221 7.61171 6.74693 7.29835 8.49972L4.25023 8.49935C5.1549 6.49949 6.81092 4.91218 8.85823 4.09747ZM11.8844 3.50335L12.0001 3.49805L12.1264 3.50436C13.388 3.63033 14.6052 5.62914 15.1714 8.4993H8.8288C9.39651 5.62107 10.619 3.6191 11.8844 3.50335ZM15.2269 4.2629L15.1201 4.08881L15.4113 4.21008C17.3343 5.05341 18.8853 6.58795 19.7499 8.49935L16.7018 8.49972C16.4043 6.83525 15.8961 5.37537 15.2269 4.2629ZM12.0001 18.9991C12.0001 19.5514 12.4478 19.9991 13.0001 19.9991H16.0001V21.9991H15.5001C15.2239 21.9991 15.0001 22.2229 15.0001 22.4991C15.0001 22.7752 15.2239 22.9991 15.5001 22.9991H19.5001C19.7762 22.9991 20.0001 22.7752 20.0001 22.4991C20.0001 22.2229 19.7762 21.9991 19.5001 21.9991H19.0001V19.9991H22.0001C22.5523 19.9991 23.0001 19.5514 23.0001 18.9991V13.9991C23.0001 13.4468 22.5523 12.9991 22.0001 12.9991H13.0001C12.4478 12.9991 12.0001 13.4468 12.0001 13.9991V18.9991Z" 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_desktop_24_regular.svg";Details
| Name | Globe Desktop |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_desktop_24_regular.svg |
| Filled file | ic_fluent_globe_desktop_24_filled.svg |
| React components | GlobeDesktop24Regular, GlobeDesktop24Filled |
| License | MIT (© Microsoft Corporation) |