Globe Location icon
Used in scenarios representing the internet & global representation scenarios. The Globe Location 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 Location 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 { GlobeLocation24Regular, GlobeLocation24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeLocation24Regular aria-label="Globe Location" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_location_24_regular.svg" width="24" height="24" alt="Globe Location"> 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.0001 1.99805C17.5238 1.99805 22.0016 6.47589 22.0016 11.9996C22.0016 12.391 21.9792 12.7771 21.9354 13.1568C21.5198 12.7312 21.0358 12.3728 20.5011 12.0993C20.5014 12.0661 20.5016 12.0329 20.5016 11.9996C20.5016 11.3102 20.4196 10.64 20.2647 9.99811L16.9067 9.99897C16.9566 10.5166 16.9874 11.0482 16.9977 11.5902C16.4685 11.6876 15.9659 11.8608 15.5014 12.0981L15.5016 11.9996C15.5016 11.309 15.465 10.6393 15.397 9.99901H8.60316C8.53514 10.6393 8.49853 11.309 8.49853 11.9996C8.49853 13.0591 8.58468 14.0694 8.73827 14.9997H12.8748C12.6906 15.4714 12.5697 15.9747 12.5225 16.4993H9.06118C9.71322 18.9135 10.8466 20.5011 12.0001 20.5011C12.455 20.5011 12.9067 20.2542 13.3271 19.8071C13.688 20.4229 14.1594 21.0286 14.7259 21.6252C13.8594 21.8701 12.945 22.0011 12.0001 22.0011C6.47638 22.0011 1.99854 17.5233 1.99854 11.9996C1.99854 6.47589 6.47638 1.99805 12.0001 1.99805ZM7.5084 16.4999L4.78591 16.4998C5.74425 18.0328 7.1777 19.2384 8.88008 19.9104C8.3578 19.0906 7.92681 18.0643 7.60981 16.8949L7.5084 16.4999ZM7.09351 9.99895H3.7359L3.73115 10.0162C3.57906 10.6525 3.49854 11.3166 3.49854 11.9996C3.49854 13.0558 3.69112 14.0669 4.0431 14.9999L7.21626 14.9995C7.07396 14.0504 6.99854 13.0422 6.99854 11.9996C6.99854 11.3156 7.031 10.6464 7.09351 9.99895ZM8.88114 4.08875L8.85823 4.09747C6.81092 4.91218 5.1549 6.49949 4.25023 8.49935L7.29835 8.49972C7.61171 6.74693 8.15855 5.221 8.88114 4.08875ZM12.0001 3.49805L11.8844 3.50335C10.619 3.6191 9.39651 5.62107 8.8288 8.4993H15.1714C14.6052 5.62914 13.388 3.63033 12.1264 3.50436L12.0001 3.49805ZM15.1201 4.08881L15.2269 4.2629C15.8961 5.37537 16.4043 6.83525 16.7018 8.49972L19.7499 8.49935C18.8853 6.58795 17.3343 5.05341 15.4113 4.21008L15.1201 4.08881ZM22.5001 16.9991C22.5001 14.5138 20.4853 12.4991 18.0001 12.4991C15.5148 12.4991 13.5001 14.5138 13.5001 16.9991C13.5001 18.8617 14.9199 20.8139 17.7001 22.8991C17.8778 23.0324 18.1223 23.0324 18.3001 22.8991C21.0803 20.8139 22.5001 18.8617 22.5001 16.9991ZM16.5001 16.9991C16.5001 16.1707 17.1716 15.4991 18.0001 15.4991C18.8285 15.4991 19.5001 16.1707 19.5001 16.9991C19.5001 17.8275 18.8285 18.4991 18.0001 18.4991C17.1716 18.4991 16.5001 17.8275 16.5001 16.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_location_24_regular.svg";Details
| Name | Globe Location |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_location_24_regular.svg |
| Filled file | ic_fluent_globe_location_24_filled.svg |
| React components | GlobeLocation24Regular, GlobeLocation24Filled |
| License | MIT (© Microsoft Corporation) |