Checkmark Circle Warning icon

Use the Checkmark Circle Warning 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 { CheckmarkCircleWarning24Regular, CheckmarkCircleWarning24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CheckmarkCircleWarning24Regular aria-label="Checkmark Circle Warning" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_checkmark_circle_warning_24_regular.svg" width="24" height="24" alt="Checkmark Circle Warning">

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 13.0421 21.8406 14.047 21.5448 14.9915L20.7414 13.3833C20.6576 13.2156 20.5597 13.0632 20.4501 12.9259C20.4831 12.6218 20.5 12.3129 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C12.2446 20.5 12.4868 20.4897 12.7262 20.4694L12.2708 21.3809C12.1693 21.5842 12.0982 21.7919 12.0551 21.9999L12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM10.75 13.4393L15.2197 8.96967C15.5126 8.67678 15.9874 8.67678 16.2803 8.96967C16.5466 9.23594 16.5708 9.6526 16.3529 9.94621L16.2803 10.0303L11.2803 15.0303C11.0141 15.2966 10.5974 15.3208 10.3038 15.1029L10.2197 15.0303L7.71967 12.5303C7.42678 12.2374 7.42678 11.7626 7.71967 11.4697C7.98594 11.2034 8.4026 11.1792 8.69621 11.3971L8.78033 11.4697L10.75 13.4393ZM17.161 13.8301C17.7141 12.7233 19.2938 12.7233 19.8468 13.8301L23.8437 21.8284C24.3424 22.8263 23.6165 24 22.5008 24H14.507C13.3913 24 12.6654 22.8262 13.1641 21.8284L17.161 13.8301ZM19.0043 16.4956C19.0043 16.2193 18.7803 15.9954 18.5039 15.9954C18.2276 15.9954 18.0035 16.2193 18.0035 16.4956V19.4974C18.0035 19.7737 18.2276 19.9976 18.5039 19.9976C18.7803 19.9976 19.0043 19.7737 19.0043 19.4974V16.4956ZM18.5039 21.9988C18.7803 21.9988 19.0043 21.7748 19.0043 21.4985C19.0043 21.2222 18.7803 20.9982 18.5039 20.9982C18.2276 20.9982 18.0035 21.2222 18.0035 21.4985C18.0035 21.7748 18.2276 21.9988 18.5039 21.9988Z" 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/checkmark_circle_warning_24_regular.svg";

Details

Keywords

approvalselectedwarning