Home Checkmark icon
Used to represent home in UI or physical home space in travel scenarios. The Home 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 Home 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 { HomeCheckmark24Regular, HomeCheckmark24Filled } from "@fluentui/react-icons";
export function Example() {
return <HomeCheckmark24Regular aria-label="Home Checkmark" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_home_checkmark_24_regular.svg" width="24" height="24" alt="Home 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="M13.4505 2.5319C12.6126 1.82531 11.3874 1.82531 10.5495 2.53189L3.79952 8.224C3.29255 8.65152 3 9.2809 3 9.94406V19.2539C3 20.2204 3.7835 21.0039 4.75 21.0039H19.25C20.2165 21.0039 21 20.2204 21 19.2539L21 9.94406C21 9.2809 20.7074 8.65152 20.2005 8.224L13.4505 2.5319ZM11.5165 3.6786C11.7958 3.44307 12.2042 3.44307 12.4835 3.6786L19.2335 9.37071C19.4025 9.51321 19.5 9.72301 19.5 9.94406L19.5 19.2539C19.5 19.392 19.3881 19.5039 19.25 19.5039H4.75C4.61193 19.5039 4.5 19.392 4.5 19.2539L4.5 9.94406C4.5 9.72301 4.59752 9.51321 4.76651 9.37071L11.5165 3.6786ZM15.7837 11.2803C16.0766 10.9874 16.0766 10.5126 15.7837 10.2197C15.4908 9.92677 15.0159 9.92678 14.723 10.2197L10.75 14.1928L9.28033 12.7231C8.98744 12.4302 8.51256 12.4302 8.21967 12.7231C7.92678 13.016 7.92678 13.4909 8.21967 13.7838L10.2197 15.7838C10.3603 15.9244 10.5511 16.0035 10.75 16.0035C10.9489 16.0034 11.1397 15.9244 11.2803 15.7838L15.7837 11.2803Z" 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/home_checkmark_24_regular.svg";Details
| Name | Home Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_home_checkmark_24_regular.svg |
| Filled file | ic_fluent_home_checkmark_24_filled.svg |
| React components | HomeCheckmark24Regular, HomeCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |