Globe Warning icon
Used in scenarios representing the internet & global representation scenarios. The Globe Warning 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 Warning 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 { GlobeWarning24Regular, GlobeWarning24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeWarning24Regular aria-label="Globe Warning" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_warning_24_regular.svg" width="24" height="24" alt="Globe Warning"> 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 1.99902C17.5253 1.99902 22.0031 6.47687 22.0031 12.0006C22.0031 13.2641 21.7688 14.4728 21.3413 15.5858L20.3519 13.6053C20.4511 13.0856 20.5031 12.5492 20.5031 12.0006C20.5031 11.3112 20.421 10.6409 20.2662 9.99909L16.9081 9.99994C16.9415 10.3453 16.9663 10.697 16.9822 11.0537C16.4138 11.1721 15.8813 11.4866 15.5031 11.9969C15.503 11.3076 15.4664 10.6391 15.3985 9.99999H8.60462C8.5366 10.6403 8.5 11.31 8.5 12.0006C8.5 13.0601 8.58615 14.0704 8.73973 15.0007H13.9589L13.2096 16.5003H9.06265C9.58228 18.4242 10.4076 19.8233 11.3052 20.3121L11.2708 20.3809C11.0112 20.9006 10.9508 21.4489 11.0472 21.9572C5.97115 21.4767 2 17.2024 2 12.0006C2 6.47687 6.47785 1.99902 12.0016 1.99902ZM7.50986 16.5009L4.78738 16.5007C5.74572 18.0338 7.17916 19.2394 8.88154 19.9114C8.35927 19.0915 7.92828 18.0653 7.61127 16.8959L7.50986 16.5009ZM7.09497 9.99992H3.73737L3.73261 10.0171C3.58053 10.6535 3.5 11.3176 3.5 12.0006C3.5 13.0567 3.69259 14.0679 4.04456 15.0009L7.21773 15.0005C7.07543 14.0514 7 13.0432 7 12.0006C7 11.3166 7.03246 10.6474 7.09497 9.99992ZM8.8826 4.08973L8.85969 4.09844C6.81238 4.91315 5.15637 6.50046 4.2517 8.50033L7.29982 8.50069C7.61317 6.7479 8.16002 5.22198 8.8826 4.08973ZM12.0016 3.49902L11.8859 3.50432C10.6205 3.62008 9.39798 5.62205 8.83026 8.50027H15.1728C14.6067 5.63011 13.3895 3.63131 12.1278 3.50534L12.0016 3.49902ZM15.1216 4.08979L15.2284 4.26388C15.8976 5.37635 16.4057 6.83623 16.7033 8.50069L19.7514 8.50033C18.8868 6.58892 17.3358 5.05439 15.4128 4.21106L15.1216 4.08979ZM16.161 12.8301L12.1641 20.8284C11.6654 21.8262 12.3913 23 13.507 23H21.5008C22.6165 23 23.3424 21.8263 22.8437 20.8284L18.8468 12.8301C18.2938 11.7233 16.7141 11.7233 16.161 12.8301ZM18.0043 15.4956V18.4974C18.0043 18.7737 17.7803 18.9976 17.5039 18.9976C17.2276 18.9976 17.0035 18.7737 17.0035 18.4974V15.4956C17.0035 15.2193 17.2276 14.9954 17.5039 14.9954C17.7803 14.9954 18.0043 15.2193 18.0043 15.4956ZM17.5039 20.9988C17.2276 20.9988 17.0035 20.7748 17.0035 20.4985C17.0035 20.2222 17.2276 19.9982 17.5039 19.9982C17.7803 19.9982 18.0043 20.2222 18.0043 20.4985C18.0043 20.7748 17.7803 20.9988 17.5039 20.9988Z" 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_warning_24_regular.svg";Details
| Name | Globe Warning |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_warning_24_regular.svg |
| Filled file | ic_fluent_globe_warning_24_filled.svg |
| React components | GlobeWarning24Regular, GlobeWarning24Filled |
| License | MIT (© Microsoft Corporation) |