Globe Off icon

Use the Globe Off 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 { GlobeOff24Regular, GlobeOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <GlobeOff24Regular aria-label="Globe Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_globe_off_24_regular.svg" width="24" height="24" alt="Globe Off">

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.4173 5.478L2.21966 3.28032C1.92677 2.98743 1.92678 2.51255 2.21968 2.21966C2.51257 1.92677 2.98745 1.92678 3.28034 2.21968L21.7801 20.7198C22.073 21.0127 22.073 21.4876 21.7801 21.7805C21.4872 22.0734 21.0123 22.0734 20.7194 21.7805L18.522 19.5829C16.7708 21.0906 14.4916 22.0021 11.9996 22.0021C6.47589 22.0021 1.99805 17.5242 1.99805 12.0005C1.99805 9.5084 2.90952 7.22916 4.4173 5.478ZM17.4578 18.5187L16.2659 17.3268C15.9638 18.3181 15.5765 19.1938 15.1185 19.9114C15.9753 19.5734 16.7637 19.1004 17.4578 18.5187ZM13.9397 15.0006L8.93913 9.99993H8.60267C8.53465 10.6402 8.49805 11.3099 8.49805 12.0005C8.49805 13.06 8.58419 14.0703 8.73778 15.0006H13.9397ZM7.31977 8.38053L5.48145 6.54217C4.9869 7.13211 4.57096 7.79018 4.24975 8.50027L7.29787 8.50063C7.30504 8.46048 7.31235 8.42045 7.31977 8.38053ZM9.06069 16.5003C9.71273 18.9144 10.8461 20.5021 11.9996 20.5021C13.1531 20.5021 14.2865 18.9144 14.9385 16.5003H9.06069ZM7.50791 16.5008L4.78542 16.5007C5.74376 18.0337 7.17721 19.2393 8.87959 19.9113C8.35731 19.0915 7.92632 18.0652 7.60932 16.8958L7.50791 16.5008ZM7.09302 9.99986H3.73541L3.73066 10.0171C3.57858 10.6534 3.49805 11.3176 3.49805 12.0005C3.49805 13.0567 3.69064 14.0678 4.04261 15.0008L7.21577 15.0005C7.07347 14.0514 6.99805 13.0431 6.99805 12.0005C6.99805 11.3165 7.03051 10.6473 7.09302 9.99986ZM8.88065 4.08967C8.67775 4.4076 8.48871 4.75656 8.31481 5.13288L9.45883 6.27692C10.0961 4.63437 10.979 3.58704 11.8839 3.50426L11.9996 3.49896L12.1259 3.50528C13.3875 3.63125 14.6048 5.63005 15.1709 8.50021H11.6821L13.1818 9.99993H15.3965C15.4645 10.6402 15.5011 11.3099 15.5011 12.0005C15.5011 12.1064 15.5003 12.2119 15.4986 12.3168L16.929 13.7473C16.9766 13.1793 17.0011 12.5955 17.0011 12.0005C17.0011 11.3165 16.9687 10.6473 16.9062 9.99988L20.2642 9.99903C20.4191 10.6409 20.5011 11.3111 20.5011 12.0005C20.5011 13.0567 20.3086 14.0678 19.9566 15.0008L18.1824 15.0006L20.4827 17.301C21.4449 15.7643 22.0011 13.9473 22.0011 12.0005C22.0011 6.47681 17.5233 1.99896 11.9996 1.99896C10.0528 1.99896 8.23599 2.55516 6.69929 3.51733L7.79292 4.61098C8.1338 4.41651 8.48944 4.24495 8.85774 4.09838L8.88065 4.08967ZM15.1196 4.08972L15.4108 4.211C17.3338 5.05433 18.8848 6.58886 19.7494 8.50027L16.7013 8.50063C16.4038 6.83617 15.8957 5.37629 15.2264 4.26382L15.1196 4.08972Z" 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_off_24_regular.svg";

Details