Building Skyscraper icon
Used for location scenarios. The Building Skyscraper 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 Skyscraper 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 { BuildingSkyscraper24Regular, BuildingSkyscraper24Filled } from "@fluentui/react-icons";
export function Example() {
return <BuildingSkyscraper24Regular aria-label="Building Skyscraper" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_building_skyscraper_24_regular.svg" width="24" height="24" alt="Building Skyscraper"> 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="M12 11.0002C12 11.5525 11.5523 12.0002 11 12.0002C10.4477 12.0002 10 11.5525 10 11.0002C10 10.448 10.4477 10.0002 11 10.0002C11.5523 10.0002 12 10.448 12 11.0002ZM11 15.0002C11.5523 15.0002 12 14.5525 12 14.0002C12 13.448 11.5523 13.0002 11 13.0002C10.4477 13.0002 10 13.448 10 14.0002C10 14.5525 10.4477 15.0002 11 15.0002ZM9 11.0002C9 11.5525 8.55228 12.0002 8 12.0002C7.44772 12.0002 7 11.5525 7 11.0002C7 10.448 7.44772 10.0002 8 10.0002C8.55228 10.0002 9 10.448 9 11.0002ZM8 15.0002C8.55228 15.0002 9 14.5525 9 14.0002C9 13.448 8.55228 13.0002 8 13.0002C7.44772 13.0002 7 13.448 7 14.0002C7 14.5525 7.44772 15.0002 8 15.0002ZM18 15.0002C18 15.5525 17.5523 16.0002 17 16.0002C16.4477 16.0002 16 15.5525 16 15.0002C16 14.448 16.4477 14.0002 17 14.0002C17.5523 14.0002 18 14.448 18 15.0002ZM17 19.0002C17.5523 19.0002 18 18.5525 18 18.0002C18 17.448 17.5523 17.0002 17 17.0002C16.4477 17.0002 16 17.448 16 18.0002C16 18.5525 16.4477 19.0002 17 19.0002ZM8.25 2.00195C7.83579 2.00195 7.5 2.33774 7.5 2.75195V5.00024H6.25C5.83579 5.00024 5.5 5.33603 5.5 5.75024V7.8001C4.60958 8.25528 4 9.18157 4 10.2502V20.7502C4 21.1645 4.33579 21.5002 4.75 21.5002H19.75C20.1642 21.5002 20.5 21.1645 20.5 20.7502V15.7502C20.5 12.6547 18.0539 10.1306 14.9892 10.0051C14.9042 9.04251 14.3232 8.22234 13.5034 7.80183V5.75024C13.5034 5.33603 13.1676 5.00024 12.7534 5.00024H11.5V2.75195C11.5 2.33774 11.1642 2.00195 10.75 2.00195H8.25ZM12.0034 7.50024H7V6.50024H12.0034V7.50024ZM13.5 20.0002H12V17.2502C12 16.836 11.6642 16.5002 11.25 16.5002H7.75C7.33579 16.5002 7 16.836 7 17.2502V20.0002H5.5V10.2502C5.5 9.55989 6.05964 9.00024 6.75 9.00024H12.25C12.9404 9.00024 13.5 9.55989 13.5 10.2502V20.0002ZM8.5 20.0002V18.0002H10.5V20.0002H8.5ZM15 20.0002V11.5075C17.2308 11.6369 19 13.487 19 15.7502V20.0002H15ZM10 5.00024H9V3.50195H10V5.00024Z" 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_skyscraper_24_regular.svg";Details
| Name | Building Skyscraper |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_building_skyscraper_24_regular.svg |
| Filled file | ic_fluent_building_skyscraper_24_filled.svg |
| React components | BuildingSkyscraper24Regular, BuildingSkyscraper24Filled |
| License | MIT (© Microsoft Corporation) |