Eye Circle icon

Use the Eye Circle 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 { EyeCircle24Regular, EyeCircle24Filled } from "@fluentui/react-icons";

export function Example() {
  return <EyeCircle24Regular aria-label="Eye Circle" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_eye_circle_24_regular.svg" width="24" height="24" alt="Eye Circle">

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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 7C13.7734 7 15.2655 7.95491 16.2803 8.96973C16.7937 9.48319 17.2095 10.0346 17.501 10.5381C17.7721 11.0064 18 11.5422 18 12C18 12.4578 17.7721 12.9936 17.501 13.4619C17.2095 13.9654 16.7937 14.5168 16.2803 15.0303C15.2655 16.0451 13.7734 17 12 17C10.2266 17 8.73455 16.0451 7.71973 15.0303C7.20626 14.5168 6.79052 13.9654 6.49902 13.4619C6.22792 12.9936 6 12.4578 6 12C6 11.5422 6.22792 11.0064 6.49902 10.5381C6.79052 10.0346 7.20626 9.48319 7.71973 8.96973C8.73455 7.95491 10.2266 7 12 7ZM12 8.5C10.7734 8.5 9.64045 9.17009 8.78027 10.0303C8.35624 10.4543 8.02198 10.9029 7.79785 11.29C7.68585 11.4835 7.60594 11.6521 7.55664 11.7871C7.53222 11.854 7.51748 11.9076 7.50879 11.9473C7.49979 11.9884 7.5 12.0048 7.5 12C7.5 11.9952 7.49979 12.0116 7.50879 12.0527C7.51748 12.0924 7.53222 12.146 7.55664 12.2129C7.60594 12.3479 7.68585 12.5165 7.79785 12.71C8.02198 13.0971 8.35624 13.5457 8.78027 13.9697C9.64045 14.8299 10.7734 15.5 12 15.5C13.2266 15.5 14.3595 14.8299 15.2197 13.9697C15.6438 13.5457 15.978 13.0971 16.2021 12.71C16.3141 12.5165 16.3941 12.3479 16.4434 12.2129C16.4678 12.146 16.4825 12.0924 16.4912 12.0527C16.5002 12.0116 16.5 11.9952 16.5 12C16.5 12.0048 16.5002 11.9884 16.4912 11.9473C16.4825 11.9076 16.4678 11.854 16.4434 11.7871C16.3941 11.6521 16.3141 11.4835 16.2021 11.29C15.978 10.9029 15.6438 10.4543 15.2197 10.0303C14.3595 9.17009 13.2266 8.5 12 8.5ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z" 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/eye_circle_24_regular.svg";

Details