Check icon

Use the Check 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 { Check24Regular, Check24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Check24Regular aria-label="Check" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_check_24_regular.svg" width="24" height="24" alt="Check">

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="M21.7803 5.78033C22.0732 5.48744 22.0732 5.01256 21.7803 4.71967C21.4874 4.42678 21.0126 4.42678 20.7197 4.71967L13.2197 12.2197C12.9268 12.5126 12.9268 12.9874 13.2197 13.2803C13.5126 13.5732 13.9874 13.5732 14.2803 13.2803L21.7803 5.78033ZM21.9466 7.02829C21.9816 7.1967 22 7.3712 22 7.55V14.45C22 15.8583 20.8583 17 19.45 17L4.55 17C3.14168 17 2 15.8583 2 14.45V7.55001C2 6.14168 3.14167 5.00001 4.55 5.00001L19.0251 5L17.5251 6.5L4.55 6.50001C3.9701 6.50001 3.5 6.97011 3.5 7.55001V14.45C3.5 15.0299 3.9701 15.5 4.55 15.5L19.45 15.5C20.0299 15.5 20.5 15.0299 20.5 14.45V8.47487L21.9466 7.02829ZM4.5 9.25C4.5 8.83579 4.83579 8.5 5.25 8.5H7.25C7.66421 8.5 8 8.83579 8 9.25C8 9.66421 7.66421 10 7.25 10H5.25C4.83579 10 4.5 9.66421 4.5 9.25ZM4.5 12.75C4.5 12.3358 4.83579 12 5.25 12H10.25C10.6642 12 11 12.3358 11 12.75C11 13.1642 10.6642 13.5 10.25 13.5H5.25C4.83579 13.5 4.5 13.1642 4.5 12.75Z" 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/check_24_regular.svg";

Details

Keywords

bookpeneditmoneypayment