Image Globe icon

Use the Image Globe 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 { ImageGlobe24Regular, ImageGlobe24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.00708 6C5.04708 4.58547 5.25491 3.33124 5.56017 2.41547C5.73143 1.9017 5.92433 1.52199 6.11425 1.281C6.30862 1.03437 6.44276 1 6.50004 1C6.55732 1 6.69146 1.03437 6.88582 1.281C7.07575 1.52199 7.26865 1.9017 7.43991 2.41547C7.74517 3.33124 7.95299 4.58547 7.993 6H5.00708Z" fill="currentColor"/>
<path d="M4.61148 2.09925C4.71887 1.77709 4.84129 1.4781 4.9793 1.21294C2.83571 1.82838 1.22862 3.71221 1.02246 6H4.0067C4.04685 4.49982 4.26639 3.13454 4.61148 2.09925Z" fill="currentColor"/>
<path d="M8.3886 2.09925C8.28121 1.77709 8.15879 1.4781 8.02078 1.21294C10.1644 1.82838 11.7715 3.71221 11.9776 6H8.99338C8.95323 4.49982 8.73369 3.13454 8.3886 2.09925Z" fill="currentColor"/>
<path d="M8.99338 7H11.9776C11.7715 9.28779 10.1644 11.1716 8.02078 11.7871C8.15879 11.5219 8.28121 11.2229 8.3886 10.9008C8.73369 9.86546 8.95323 8.50018 8.99338 7Z" fill="currentColor"/>
<path d="M6.88582 11.719C6.69146 11.9656 6.55732 12 6.50004 12C6.44276 12 6.30862 11.9656 6.11425 11.719C5.92433 11.478 5.73143 11.0983 5.56017 10.5845C5.25491 9.66876 5.04708 8.41453 5.00708 7H7.993C7.95299 8.41453 7.74517 9.66876 7.43991 10.5845C7.26865 11.0983 7.07575 11.478 6.88582 11.719Z" fill="currentColor"/>
<path d="M1.02246 7C1.22862 9.28779 2.83571 11.1716 4.9793 11.7871C4.84129 11.5219 4.71887 11.2229 4.61148 10.9008C4.26639 9.86546 4.04685 8.50018 4.0067 7H1.02246Z" fill="currentColor"/>
<path d="M17.75 4.5H12.6865C12.5142 3.96653 12.2747 3.46321 11.9782 3H17.75C19.5449 3 21 4.45507 21 6.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V11.9782C3.46321 12.2747 3.96653 12.5142 4.5 12.6865V17.75C4.5 17.9584 4.53643 18.1583 4.60326 18.3437L10.4258 12.643C11.2589 11.8273 12.5675 11.7885 13.4458 12.5266L13.5742 12.6431L19.3964 18.3447C19.4634 18.159 19.5 17.9588 19.5 17.75V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5ZM18.3305 19.4014L12.5247 13.7148C12.2596 13.4553 11.8501 13.4316 11.5588 13.644L11.4752 13.7148L5.66845 19.4011C5.8504 19.4651 6.04613 19.5 6.25 19.5H17.75C17.9535 19.5 18.1489 19.4653 18.3305 19.4014Z" fill="currentColor"/>
<path d="M15.2521 6.5C16.4959 6.5 17.5042 7.50831 17.5042 8.75212C17.5042 9.99592 16.4959 11.0042 15.2521 11.0042C14.0083 11.0042 13 9.99592 13 8.75212C13 7.50831 14.0083 6.5 15.2521 6.5ZM15.2521 8C14.8367 8 14.5 8.33673 14.5 8.75212C14.5 9.1675 14.8367 9.50423 15.2521 9.50423C15.6675 9.50423 16.0042 9.1675 16.0042 8.75212C16.0042 8.33673 15.6675 8 15.2521 8Z" 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/image_globe_24_regular.svg";

Details

Keywords

photopicturesnapshotcontent