Call Checkmark icon
Used in call scenarios. The Call 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 Call 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 { CallCheckmark24Regular, CallCheckmark24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallCheckmark24Regular aria-label="Call Checkmark" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_checkmark_24_regular.svg" width="24" height="24" alt="Call 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="M6.22394 2.06668L5.05694 2.41844C3.80252 2.79656 2.83639 3.80195 2.50852 5.07043C1.79207 7.84222 2.56926 11.1467 4.78421 14.9831C6.99608 18.8141 9.46539 21.1383 12.2195 21.907C13.4882 22.2611 14.8498 21.9236 15.8062 21.0178L16.6926 20.1784C17.6928 19.2311 17.8378 17.6898 17.0317 16.5726L15.751 14.7976C15.0623 13.8431 13.8425 13.4328 12.7169 13.7769L10.7065 14.3915C10.6498 14.4084 10.5165 14.362 10.2744 14.1473C9.92693 13.8391 9.51868 13.2913 9.06763 12.51C8.44737 11.4357 8.17814 10.6623 8.2225 10.2652C8.22913 10.2058 8.25678 10.1508 8.30046 10.1101L9.79476 8.71661C10.6558 7.91366 10.9102 6.65165 10.4275 5.57782L9.5258 3.5721C8.95945 2.31227 7.54645 1.66804 6.22394 2.06668ZM3.96079 5.44581C4.15751 4.68472 4.73719 4.08148 5.48984 3.85461L6.65684 3.50285C7.25798 3.32165 7.90026 3.61449 8.15769 4.18714L9.05936 6.19286C9.27878 6.68096 9.16315 7.2546 8.77176 7.61958L7.27746 9.01303C6.97174 9.29812 6.77817 9.68322 6.73177 10.0987C6.6422 10.9006 7.00029 11.9293 7.7686 13.26C8.90869 15.2347 9.97036 16.1762 11.1401 15.8275L13.1554 15.2114C13.667 15.0549 14.2215 15.2415 14.5346 15.6753L15.8153 17.4503C16.1817 17.9581 16.1158 18.6587 15.6611 19.0893L14.7748 19.9287C14.2009 20.4722 13.384 20.6747 12.6227 20.4622C10.3057 19.8155 8.11678 17.7552 6.08325 14.2331C4.047 10.7062 3.35814 7.77732 3.96079 5.44581ZM21.7807 3.28075C22.0736 2.98785 22.0736 2.51298 21.7807 2.22009C21.4878 1.9272 21.0129 1.9272 20.72 2.22009L15.0005 7.93976L13.1308 6.07009C12.8379 5.7772 12.363 5.7772 12.0701 6.07009C11.7772 6.36298 11.7772 6.83786 12.0701 7.13075L14.4701 9.53075C14.6108 9.6714 14.8016 9.75042 15.0005 9.75042C15.1994 9.75042 15.3902 9.6714 15.5308 9.53075L21.7807 3.28075Z" 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/call_checkmark_24_regular.svg";Details
| Name | Call Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_checkmark_24_regular.svg |
| Filled file | ic_fluent_call_checkmark_24_filled.svg |
| React components | CallCheckmark24Regular, CallCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |