Fluent Icons

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 regular and filled styles in 3 sizes from 20 to 32 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_building_townhouse_24_regular.svg

Building Townhouse icon in React

npm install @fluentui/react-icons

import { BuildingTownhouse24Regular } from "@fluentui/react-icons";

export function Example() {
  return <BuildingTownhouse24Regular aria-label="Building Townhouse" />;
}

Building Townhouse icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/building_townhouse_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/building_townhouse_24_regular.svg" width="24" height="24" alt="Building Townhouse">

Building Townhouse icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.BuildingTownhouse())" />

Building Townhouse icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.building_townhouse_24_regular)

Building Townhouse icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF024;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF024;" FontSize="24" />

Building Townhouse icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_building_townhouse_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f024";
  font-size: 24px;
}

Building Townhouse icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_building_townhouse_24_regular" />

// Kotlin
R.drawable.ic_fluent_building_townhouse_24_regular

Building Townhouse icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .buildingTownhouse24Regular)

Building Townhouse icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameBuilding Townhouse
StylesRegular (outlined), Filled
Sizes20 px, 24 px, 32 px
Regular (outlined) fileic_fluent_building_townhouse_24_regular.svg
Filled fileic_fluent_building_townhouse_24_filled.svg
React (Regular)BuildingTownhouse20Regular, BuildingTownhouse24Regular, BuildingTownhouse32Regular
React (Filled)BuildingTownhouse20Filled, BuildingTownhouse24Filled, BuildingTownhouse32Filled
LicenseMIT (© Microsoft Corporation)

Keywords

housesafetylocationspacewfh

Related icons

Home SplitBuilding YurtHomeHome AddHome CheckmarkHome DatabaseHome HeartHome MoreHome PersonBuilding PeopleHome GarageBalcony