Globe Arrow Up icon
Used in scenarios representing the internet & global representation scenarios. The Globe Arrow Up 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 Arrow Up 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 { GlobeArrowUp24Regular, GlobeArrowUp24Filled } from "@fluentui/react-icons";
export function Example() {
return <GlobeArrowUp24Regular aria-label="Globe Arrow Up" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_globe_arrow_up_24_regular.svg" width="24" height="24" alt="Globe Arrow Up"> 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.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.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 20.5C17 20.7761 17.2239 21 17.5 21C17.7761 21 18 20.7761 18 20.5V15.7071L19.6464 17.3536C19.8417 17.5488 20.1583 17.5488 20.3536 17.3536C20.5488 17.1583 20.5488 16.8417 20.3536 16.6464L17.8536 14.1464C17.6583 13.9512 17.3417 13.9512 17.1464 14.1464L14.6464 16.6464C14.4512 16.8417 14.4512 17.1583 14.6464 17.3536C14.8417 17.5488 15.1583 17.5488 15.3536 17.3536L17 15.7071V20.5Z" 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_arrow_up_24_regular.svg";Details
| Name | Globe Arrow Up |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_globe_arrow_up_24_regular.svg |
| Filled file | ic_fluent_globe_arrow_up_24_filled.svg |
| React components | GlobeArrowUp24Regular, GlobeArrowUp24Filled |
| License | MIT (© Microsoft Corporation) |