Desktop Tower icon

Use the Desktop Tower 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 { DesktopTower24Regular, DesktopTower24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DesktopTower24Regular aria-label="Desktop Tower" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_desktop_tower_24_regular.svg" width="24" height="24" alt="Desktop Tower">

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="M4.25 2C3.00736 2 2 3.00736 2 4.25V19.75C2 20.9926 3.00736 22 4.25 22H8.66841C8.56042 21.7727 8.5 21.5184 8.5 21.25C8.5 20.9816 8.56042 20.7273 8.66841 20.5H4.25C3.83579 20.5 3.5 20.1642 3.5 19.75V4.25C3.5 3.83579 3.83579 3.5 4.25 3.5H9.75C10.1642 3.5 10.5 3.83579 10.5 4.25V6H12V4.25C12 3.00736 10.9926 2 9.75 2H4.25ZM7 9.25C7 8.00736 8.00736 7 9.25 7H19.75C20.9926 7 22 8.00736 22 9.25V15.75C22 16.9926 20.9926 18 19.75 18H17.5V20.5H18.75C19.1642 20.5 19.5 20.8358 19.5 21.25C19.5 21.6642 19.1642 22 18.75 22H10.25C9.83579 22 9.5 21.6642 9.5 21.25C9.5 20.8358 9.83579 20.5 10.25 20.5H11.5V18H9.25C8.00736 18 7 16.9926 7 15.75V9.25ZM16 20.5V18H13V20.5H16ZM19.75 16.5C20.1642 16.5 20.5 16.1642 20.5 15.75V9.25C20.5 8.83579 20.1642 8.5 19.75 8.5H9.25C8.83579 8.5 8.5 8.83579 8.5 9.25V15.75C8.5 16.1642 8.83579 16.5 9.25 16.5H19.75Z" 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/desktop_tower_24_regular.svg";

Details

Keywords

monitorofficetowerpclargescreen