Building Townhouse icon
Used to represent a townhouse or shared living space in UI. The Building Townhouse 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 Building Townhouse 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 { BuildingTownhouse24Regular, BuildingTownhouse24Filled } from "@fluentui/react-icons";
export function Example() {
return <BuildingTownhouse24Regular aria-label="Building Townhouse" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_building_townhouse_24_regular.svg" width="24" height="24" alt="Building Townhouse"> 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="M8.03871 4.57668L10.9911 7.13481C11.1555 7.27727 11.25 7.48409 11.25 7.70164V15.4991H8.75C8.33579 15.4991 8 15.8349 8 16.2491V19.4991H4.75C4.61193 19.4991 4.5 19.3872 4.5 19.2491V7.70164C4.5 7.4841 4.59446 7.27727 4.75887 7.13481L7.71129 4.57668C7.80525 4.49527 7.94475 4.49527 8.03871 4.57668ZM11.25 16.9991V19.4991H9.5V16.9991H11.25ZM12.75 16.9991H14.5V19.4991H12.75V16.9991ZM16 19.4991V16.2491C16 15.8349 15.6642 15.4991 15.25 15.4991H12.75V7.70164C12.75 7.48409 12.8445 7.27727 13.0089 7.13481L15.9613 4.57668C16.0552 4.49527 16.1948 4.49527 16.2887 4.57668L19.2411 7.13481C19.4055 7.27727 19.5 7.4841 19.5 7.70164V19.2491C19.5 19.3872 19.3881 19.4991 19.25 19.4991H16ZM4.75 20.9991H19.25C20.2165 20.9991 21 20.2156 21 19.2491V7.70164C21 7.04901 20.7166 6.42853 20.2234 6.00116L17.271 3.44303C16.6133 2.87316 15.6367 2.87316 14.979 3.44303L12.0266 6.00116L12 6.02459L11.9734 6.00116L9.02097 3.44303C8.36326 2.87316 7.38674 2.87316 6.72903 3.44303L3.77661 6.00116C3.28337 6.42853 3 7.04901 3 7.70164V19.2491C3 20.2156 3.7835 20.9991 4.75 20.9991ZM8.87891 8.99911C8.87891 9.55139 8.43119 9.99911 7.87891 9.99911C7.32662 9.99911 6.87891 9.55139 6.87891 8.99911C6.87891 8.44683 7.32662 7.99911 7.87891 7.99911C8.43119 7.99911 8.87891 8.44683 8.87891 8.99911ZM7.87891 13.9957C8.43119 13.9957 8.87891 13.548 8.87891 12.9957C8.87891 12.4434 8.43119 11.9957 7.87891 11.9957C7.32662 11.9957 6.87891 12.4434 6.87891 12.9957C6.87891 13.548 7.32662 13.9957 7.87891 13.9957ZM16.1211 9.99911C15.5688 9.99911 15.1211 9.55139 15.1211 8.99911C15.1211 8.44683 15.5688 7.99911 16.1211 7.99911C16.6734 7.99911 17.1211 8.44683 17.1211 8.99911C17.1211 9.55139 16.6734 9.99911 16.1211 9.99911ZM15.1211 12.9957C15.1211 13.548 15.5688 13.9957 16.1211 13.9957C16.6734 13.9957 17.1211 13.548 17.1211 12.9957C17.1211 12.4434 16.6734 11.9957 16.1211 11.9957C15.5688 11.9957 15.1211 12.4434 15.1211 12.9957Z" 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/building_townhouse_24_regular.svg";Details
| Name | Building Townhouse |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_building_townhouse_24_regular.svg |
| Filled file | ic_fluent_building_townhouse_24_filled.svg |
| React components | BuildingTownhouse24Regular, BuildingTownhouse24Filled |
| License | MIT (© Microsoft Corporation) |