Circle Off icon
Used for general circle needs. The Circle Off icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 24 px
ic_fluent_circle_off_24_regular.svg
Circle Off icon in React
npm install @fluentui/react-icons
import { CircleOff24Regular } from "@fluentui/react-icons";
export function Example() {
return <CircleOff24Regular aria-label="Circle Off" />;
}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" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
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>Details
| Name | Circle Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 16 px, 20 px, 24 px, 28 px, 32 px, 48 px |
| Regular (outlined) file | ic_fluent_circle_off_24_regular.svg |
| Filled file | ic_fluent_circle_off_24_filled.svg |
| React (Regular) | CircleOff16Regular, CircleOff20Regular, CircleOff24Regular, CircleOff28Regular, CircleOff32Regular, CircleOff48Regular |
| React (Filled) | CircleOff16Filled, CircleOff20Filled, CircleOff24Filled, CircleOff28Filled, CircleOff32Filled, CircleOff48Filled |
| License | MIT (© Microsoft Corporation) |