Globe Error icon
Used in scenarios representing the internet & global representation scenarios. The Globe Error 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 Error 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 { GlobeError24Regular, GlobeError24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeError24Regular aria-label="Globe Error" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_error_24_regular.svg" width="24" height="24" alt="Globe Error"> 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 12.2641 21.9929 12.5253 21.9729 12.7837C21.535 12.3682 21.0392 12.0131 20.4989 11.7317C20.4804 11.1367 20.4008 10.5572 20.2662 9.99909L16.9081 9.99994C16.9404 10.3346 16.9647 10.6751 16.9806 11.0204C16.4648 11.0612 15.966 11.1622 15.4911 11.3164C15.4752 10.8662 15.4438 10.4266 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.0007H11.4979C11.3003 15.4747 11.1571 15.9772 11.0764 16.5003H9.06265C9.6609 18.7153 10.6643 20.2345 11.7167 20.4701C12.0003 21.0212 12.3604 21.5265 12.7829 21.9721C12.5251 21.992 12.2645 22.0021 12.0016 22.0021C6.47785 22.0021 2 17.5243 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.8597 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.08979ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM17.5 14C17.2239 14 17 14.2239 17 14.5V18.5C17 18.7761 17.2239 19 17.5 19C17.7761 19 18 18.7761 18 18.5V14.5C18 14.2239 17.7761 14 17.5 14ZM17.5 21.125C17.8452 21.125 18.125 20.8452 18.125 20.5C18.125 20.1548 17.8452 19.875 17.5 19.875C17.1548 19.875 16.875 20.1548 16.875 20.5C16.875 20.8452 17.1548 21.125 17.5 21.125Z" 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_error_24_regular.svg";Details
| Name | Globe Error |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_error_24_regular.svg |
| Filled file | ic_fluent_globe_error_24_filled.svg |
| React components | GlobeError24Regular, GlobeError24Filled |
| License | MIT (© Microsoft Corporation) |