Home More icon

Use the Home More 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 { HomeMore24Regular, HomeMore24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HomeMore24Regular aria-label="Home More" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_home_more_24_regular.svg" width="24" height="24" alt="Home More">

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="M7.75 10.4998C8.44036 10.4998 9 11.0594 9 11.7498C9 12.4401 8.44036 12.9998 7.75 12.9998C7.05964 12.9998 6.5 12.4401 6.5 11.7498C6.5 11.0594 7.05964 10.4998 7.75 10.4998ZM12 10.4998C12.6904 10.4998 13.25 11.0594 13.25 11.7498C13.25 12.4401 12.6904 12.9998 12 12.9998C11.3096 12.9998 10.75 12.4401 10.75 11.7498C10.75 11.0594 11.3096 10.4998 12 10.4998ZM17.5 11.7498C17.5 11.0594 16.9404 10.4998 16.25 10.4998C15.5596 10.4998 15 11.0594 15 11.7498C15 12.4401 15.5596 12.9998 16.25 12.9998C16.9404 12.9998 17.5 12.4401 17.5 11.7498ZM9 15.7498C9 15.0594 8.44036 14.4998 7.75 14.4998C7.05964 14.4998 6.5 15.0594 6.5 15.7498C6.5 16.4401 7.05964 16.9998 7.75 16.9998C8.44036 16.9998 9 16.4401 9 15.7498ZM13.25 15.7498C13.25 15.0594 12.6904 14.4998 12 14.4998C11.3096 14.4998 10.75 15.0594 10.75 15.7498C10.75 16.4401 11.3096 16.9998 12 16.9998C12.6904 16.9998 13.25 16.4401 13.25 15.7498ZM16.25 14.4998C16.9404 14.4998 17.5 15.0594 17.5 15.7498C17.5 16.4401 16.9404 16.9998 16.25 16.9998C15.5596 16.9998 15 16.4401 15 15.7498C15 15.0594 15.5596 14.4998 16.25 14.4998ZM10.537 2.53373C11.3747 1.82546 12.6012 1.8246 13.4399 2.5317L20.2002 8.23095C20.7073 8.65846 21 9.28794 21 9.95121V19.2498C21 20.2163 20.2165 20.9998 19.25 20.9998H4.75C3.7835 20.9998 3 20.2163 3 19.2498V9.94993C3 9.28776 3.29168 8.65922 3.79734 8.23171L10.537 2.53373ZM12.4731 3.67853C12.1935 3.44284 11.7847 3.44312 11.5054 3.67921L4.76578 9.37719C4.59723 9.51969 4.5 9.72921 4.5 9.94993V19.2498C4.5 19.3878 4.61193 19.4998 4.75 19.4998H19.25C19.3881 19.4998 19.5 19.3878 19.5 19.2498V9.95121C19.5 9.73012 19.4024 9.52029 19.2334 9.37779L12.4731 3.67853Z" 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_more_24_regular.svg";

Details

Keywords

housesafetylocationspacewfh