Desktop Flow icon
Used to represent stationary work stations, large screen devices, office, and actions in general computer scenarios. The Desktop Flow 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 Desktop Flow 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 { DesktopFlow24Regular, DesktopFlow24Filled } from "@fluentui/react-icons";
export function Example() {
return <DesktopFlow24Regular aria-label="Desktop Flow" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_desktop_flow_24_regular.svg" width="24" height="24" alt="Desktop Flow"> 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="M16.6684 3H4.25L4.09595 3.00519C2.92516 3.08436 2 4.05914 2 5.25V15.7523L2.00519 15.9063C2.08436 17.0771 3.05914 18.0023 4.25 18.0023L8.499 18.002V20.5L6.75 20.5004L6.64823 20.5073C6.28215 20.5569 6 20.8707 6 21.2504C6 21.6647 6.33579 22.0004 6.75 22.0004H17.25L17.3518 21.9936C17.7178 21.9439 18 21.6301 18 21.2504C18 20.8362 17.6642 20.5004 17.25 20.5004L15.499 20.5V18.002L19.7488 18.0023L19.9029 17.9971C21.0737 17.9179 21.9988 16.9431 21.9988 15.7523V9.50049H20.4988V15.7523L20.492 15.854C20.4423 16.2201 20.1285 16.5023 19.7488 16.5023H4.25L4.14823 16.4954C3.78215 16.4458 3.5 16.132 3.5 15.7523V5.25L3.50685 5.14823C3.55651 4.78215 3.8703 4.5 4.25 4.5H16.4998V3.75049C16.4998 3.4819 16.5603 3.22744 16.6684 3ZM9.998 18.002H13.998L13.999 20.5004H9.999L9.998 18.002ZM17.4998 3.75C17.4998 3.33579 17.8356 3 18.2498 3H22.2496C22.6638 3 22.9996 3.33579 22.9996 3.75V7.75C22.9996 8.16421 22.6638 8.5 22.2496 8.5H18.2498C17.8356 8.5 17.4998 8.16421 17.4998 7.75V7H17.1767C16.9461 7 16.7414 7.14755 16.6685 7.36631L15.7546 10.108C15.4775 10.9393 14.6995 11.5 13.8233 11.5H12.9998V13.25C12.9998 13.6642 12.664 14 12.2498 14H8.25C7.83579 14 7.5 13.6642 7.5 13.25V9.25C7.5 8.83579 7.83579 8.5 8.25 8.5H12.2498C12.664 8.5 12.9998 8.83579 12.9998 9.25V10H13.8233C14.0539 10 14.2586 9.85245 14.3315 9.63369L15.2454 6.89196C15.5225 6.0607 16.3005 5.5 17.1767 5.5H17.4998V3.75ZM18.9998 6.26792V7H21.4996V4.5H18.9998V6.23208C18.9999 6.23804 19 6.24401 19 6.25C19 6.25599 18.9999 6.26196 18.9998 6.26792ZM9 10V12.5H11.4998V10H9Z" 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_flow_24_regular.svg";Details
| Name | Desktop Flow |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_desktop_flow_24_regular.svg |
| Filled file | ic_fluent_desktop_flow_24_filled.svg |
| React components | DesktopFlow24Regular, DesktopFlow24Filled |
| License | MIT (© Microsoft Corporation) |