Phone Checkmark icon
Used to represent a physical or digital mobile phone scenarios. The Phone 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 Phone 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 { PhoneCheckmark24Regular, PhoneCheckmark24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneCheckmark24Regular aria-label="Phone Checkmark" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_checkmark_24_regular.svg" width="24" height="24" alt="Phone 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="M12.3477 2C11.833 2.4279 11.3867 2.93432 11.0244 3.5H8.25C7.83579 3.5 7.5 3.83579 7.5 4.25V19.75C7.5 20.1642 7.83579 20.5 8.25 20.5H15.75C16.1642 20.5 16.5 20.1642 16.5 19.75V13.5C17.0165 13.5 17.5183 13.4371 18 13.3232V19.75C18 20.9926 16.9926 22 15.75 22H8.25C7.00736 22 6 20.9926 6 19.75V4.25C6 3.00736 7.00736 2 8.25 2H12.3477ZM13.249 17.5C13.6632 17.4995 13.9994 17.8349 14 18.249C14.0005 18.6632 13.6651 18.9994 13.251 19L10.751 19.0039C10.3368 19.0044 10.0006 18.669 10 18.2549C9.99938 17.8407 10.3348 17.5045 10.749 17.5039L13.249 17.5ZM16.5 1.5C19.5376 1.5 22 3.96243 22 7C22 10.0376 19.5376 12.5 16.5 12.5C13.4624 12.5 11 10.0376 11 7C11 3.96243 13.4624 1.5 16.5 1.5ZM19.8535 4.64648C19.6583 4.45122 19.3417 4.45122 19.1465 4.64648L15.5 8.29297L13.8535 6.64648C13.6583 6.45122 13.3417 6.45122 13.1465 6.64648C12.9512 6.84175 12.9512 7.15825 13.1465 7.35352L15.1465 9.35352C15.3417 9.54878 15.6583 9.54878 15.8535 9.35352L19.8535 5.35352C20.0488 5.15825 20.0488 4.84175 19.8535 4.64648Z" 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/phone_checkmark_24_regular.svg";Details
| Name | Phone Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_checkmark_24_regular.svg |
| Filled file | ic_fluent_phone_checkmark_24_filled.svg |
| React components | PhoneCheckmark24Regular, PhoneCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |