Globe Arrow Forward icon

Use the Globe Arrow Forward 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 { GlobeArrowForward24Regular, GlobeArrowForward24Filled } from "@fluentui/react-icons";

export function Example() {
  return <GlobeArrowForward24Regular aria-label="Globe Arrow Forward" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_globe_arrow_forward_24_regular.svg" width="24" height="24" alt="Globe Arrow Forward">

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="M11.9996 2C17.5233 2 22.0011 6.47785 22.0011 12.0016C22.0011 12.2643 21.991 12.5247 21.9711 12.7824C21.5331 12.3671 21.0372 12.0121 20.4969 11.7308C20.4783 11.1365 20.3987 10.5576 20.2642 10.0001L16.9062 10.0009C16.9385 10.3353 16.9627 10.6755 16.9787 11.0206C16.4628 11.0615 15.964 11.1626 15.4891 11.3169C15.4732 10.8669 15.4418 10.4274 15.3965 10.001H8.60267C8.53465 10.6412 8.49805 11.3109 8.49805 12.0016C8.49805 13.0611 8.58419 14.0714 8.73778 15.0016H11.4971C11.2995 15.4757 11.1565 15.9782 11.0759 16.5013H9.06069C9.65939 18.7179 10.6638 20.2378 11.7171 20.4716C12.0008 21.0225 12.3608 21.5276 12.7833 21.9728C12.5247 21.9929 12.2633 22.0031 11.9996 22.0031C6.47589 22.0031 1.99805 17.5253 1.99805 12.0016C1.99805 6.47785 6.47589 2 11.9996 2ZM7.50791 16.5018L4.78542 16.5017C5.74376 18.0348 7.17721 19.2404 8.87959 19.9123C8.35731 19.0925 7.92632 18.0662 7.60932 16.8968L7.50791 16.5018ZM7.09302 10.0009H3.73542L3.73066 10.0181C3.57858 10.6545 3.49805 11.3186 3.49805 12.0016C3.49805 13.0577 3.69064 14.0689 4.04261 15.0019L7.21577 15.0015C7.07347 14.0524 6.99805 13.0442 6.99805 12.0016C6.99805 11.3175 7.03051 10.6483 7.09302 10.0009ZM8.88065 4.0907L8.85774 4.09942C6.81043 4.91413 5.15441 6.50144 4.24975 8.5013L7.29787 8.50167C7.61122 6.74888 8.15807 5.22295 8.88065 4.0907ZM11.9996 3.5L11.8839 3.5053C10.6185 3.62106 9.39603 5.62302 8.82831 8.50125H15.1709C14.6048 5.63109 13.3875 3.63229 12.1259 3.50632L11.9996 3.5ZM15.1196 4.09076L15.2264 4.26486C15.8957 5.37732 16.4038 6.83721 16.7013 8.50167L19.7494 8.5013C18.8848 6.5899 17.3338 5.05536 15.4108 4.21204L15.1196 4.09076ZM11.9995 17.5C11.9995 20.5376 14.4619 23 17.4995 23C20.5371 23 22.9995 20.5376 22.9995 17.5C22.9995 14.4624 20.5371 12 17.4995 12C14.4619 12 11.9995 14.4624 11.9995 17.5ZM18.646 15.3536C18.4507 15.1583 18.4507 14.8417 18.646 14.6464C18.8412 14.4512 19.1578 14.4512 19.3531 14.6464L20.8531 16.1464C21.0483 16.3417 21.0483 16.6583 20.8531 16.8536L19.3531 18.3536C19.1578 18.5488 18.8412 18.5488 18.646 18.3536C18.4507 18.1583 18.4507 17.8417 18.646 17.6464L19.2924 17H17.2495C16.0069 17 14.9995 18.0074 14.9995 19.25V19.5C14.9995 19.7761 14.7757 20 14.4995 20C14.2234 20 13.9995 19.7761 13.9995 19.5V19.25C13.9995 17.4551 15.4546 16 17.2495 16H19.2924L18.646 15.3536Z" 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_forward_24_regular.svg";

Details

Keywords

webworldearthglobalarrowforwardnext