Globe Add icon

Use the Globe Add 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 { GlobeAdd24Regular, GlobeAdd24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.5 12C20.5376 12 23 14.4624 23 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 12ZM12.0016 2C17.5253 2 22.0031 6.47785 22.0031 12.0016C22.0031 12.2648 21.9929 12.5256 21.973 12.7837C21.5343 12.3676 21.038 12.0122 20.4971 11.7307L20.501 11.908L20.4933 11.5903C20.4674 11.0452 20.3901 10.5135 20.2662 10.0001L20.2516 10.001L16.9081 10.0009C16.9404 10.3355 16.9647 10.676 16.9806 11.0213C16.4643 11.0613 15.965 11.1624 15.4897 11.3168C15.4751 10.866 15.4437 10.427 15.3985 10.001H8.60462C8.5366 10.6412 8.5 11.3109 8.5 12.0016C8.5 13.0611 8.58615 14.0714 8.73973 15.0016L11.4976 15.0014C11.3 15.4755 11.157 15.978 11.0763 16.5011L9.06265 16.5013C9.66105 18.7168 10.6648 20.2363 11.7176 20.4713C12.0009 21.0221 12.361 21.5273 12.7835 21.9726C12.5256 21.9929 12.2648 22.0031 12.0016 22.0031C6.47785 22.0031 2 17.5253 2 12.0016C2 6.47785 6.47785 2 12.0016 2ZM17.5 13.9992L17.4101 14.0073C17.206 14.0443 17.0451 14.2053 17.0081 14.4094L17 14.4992L16.9996 16.9992L14.4977 17L14.4078 17.0081C14.2037 17.0451 14.0427 17.206 14.0057 17.4101L13.9977 17.5L14.0057 17.5899C14.0427 17.794 14.2037 17.9549 14.4078 17.9919L14.4977 18L17.0007 17.9992L17.0011 20.5035L17.0092 20.5934C17.0462 20.7975 17.2071 20.9584 17.4112 20.9954L17.5011 21.0035L17.591 20.9954C17.7951 20.9584 17.956 20.7975 17.9931 20.5934L18.0011 20.5035L18.0007 17.9992L20.5046 18L20.5944 17.9919C20.7985 17.9549 20.9595 17.794 20.9965 17.5899L21.0046 17.5L20.9965 17.4101C20.9595 17.206 20.7985 17.0451 20.5944 17.0081L20.5046 17L17.9996 16.9992L18 14.4992L17.9919 14.4094C17.9549 14.2053 17.794 14.0443 17.5899 14.0073L17.5 13.9992ZM7.50986 16.5018L4.78738 16.5017C5.74572 18.0348 7.17916 19.2404 8.88154 19.9123C8.30124 19.0014 7.83363 17.8356 7.50986 16.5018ZM3.73737 10.0009L3.73261 10.0181C3.58053 10.6545 3.5 11.3186 3.5 12.0016C3.5 13.0577 3.69259 14.0689 4.04457 15.0019L7.21773 15.0015C7.07543 14.0524 7 13.0442 7 12.0016C7 11.3175 7.03246 10.6483 7.09497 10.0009L3.75155 10.001C3.74681 10.001 3.74209 10.001 3.73737 10.0009ZM8.8826 4.0907L8.8597 4.09942C6.81238 4.91413 5.15637 6.50144 4.2517 8.5013L7.29982 8.50167C7.61317 6.74888 8.16002 5.22295 8.8826 4.0907ZM12.0016 3.5L11.8859 3.5053C10.6205 3.62106 9.39798 5.62302 8.83026 8.50125H15.1728C14.5878 5.53542 13.3076 3.5 12.0016 3.5ZM15.1216 4.09076L15.2284 4.26486C15.8976 5.37732 16.4057 6.83721 16.7033 8.50167L19.7514 8.5013C18.8435 6.49433 17.1789 4.90285 15.1216 4.09076Z" 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_add_24_regular.svg";

Details

Keywords

webworldearthglobalnewplus