Home Database icon
Used to represent home in UI or physical home space in travel scenarios. The Home Database 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 Database 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 { HomeDatabase24Regular, HomeDatabase24Filled } from "@fluentui/react-icons";
export function Example() {
return <HomeDatabase24Regular aria-label="Home Database" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_home_database_24_regular.svg" width="24" height="24" alt="Home Database"> 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="M10.5495 2.53189C11.3874 1.82531 12.6126 1.82531 13.4505 2.5319L20.2005 8.224C20.7074 8.65152 21 9.2809 21 9.94406V11.4415C20.5787 11.3065 20.1271 11.2007 19.6551 11.1266C19.6037 11.1185 19.552 11.1108 19.5 11.1034V9.94406C19.5 9.72301 19.4025 9.51321 19.2335 9.37071L12.4835 3.6786C12.2042 3.44307 11.7958 3.44307 11.5165 3.6786L4.76651 9.37071C4.59752 9.51321 4.5 9.72301 4.5 9.94406L4.5 19.2539C4.5 19.392 4.61193 19.5039 4.75 19.5039H12V20.5C12 20.6745 12.0198 20.8427 12.0562 21.0039H4.75C3.7835 21.0039 3 20.2204 3 19.2539V9.94406C3 9.2809 3.29255 8.65152 3.79952 8.224L10.5495 2.53189ZM21 12.4998C20.5523 12.3317 20.0464 12.2003 19.5 12.1144C19.0265 12.0401 18.5226 12 18 12C15.2386 12 13 13.1193 13 14.5C13 15.8807 15.2386 17 18 17C18.5226 17 19.0265 16.9599 19.5 16.8855C20.0464 16.7997 20.5523 16.6683 21 16.5002C22.2144 16.0441 23 15.3179 23 14.5C23 13.6821 22.2144 12.9559 21 12.4998ZM21 17.5585C20.5336 17.708 20.0293 17.8219 19.5 17.8965C19.0174 17.9646 18.5141 18 18 18C16.4977 18 15.0882 17.6977 14.0173 17.1622C13.6632 16.9852 13.3098 16.7619 13 16.4917V20.5C13 20.8556 13.1484 21.1938 13.416 21.5C14.1876 22.383 15.9497 23 18 23C20.7614 23 23 21.8807 23 20.5V16.4917C22.6902 16.7619 22.3368 16.9852 21.9827 17.1622C21.6803 17.3134 21.3509 17.446 21 17.5585Z" 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_database_24_regular.svg";Details
| Name | Home Database |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_home_database_24_regular.svg |
| Filled file | ic_fluent_home_database_24_filled.svg |
| React components | HomeDatabase24Regular, HomeDatabase24Filled |
| License | MIT (© Microsoft Corporation) |