Building Swap icon

Use the Building Swap 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 { BuildingSwap24Regular, BuildingSwap24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.5 4.25C5.5 3.83579 5.83579 3.5 6.25 3.5H14.25C14.6642 3.5 15 3.83579 15 4.25V10.25C15 10.6642 15.3358 11 15.75 11H17.75C18.1642 11 18.5 11.3358 18.5 11.75V15.0253L18.5126 15.0126C18.918 14.6071 19.473 14.4422 20 14.5178V11.75C20 10.5074 18.9926 9.5 17.75 9.5H16.5V4.25C16.5 3.00736 15.4926 2 14.25 2H6.25C5.00736 2 4 3.00736 4 4.25V21.25C4 21.6642 4.33579 22 4.75 22H13.5251L12.0251 20.5H5.5V4.25ZM8.5 5.5C7.94772 5.5 7.5 5.94772 7.5 6.5C7.5 7.05228 7.94772 7.5 8.5 7.5C9.05229 7.5 9.5 7.05228 9.5 6.5C9.5 5.94772 9.05229 5.5 8.5 5.5ZM7.5 13.5C7.5 12.9477 7.94772 12.5 8.5 12.5C9.05229 12.5 9.5 12.9477 9.5 13.5C9.5 14.0523 9.05229 14.5 8.5 14.5C7.94772 14.5 7.5 14.0523 7.5 13.5ZM7.5 10C7.5 9.44771 7.94772 9 8.5 9C9.05229 9 9.5 9.44771 9.5 10C9.5 10.5523 9.05229 11 8.5 11C7.94772 11 7.5 10.5523 7.5 10ZM11 6.5C11 5.94772 11.4477 5.5 12 5.5C12.5523 5.5 13 5.94772 13 6.5C13 7.05228 12.5523 7.5 12 7.5C11.4477 7.5 11 7.05228 11 6.5ZM11 13.5C11 12.9477 11.4477 12.5 12 12.5C12.5523 12.5 13 12.9477 13 13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5ZM11 10C11 9.44771 11.4477 9 12 9C12.5523 9 13 9.44771 13 10C13 10.5523 12.5523 11 12 11C11.4477 11 11 10.5523 11 10ZM15.7803 16.7803C16.0732 16.4874 16.0732 16.0126 15.7803 15.7197C15.4874 15.4268 15.0126 15.4268 14.7197 15.7197L12.2197 18.2197C11.9268 18.5126 11.9268 18.9874 12.2197 19.2803L14.7197 21.7803C15.0126 22.0732 15.4874 22.0732 15.7803 21.7803C16.0732 21.4874 16.0732 21.0126 15.7803 20.7197L14.5607 19.5H20.4393L19.2197 20.7197C18.9268 21.0126 18.9268 21.4874 19.2197 21.7803C19.5126 22.0732 19.9874 22.0732 20.2803 21.7803L22.7803 19.2803C23.0732 18.9874 23.0732 18.5126 22.7803 18.2197L20.2803 15.7197C19.9874 15.4268 19.5126 15.4268 19.2197 15.7197C18.9268 16.0126 18.9268 16.4874 19.2197 16.7803L20.4393 18H14.5607L15.7803 16.7803Z" 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_swap_24_regular.svg";

Details

Keywords

structureconstructionarchitectureskyscraper