Globe Surface icon
Used in scenarios representing the internet & global representation scenarios. The Globe Surface 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 Surface 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 { GlobeSurface24Regular, GlobeSurface24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeSurface24Regular aria-label="Globe Surface" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_surface_24_regular.svg" width="24" height="24" alt="Globe Surface"> 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="M20.5 10.5C20.5 5.80558 16.6944 2 12 2C7.30558 2 3.5 5.80558 3.5 10.5C3.5 12.5975 4.25973 14.5176 5.51903 16C5.53684 16.021 5.55474 16.0418 5.57275 16.0626C6.03788 16.5996 6.56918 17.0777 7.15396 17.4842C8.52866 18.4398 10.1989 19 12 19C13.8011 19 15.4714 18.4398 16.846 17.4842C16.871 17.4668 16.8958 17.4494 16.9205 17.4318C17.4985 17.0208 18.0228 16.5394 18.481 16C19.7403 14.5176 20.5 12.5975 20.5 10.5ZM13.4712 15.8717C12.8054 17.2866 12.1823 17.5 12 17.5C11.8177 17.5 11.1946 17.2866 10.5288 15.8717C10.2218 15.2194 9.9634 14.4152 9.78235 13.5H14.2176C14.0366 14.4152 13.7782 15.2194 13.4712 15.8717ZM9.5 10.5C9.5 9.98279 9.52361 9.48136 9.56781 9H14.4322C14.4764 9.48136 14.5 9.98279 14.5 10.5C14.5 11.0172 14.4764 11.5186 14.4322 12H9.56781C9.52361 11.5186 9.5 11.0172 9.5 10.5ZM14.5704 17.013C15.0914 16.0835 15.4993 14.8769 15.7437 13.5H18.3264C17.568 15.0964 16.2232 16.3602 14.5704 17.013ZM15.9379 12C15.9787 11.5131 16 11.0118 16 10.5C16 9.98817 15.9787 9.48691 15.9379 9H18.8389C18.9444 9.48323 19 9.98513 19 10.5C19 11.0149 18.9444 11.5168 18.8389 12H15.9379ZM5.16109 12C5.05559 11.5168 5 11.0149 5 10.5C5 9.98513 5.05559 9.48323 5.16109 9H8.06209C8.02129 9.48691 8 9.98817 8 10.5C8 11.0118 8.02129 11.5131 8.06209 12H5.16109ZM8.25626 13.5C8.50073 14.8769 8.9086 16.0835 9.42963 17.013C7.77679 16.3602 6.43199 15.0964 5.67363 13.5H8.25626ZM14.2176 7.5H9.78235C9.9634 6.58482 10.2218 5.78064 10.5288 5.12829C11.1946 3.71345 11.8177 3.5 12 3.5C12.1823 3.5 12.8054 3.71345 13.4712 5.12829C13.7782 5.78064 14.0366 6.58482 14.2176 7.5ZM18.3264 7.5H15.7437C15.4993 6.12307 15.0914 4.91648 14.5704 3.98698C16.2232 4.63981 17.568 5.90362 18.3264 7.5ZM8.25626 7.5H5.67363C6.43199 5.90362 7.77679 4.63982 9.42962 3.98699C8.9086 4.91648 8.50073 6.12307 8.25626 7.5ZM4.00001 16H4.2531C4.64113 16.5456 5.08534 17.0484 5.5773 17.5H4.57007L3.73674 20.5H20.2633L19.4299 17.5H18.4227C18.9147 17.0484 19.3589 16.5456 19.7469 16H20C20.3369 16 20.6325 16.2247 20.7226 16.5493L21.9726 21.0493C22.0354 21.2751 21.9889 21.5173 21.8471 21.7038C21.7053 21.8904 21.4844 22 21.25 22H2.75001C2.51563 22 2.29474 21.8904 2.15291 21.7038C2.01108 21.5173 1.96464 21.2751 2.02737 21.0493L3.27737 16.5493C3.36754 16.2247 3.6631 16 4.00001 16Z" 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_surface_24_regular.svg";Details
| Name | Globe Surface |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_surface_24_regular.svg |
| Filled file | ic_fluent_globe_surface_24_filled.svg |
| React components | GlobeSurface24Regular, GlobeSurface24Filled |
| License | MIT (© Microsoft Corporation) |