Accessibility Checkmark icon
Used for accessibility checker pass state. The Accessibility Checkmark 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 Accessibility Checkmark 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 { AccessibilityCheckmark24Regular, AccessibilityCheckmark24Filled } from "@fluentui/react-icons";
export function Example() {
return <AccessibilityCheckmark24Regular aria-label="Accessibility Checkmark" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_accessibility_checkmark_24_regular.svg" width="24" height="24" alt="Accessibility Checkmark"> 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="M11.4684 6.403C10.9025 6.18838 10.5002 5.64117 10.5002 5C10.5002 4.17157 11.1718 3.5 12.0002 3.5C12.8286 3.5 13.5002 4.17157 13.5002 5C13.5002 5.64127 13.0978 6.18855 12.5317 6.4031C12.1824 6.48801 11.8177 6.48797 11.4684 6.403ZM9.0002 5C9.0002 5.1352 9.00914 5.2683 9.02647 5.39876L6.15015 4.17784C5.00701 3.6926 3.68228 4.2222 3.1887 5.36177C2.69342 6.50526 3.22266 7.82908 4.36975 8.31599L8.00271 9.85809V13.5595L6.12373 19.0165C5.71917 20.1914 6.34368 21.4719 7.51862 21.8764C8.69356 22.281 9.974 21.6565 10.3786 20.4815L10.5237 20.0599C10.1868 19.2743 10.0002 18.4089 10.0002 17.5C10.0002 17.2947 10.0098 17.0917 10.0284 16.8912L8.96029 19.9932C8.82543 20.3848 8.39862 20.593 8.00697 20.4581C7.61533 20.3233 7.40716 19.8965 7.54201 19.5048L9.43461 14.0083C9.4797 13.8774 9.50271 13.7399 9.50271 13.6014V9.69262C9.50271 9.19101 9.20286 8.73798 8.74113 8.54199L4.95584 6.93523C4.57528 6.77369 4.40082 6.33732 4.56514 5.95794C4.73116 5.57464 5.17954 5.39538 5.56405 5.55859L10.535 7.66865C10.6943 7.73627 10.8571 7.79238 11.0223 7.83699C11.3288 7.94264 11.6578 8 12.0002 8C12.3424 8 12.6712 7.9427 12.9776 7.83718C13.143 7.79254 13.306 7.73636 13.4655 7.66865L18.4365 5.55859C18.821 5.39538 19.2694 5.57464 19.4354 5.95794C19.5997 6.33732 19.4253 6.77369 19.0447 6.93523L15.2643 8.53992C14.8026 8.73591 14.5027 9.18894 14.5027 9.69055V11.3127C14.9809 11.1584 15.4833 11.0581 16.0027 11.0188V9.85602L19.6308 8.31599C20.7779 7.82908 21.3071 6.50526 20.8118 5.36177C20.3183 4.2222 18.9935 3.6926 17.8504 4.17784L14.9739 5.39883C14.9913 5.26835 15.0002 5.13522 15.0002 5C15.0002 3.34315 13.6571 2 12.0002 2C10.3433 2 9.0002 3.34315 9.0002 5ZM22.0002 17.5C22.0002 20.5376 19.5378 23 16.5002 23C13.4627 23 11.0002 20.5376 11.0002 17.5C11.0002 14.4624 13.4627 12 16.5002 12C19.5378 12 22.0002 14.4624 22.0002 17.5ZM19.8538 15.1464C19.6585 14.9512 19.342 14.9512 19.1467 15.1464L15.5002 18.7929L13.8538 17.1464C13.6585 16.9512 13.342 16.9512 13.1467 17.1464C12.9514 17.3417 12.9514 17.6583 13.1467 17.8536L15.1467 19.8536C15.342 20.0488 15.6585 20.0488 15.8538 19.8536L19.8538 15.8536C20.0491 15.6583 20.0491 15.3417 19.8538 15.1464Z" 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/accessibility_checkmark_24_regular.svg";Details
| Name | Accessibility Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_accessibility_checkmark_24_regular.svg |
| Filled file | ic_fluent_accessibility_checkmark_24_filled.svg |
| React components | AccessibilityCheckmark24Regular, AccessibilityCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |