Document Globe icon
Used to represent general file types and actions. The Document Globe 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 Document Globe 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 { DocumentGlobe24Regular, DocumentGlobe24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentGlobe24Regular aria-label="Document Globe" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_globe_24_regular.svg" width="24" height="24" alt="Document Globe"> 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="M4 4C4 2.89543 4.89543 2 6 2H12.1722C12.7027 2 13.2114 2.21071 13.5864 2.58579L19.4142 8.41355C19.7893 8.78863 20 9.29733 20 9.82777V20C20 21.1046 19.1046 22 18 22H11.1904C11.6168 21.5557 11.9806 21.051 12.2678 20.5H18C18.2761 20.5 18.5 20.2761 18.5 20V10H14C12.8954 10 12 9.10457 12 8V3.5H6C5.72386 3.5 5.5 3.72386 5.5 4V11.0764C4.97679 11.1572 4.47417 11.3004 4 11.4982V4ZM14 8.5H17.3793L13.5 4.62066V8C13.5 8.27614 13.7239 8.5 14 8.5ZM5.56017 13.4155C5.25491 14.3312 5.04708 15.5855 5.00708 17H7.993C7.95299 15.5855 7.74517 14.3312 7.43991 13.4155C7.26865 12.9017 7.07575 12.522 6.88582 12.281C6.69146 12.0344 6.55732 12 6.50004 12C6.44276 12 6.30862 12.0344 6.11425 12.281C5.92433 12.522 5.73143 12.9017 5.56017 13.4155ZM4.9793 12.2129C4.84129 12.4781 4.71887 12.7771 4.61148 13.0992C4.26639 14.1345 4.04685 15.4998 4.0067 17H1.02246C1.22862 14.7122 2.83571 12.8284 4.9793 12.2129ZM8.3886 13.0992C8.28121 12.7771 8.15879 12.4781 8.02077 12.2129C10.1644 12.8284 11.7715 14.7122 11.9776 17H8.99338C8.95323 15.4998 8.73369 14.1345 8.3886 13.0992ZM11.9776 18H8.99338C8.95323 19.5002 8.73369 20.8655 8.3886 21.9008C8.28121 22.2229 8.15879 22.5219 8.02077 22.7871C10.1644 22.1716 11.7715 20.2878 11.9776 18ZM6.88582 22.719C6.69146 22.9656 6.55732 23 6.50004 23C6.44276 23 6.30862 22.9656 6.11425 22.719C5.92433 22.478 5.73143 22.0983 5.56017 21.5845C5.25491 20.6688 5.04708 19.4145 5.00708 18H7.993C7.95299 19.4145 7.74517 20.6688 7.43991 21.5845C7.26865 22.0983 7.07575 22.478 6.88582 22.719ZM4.9793 22.7871C2.83571 22.1716 1.22862 20.2878 1.02246 18H4.0067C4.04685 19.5002 4.26639 20.8655 4.61148 21.9008C4.71887 22.2229 4.84129 22.5219 4.9793 22.7871Z" 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/document_globe_24_regular.svg";Details
| Name | Document Globe |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_globe_24_regular.svg |
| Filled file | ic_fluent_document_globe_24_filled.svg |
| React components | DocumentGlobe24Regular, DocumentGlobe24Filled |
| License | MIT (© Microsoft Corporation) |