Circle Off icon

Use the Circle Off 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 { CircleOff24Regular, CircleOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L18.5186 19.5791C16.7678 21.0863 14.4914 22 12 22C6.47715 22 2 17.5228 2 12C2 9.50855 2.91182 7.23042 4.41895 5.47949L2.21973 3.28027C1.92684 2.98738 1.92684 2.51262 2.21973 2.21973ZM5.48242 6.54297C4.24509 8.01957 3.5 9.92282 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C14.0771 20.5 15.9787 19.7531 17.4551 18.5156L5.48242 6.54297ZM12 2C17.5228 2 22 6.47715 22 12C22 13.9464 21.4415 15.7614 20.4795 17.2979L19.3857 16.2041C20.0932 14.964 20.5 13.5299 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C10.4699 3.5 9.03514 3.90573 7.79492 4.61328L6.70117 3.51953C8.23767 2.55746 10.0535 2 12 2Z" 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/circle_off_24_regular.svg";

Details

Keywords

roundslash