Checkmark Circle Square icon
Used for toggle selection states or approvals. The Checkmark Circle Square icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Checkmark Circle Square 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 { CheckmarkCircleSquare24Regular, CheckmarkCircleSquare24Filled } from "@fluentui/react-icons";
export function Example() {
return <CheckmarkCircleSquare24Regular aria-label="Checkmark Circle Square" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_checkmark_circle_square_24_regular.svg" width="24" height="24" alt="Checkmark Circle Square"> 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="M14.5 8.5C14.5 5.18629 11.8137 2.5 8.5 2.5C5.18629 2.5 2.5 5.18629 2.5 8.5C2.5 11.8137 5.18629 14.5 8.5 14.5C11.8137 14.5 14.5 11.8137 14.5 8.5ZM16 8.5C16 12.6421 12.6421 16 8.5 16C4.35786 16 1 12.6421 1 8.5C1 4.35786 4.35786 1 8.5 1C12.6421 1 16 4.35786 16 8.5ZM20.2803 14.7803C20.5732 14.4874 20.5732 14.0126 20.2803 13.7197C19.9874 13.4268 19.5126 13.4268 19.2197 13.7197L15.75 17.1893L14.2803 15.7197C13.9874 15.4268 13.5126 15.4268 13.2197 15.7197C12.9268 16.0126 12.9268 16.4874 13.2197 16.7803L15.2197 18.7803C15.5126 19.0732 15.9874 19.0732 16.2803 18.7803L20.2803 14.7803ZM12.2803 5.71967C12.5732 6.01256 12.5732 6.48744 12.2803 6.78033L8.28033 10.7803C7.98744 11.0732 7.51256 11.0732 7.21967 10.7803L5.21967 8.78033C4.92678 8.48744 4.92678 8.01256 5.21967 7.71967C5.51256 7.42678 5.98744 7.42678 6.28033 7.71967L7.75 9.18934L11.2197 5.71967C11.5126 5.42678 11.9874 5.42678 12.2803 5.71967ZM9.75 20V16.9087C10.2666 16.8326 10.768 16.71 11.25 16.5453V20C11.25 20.9665 12.0335 21.75 13 21.75H20C20.9665 21.75 21.75 20.9665 21.75 20V13C21.75 12.0335 20.9665 11.25 20 11.25H16.5453C16.71 10.768 16.8326 10.2666 16.9087 9.75H20C21.7949 9.75 23.25 11.2051 23.25 13V20C23.25 21.7949 21.7949 23.25 20 23.25H13C11.2051 23.25 9.75 21.7949 9.75 20Z" 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_square_24_regular.svg";Details
| Name | Checkmark Circle Square |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_checkmark_circle_square_24_regular.svg |
| Filled file | ic_fluent_checkmark_circle_square_24_filled.svg |
| React components | CheckmarkCircleSquare24Regular, CheckmarkCircleSquare24Filled |
| License | MIT (© Microsoft Corporation) |