Building Retail Shield icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.0107 11.1943C17.2708 10.9354 17.7292 10.9353 17.9893 11.1943C18.642 11.8452 19.897 12.8804 21.4395 13.0928C21.7468 13.1353 21.9999 13.378 22 13.6816V16.5205C21.9998 20.3364 18.4203 21.7208 17.6465 21.9756C17.5496 22.0075 17.4504 22.0075 17.3535 21.9756C16.5785 21.7203 13.0002 20.3355 13 16.5205V13.6816C13.0001 13.378 13.2532 13.1353 13.5605 13.0928C15.1027 12.8804 16.3579 11.8452 17.0107 11.1943ZM20 3C21.1046 3 22 3.89543 22 5C22 5.74028 21.5978 6.38661 21 6.73242V11.9736C20.4331 11.7956 19.9203 11.4949 19.5 11.1846V7H4.5V19.5H6V14.75C6 14.3358 6.33579 14 6.75 14H10.75C11.1642 14 11.5 14.3358 11.5 14.75V19.5H12.7334C13.0241 20.0405 13.4005 20.542 13.8574 21H3.75C3.33579 21 3 20.6642 3 20.25V6.73242C2.4022 6.38661 2 5.74028 2 5C2 3.89543 2.89543 3 4 3H20ZM7.5 19.5H10V15.5H7.5V19.5ZM17.25 8C17.6642 8 18 8.33579 18 8.75V10.0752C17.4984 9.92238 16.9358 10.0046 16.5 10.3193V9.5H7.5V11.5H15.0195C14.5501 11.7844 14.0054 12.0235 13.4199 12.1064C12.9262 12.178 12.4137 12.4958 12.1611 13H6.75C6.33579 13 6 12.6642 6 12.25V8.75C6 8.33579 6.33579 8 6.75 8H17.25ZM4 4.5C3.72386 4.5 3.5 4.72386 3.5 5C3.5 5.27614 3.72386 5.5 4 5.5H20C20.2761 5.5 20.5 5.27614 20.5 5C20.5 4.72386 20.2761 4.5 20 4.5H4Z" 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_shield_24_regular.svg";

Details

Keywords

structureconstructionarchitectureshop