home icon
home-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- home-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
homeAkar Iconshome-filledAnt Design IconshomeBoxIcons v2homeBoxIcons v2 SolidhomeCarbonhomeCodiconshome-fillEva IconshomeFont Awesome RegularhomeFont Awesome SolidhomeFeather Iconshome-outlineFlowbite Iconshome-12-filledFluent UI System Iconshomecss.gghomeHealth IconshomeHeroIconshomeHumbleiconshomeIconParkhomeIconPark OutlinehomeIconPark SolidhomeIconPark TwoTonehomeIconoirhomeIonIconshomeJam IconshomeLine Awesome
Use the home icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGOzKnTczj)" d="M9 13h6v8H9z"/><path fill="url(#SVGzbF8CbGP)" d="M13.45 4.533a2.25 2.25 0 0 0-2.9 0L3.8 10.228a2.25 2.25 0 0 0-.8 1.72v7.305c0 .966.784 1.75 1.75 1.75H9.5V15.25c0-.68.542-1.232 1.217-1.25h2.566a1.25 1.25 0 0 1 1.217 1.25v5.753h4.75a1.75 1.75 0 0 0 1.75-1.75v-7.305a2.25 2.25 0 0 0-.8-1.72z"/><path fill="url(#SVG7qiCc1Dn)" fill-rule="evenodd" d="M12.804 2.299a1.23 1.23 0 0 0-1.608 0l-8.789 7.63a1.167 1.167 0 0 0-.102 1.672a1.23 1.23 0 0 0 1.711.1L12 4.771l7.984 6.93c.5.435 1.266.39 1.71-.1a1.167 1.167 0 0 0-.101-1.673z" clip-rule="evenodd"/><path fill="url(#SVG7qiCc1Dn)" fill-rule="evenodd" d="M11.196 2.299a1.23 1.23 0 0 1 1.608 0l8.789 7.63c.5.434.546 1.183.102 1.672a1.23 1.23 0 0 1-1.711.1L12 4.771L4.016 11.7a1.23 1.23 0 0 1-1.71-.1a1.167 1.167 0 0 1 .101-1.673z" clip-rule="evenodd"/><defs><linearGradient id="SVGOzKnTczj" x1="12" x2="6.707" y1="13" y2="21.825" gradientUnits="userSpaceOnUse"><stop stop-color="#944600"/><stop offset="1" stop-color="#cd8e02"/></linearGradient><linearGradient id="SVGzbF8CbGP" x1="4.718" x2="21.568" y1="3.172" y2="17.673" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd394"/><stop offset="1" stop-color="#ffb357"/></linearGradient><linearGradient id="SVG7qiCc1Dn" x1="8.768" x2="13.162" y1="-.375" y2="11.505" gradientUnits="userSpaceOnUse"><stop stop-color="#ff921f"/><stop offset="1" stop-color="#eb4824"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorHome24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGOzKnTczj)" d="M9 13h6v8H9z"/><path fill="url(#SVGzbF8CbGP)" d="M13.45 4.533a2.25 2.25 0 0 0-2.9 0L3.8 10.228a2.25 2.25 0 0 0-.8 1.72v7.305c0 .966.784 1.75 1.75 1.75H9.5V15.25c0-.68.542-1.232 1.217-1.25h2.566a1.25 1.25 0 0 1 1.217 1.25v5.753h4.75a1.75 1.75 0 0 0 1.75-1.75v-7.305a2.25 2.25 0 0 0-.8-1.72z"/><path fill="url(#SVG7qiCc1Dn)" fillRule="evenodd" d="M12.804 2.299a1.23 1.23 0 0 0-1.608 0l-8.789 7.63a1.167 1.167 0 0 0-.102 1.672a1.23 1.23 0 0 0 1.711.1L12 4.771l7.984 6.93c.5.435 1.266.39 1.71-.1a1.167 1.167 0 0 0-.101-1.673z" clipRule="evenodd"/><path fill="url(#SVG7qiCc1Dn)" fillRule="evenodd" d="M11.196 2.299a1.23 1.23 0 0 1 1.608 0l8.789 7.63c.5.434.546 1.183.102 1.672a1.23 1.23 0 0 1-1.711.1L12 4.771L4.016 11.7a1.23 1.23 0 0 1-1.71-.1a1.167 1.167 0 0 1 .101-1.673z" clipRule="evenodd"/><defs><linearGradient id="SVGOzKnTczj" x1="12" x2="6.707" y1="13" y2="21.825" gradientUnits="userSpaceOnUse"><stop stopColor="#944600"/><stop offset="1" stopColor="#cd8e02"/></linearGradient><linearGradient id="SVGzbF8CbGP" x1="4.718" x2="21.568" y1="3.172" y2="17.673" gradientUnits="userSpaceOnUse"><stop stopColor="#ffd394"/><stop offset="1" stopColor="#ffb357"/></linearGradient><linearGradient id="SVG7qiCc1Dn" x1="8.768" x2="13.162" y1="-.375" y2="11.505" gradientUnits="userSpaceOnUse"><stop stopColor="#ff921f"/><stop offset="1" stopColor="#eb4824"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGOzKnTczj)" d="M9 13h6v8H9z"/><path fill="url(#SVGzbF8CbGP)" d="M13.45 4.533a2.25 2.25 0 0 0-2.9 0L3.8 10.228a2.25 2.25 0 0 0-.8 1.72v7.305c0 .966.784 1.75 1.75 1.75H9.5V15.25c0-.68.542-1.232 1.217-1.25h2.566a1.25 1.25 0 0 1 1.217 1.25v5.753h4.75a1.75 1.75 0 0 0 1.75-1.75v-7.305a2.25 2.25 0 0 0-.8-1.72z"/><path fill="url(#SVG7qiCc1Dn)" fill-rule="evenodd" d="M12.804 2.299a1.23 1.23 0 0 0-1.608 0l-8.789 7.63a1.167 1.167 0 0 0-.102 1.672a1.23 1.23 0 0 0 1.711.1L12 4.771l7.984 6.93c.5.435 1.266.39 1.71-.1a1.167 1.167 0 0 0-.101-1.673z" clip-rule="evenodd"/><path fill="url(#SVG7qiCc1Dn)" fill-rule="evenodd" d="M11.196 2.299a1.23 1.23 0 0 1 1.608 0l8.789 7.63c.5.434.546 1.183.102 1.672a1.23 1.23 0 0 1-1.711.1L12 4.771L4.016 11.7a1.23 1.23 0 0 1-1.71-.1a1.167 1.167 0 0 1 .101-1.673z" clip-rule="evenodd"/><defs><linearGradient id="SVGOzKnTczj" x1="12" x2="6.707" y1="13" y2="21.825" gradientUnits="userSpaceOnUse"><stop stop-color="#944600"/><stop offset="1" stop-color="#cd8e02"/></linearGradient><linearGradient id="SVGzbF8CbGP" x1="4.718" x2="21.568" y1="3.172" y2="17.673" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd394"/><stop offset="1" stop-color="#ffb357"/></linearGradient><linearGradient id="SVG7qiCc1Dn" x1="8.768" x2="13.162" y1="-.375" y2="11.505" gradientUnits="userSpaceOnUse"><stop stop-color="#ff921f"/><stop offset="1" stop-color="#eb4824"/></linearGradient></defs></g></svg> </template>
CSS
.icon-home-24 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGOzKnTczj)%22%20d%3D%22M9%2013h6v8H9z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGzbF8CbGP)%22%20d%3D%22M13.45%204.533a2.25%202.25%200%200%200-2.9%200L3.8%2010.228a2.25%202.25%200%200%200-.8%201.72v7.305c0%20.966.784%201.75%201.75%201.75H9.5V15.25c0-.68.542-1.232%201.217-1.25h2.566a1.25%201.25%200%200%201%201.217%201.25v5.753h4.75a1.75%201.75%200%200%200%201.75-1.75v-7.305a2.25%202.25%200%200%200-.8-1.72z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7qiCc1Dn)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.804%202.299a1.23%201.23%200%200%200-1.608%200l-8.789%207.63a1.167%201.167%200%200%200-.102%201.672a1.23%201.23%200%200%200%201.711.1L12%204.771l7.984%206.93c.5.435%201.266.39%201.71-.1a1.167%201.167%200%200%200-.101-1.673z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7qiCc1Dn)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.196%202.299a1.23%201.23%200%200%201%201.608%200l8.789%207.63c.5.434.546%201.183.102%201.672a1.23%201.23%200%200%201-1.711.1L12%204.771L4.016%2011.7a1.23%201.23%200%200%201-1.71-.1a1.167%201.167%200%200%201%20.101-1.673z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGOzKnTczj%22%20x1%3D%2212%22%20x2%3D%226.707%22%20y1%3D%2213%22%20y2%3D%2221.825%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23944600%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cd8e02%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGzbF8CbGP%22%20x1%3D%224.718%22%20x2%3D%2221.568%22%20y1%3D%223.172%22%20y2%3D%2217.673%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffd394%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb357%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG7qiCc1Dn%22%20x1%3D%228.768%22%20x2%3D%2213.162%22%20y1%3D%22-.375%22%20y2%3D%2211.505%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff921f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eb4824%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGOzKnTczj)%22%20d%3D%22M9%2013h6v8H9z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGzbF8CbGP)%22%20d%3D%22M13.45%204.533a2.25%202.25%200%200%200-2.9%200L3.8%2010.228a2.25%202.25%200%200%200-.8%201.72v7.305c0%20.966.784%201.75%201.75%201.75H9.5V15.25c0-.68.542-1.232%201.217-1.25h2.566a1.25%201.25%200%200%201%201.217%201.25v5.753h4.75a1.75%201.75%200%200%200%201.75-1.75v-7.305a2.25%202.25%200%200%200-.8-1.72z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7qiCc1Dn)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.804%202.299a1.23%201.23%200%200%200-1.608%200l-8.789%207.63a1.167%201.167%200%200%200-.102%201.672a1.23%201.23%200%200%200%201.711.1L12%204.771l7.984%206.93c.5.435%201.266.39%201.71-.1a1.167%201.167%200%200%200-.101-1.673z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7qiCc1Dn)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.196%202.299a1.23%201.23%200%200%201%201.608%200l8.789%207.63c.5.434.546%201.183.102%201.672a1.23%201.23%200%200%201-1.711.1L12%204.771L4.016%2011.7a1.23%201.23%200%200%201-1.71-.1a1.167%201.167%200%200%201%20.101-1.673z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGOzKnTczj%22%20x1%3D%2212%22%20x2%3D%226.707%22%20y1%3D%2213%22%20y2%3D%2221.825%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23944600%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cd8e02%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGzbF8CbGP%22%20x1%3D%224.718%22%20x2%3D%2221.568%22%20y1%3D%223.172%22%20y2%3D%2217.673%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffd394%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb357%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG7qiCc1Dn%22%20x1%3D%228.768%22%20x2%3D%2213.162%22%20y1%3D%22-.375%22%20y2%3D%2211.505%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff921f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eb4824%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/home-24.svg?color=%231a73e8&size=48
