Location Checkmark icon
The Location 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 Location 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 { LocationCheckmark24Regular, LocationCheckmark24Filled } from "@fluentui/react-icons";
export function Example() {
return <LocationCheckmark24Regular aria-label="Location Checkmark" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_location_checkmark_24_regular.svg" width="24" height="24" alt="Location 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="M15.2197 7.96967L10.75 12.4393L8.78033 10.4697L8.69621 10.3971C8.4026 10.1792 7.98594 10.2034 7.71967 10.4697C7.42678 10.7626 7.42678 11.2374 7.71967 11.5303L10.2197 14.0303L10.3038 14.1029C10.5974 14.3208 11.0141 14.2966 11.2803 14.0303L16.2803 9.03033L16.3529 8.94621C16.5708 8.6526 16.5466 8.23594 16.2803 7.96967C15.9874 7.67678 15.5126 7.67678 15.2197 7.96967ZM18.1573 4.56831C14.7568 1.1679 9.24369 1.1679 5.84328 4.56831C2.44287 7.96872 2.44287 13.4819 5.84328 16.8823C6.13912 17.1781 6.50638 17.5414 6.94515 17.9723L10.4362 21.3681C11.3084 22.2116 12.6922 22.2117 13.5644 21.3684C14.9603 20.0188 16.0954 18.9149 16.9703 18.0562L18.1573 16.8823C21.5577 13.4819 21.5577 7.96872 18.1573 4.56831ZM6.90394 5.62897C9.71856 2.81435 14.282 2.81435 17.0966 5.62897C19.9112 8.4436 19.9112 13.007 17.0966 15.8216C16.779 16.1393 16.3856 16.5282 15.9167 16.9885L12.5218 20.29C12.231 20.5711 11.7698 20.5711 11.4791 20.2899C10.2394 19.0909 9.20992 18.0905 8.39101 17.2891L6.90394 15.8216C4.08931 13.007 4.08931 8.4436 6.90394 5.62897Z" 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/location_checkmark_24_regular.svg";Details
| Name | Location Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_location_checkmark_24_regular.svg |
| Filled file | ic_fluent_location_checkmark_24_filled.svg |
| React components | LocationCheckmark24Regular, LocationCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |