Planet icon

Use the Planet 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 { Planet24Regular, Planet24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Planet24Regular aria-label="Planet" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_planet_24_regular.svg" width="24" height="24" alt="Planet">

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 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 12.2593 4.51316 12.5155 4.53884 12.768C3.81821 12.8328 3.33652 12.7753 3.0263 12.6932C3.00887 12.4644 3 12.2332 3 12C3 11.759 3.00947 11.5202 3.02807 11.2839C2.33664 11.3891 1.90911 11.7211 1.71015 12.0428C1.47699 12.4198 1.50463 12.8348 1.82524 13.1646C2.03395 13.3793 2.4131 13.6015 3.02527 13.7163C3.45091 13.7959 3.98903 13.8235 4.66061 13.7606C6.28323 13.6087 8.57598 12.933 11.6495 11.3341C14.8239 9.68289 17.3092 8.92113 19.1915 8.74497C19.9466 8.6743 20.6234 8.69704 21.2146 8.80376L21.2551 8.81122C22.1063 8.9711 22.7777 9.30679 23.2474 9.78961C24.0817 10.6472 24.1328 11.8259 23.5643 12.7461C23.0324 13.607 22.0098 14.1874 20.7176 14.2456C19.72 18.1296 16.1952 21 12 21C8.5844 21 5.61319 19.0973 4.08847 16.294C4.35117 16.2905 4.6197 16.2758 4.89311 16.2502C5.16699 16.2245 5.4508 16.1877 5.7447 16.1393C7.0876 18.1646 9.38785 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 11.7404 19.4868 11.4839 19.4611 11.2311C20.1835 11.167 20.665 11.2261 20.9739 11.3092C20.9912 11.5372 21 11.7676 21 12C21 12.2408 20.9905 12.4794 20.972 12.7154C21.6615 12.6097 22.0877 12.2783 22.2861 11.9572C22.5189 11.5804 22.4913 11.1653 22.1701 10.8352C21.9611 10.6203 21.5815 10.398 20.9689 10.2832C20.9245 10.2749 20.8788 10.2671 20.8319 10.26C20.8319 10.2599 20.832 10.2602 20.8319 10.26C20.5851 10.2223 20.3037 10.202 19.9842 10.2045C19.7826 10.2062 19.566 10.2171 19.3333 10.2388C17.7104 10.3907 15.4174 11.0664 12.3439 12.6653C9.16958 14.3165 6.68447 15.0783 4.80256 15.2545C4.53271 15.2798 4.27286 15.2931 4.02335 15.2949C3.88552 15.296 3.75085 15.2935 3.61938 15.2876C3.61936 15.2876 3.6194 15.2877 3.61938 15.2876C3.30897 15.2736 3.0164 15.2403 2.74251 15.1889C1.89 15.0293 1.21773 14.6933 0.74763 14.2098C-0.0863177 13.3521 -0.136595 12.1733 0.43228 11.2534C0.96493 10.3921 1.98874 9.81143 3.28249 9.75409C4.28016 5.87026 7.80489 3 12 3C15.4155 3 18.3867 4.9026 19.9114 7.70579C19.6458 7.70909 19.3743 7.72386 19.0977 7.74974C18.8264 7.77514 18.5453 7.81146 18.2543 7.85926C16.9113 5.83474 14.6115 4.5 12 4.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/planet_24_regular.svg";

Details