Building Retail icon

Use the Building Retail 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 { BuildingRetail24Regular, BuildingRetail24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_building_retail_24_regular.svg" width="24" height="24" alt="Building Retail">

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="M6.75 8C6.33579 8 6 8.33579 6 8.75V12.25C6 12.6642 6.33579 13 6.75 13H17.25C17.6642 13 18 12.6642 18 12.25V8.75C18 8.33579 17.6642 8 17.25 8H6.75ZM7.5 11.5V9.5H16.5V11.5H7.5ZM13.75 14C13.3358 14 13 14.3358 13 14.75V17.25C13 17.6642 13.3358 18 13.75 18H17.25C17.6642 18 18 17.6642 18 17.25V14.75C18 14.3358 17.6642 14 17.25 14H13.75ZM14.5 16.5V15.5H16.5V16.5H14.5ZM4 3C2.89543 3 2 3.89543 2 5C2 5.74028 2.4022 6.38663 3 6.73244V20.25C3 20.6642 3.33579 21 3.75 21H20.25C20.6642 21 21 20.6642 21 20.25V6.73244C21.5978 6.38663 22 5.74028 22 5C22 3.89543 21.1046 3 20 3H4ZM19.5 7V19.5H11.5V14.75C11.5 14.3358 11.1642 14 10.75 14H6.75C6.33579 14 6 14.3358 6 14.75V19.5H4.5V7H19.5ZM3.5 5C3.5 4.72386 3.72386 4.5 4 4.5H20C20.2761 4.5 20.5 4.72386 20.5 5C20.5 5.27614 20.2761 5.5 20 5.5H4C3.72386 5.5 3.5 5.27614 3.5 5ZM10 19.5H7.5V15.5H10V19.5Z" 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_retail_24_regular.svg";

Details

Keywords

structureconstructionarchitectureshop