Error Circle icon

Use the Error 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 { ErrorCircle24Regular, ErrorCircle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_error_circle_24_regular.svg" width="24" height="24" alt="Error 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.5ZM11.999 14.502C12.5504 14.5021 12.9971 14.9496 12.9971 15.501C12.997 16.0524 12.5504 16.4998 11.999 16.5C11.4475 16.5 11 16.0525 11 15.501C11 14.9494 11.4475 14.502 11.999 14.502ZM11.9941 7C12.3738 6.9997 12.6883 7.2815 12.7383 7.64746L12.7451 7.74902L12.749 12.251C12.7494 12.6652 12.4132 13.0016 11.999 13.002C11.6194 13.0021 11.3058 12.7195 11.2559 12.3535L11.249 12.252L11.2451 7.75098C11.2448 7.33687 11.5801 7.00051 11.9941 7Z" 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/error_circle_24_regular.svg";

Details

Keywords

exclamationalert