Tab Desktop Image icon

Use the Tab Desktop Image 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 { TabDesktopImage24Regular, TabDesktopImage24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TabDesktopImage24Regular aria-label="Tab Desktop Image" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tab_desktop_image_24_regular.svg" width="24" height="24" alt="Tab Desktop Image">

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.75 3C4.23122 3 3 4.23122 3 5.75V10.5351C3.45161 10.2739 3.95903 10.0984 4.5 10.0309V5.75C4.5 5.05964 5.05964 4.5 5.75 4.5H11V5.75C11 6.99264 12.0074 8 13.25 8H19.5V18.25C19.5 18.9404 18.9404 19.5 18.25 19.5H13.9691C13.9016 20.041 13.7261 20.5484 13.4649 21H18.25C19.7688 21 21 19.7688 21 18.25V5.75C21 4.23122 19.7688 3 18.25 3H5.75ZM19.5 6.5H13.25C12.8358 6.5 12.5 6.16421 12.5 5.75V4.5H18.25C18.9404 4.5 19.5 5.05964 19.5 5.75V6.5ZM5 11C3.34315 11 2 12.3431 2 14V19C2 19.5564 2.15145 20.0773 2.41536 20.524L5.90901 17.0303C6.78769 16.1516 8.21231 16.1517 9.09099 17.0303L12.5846 20.524C12.8486 20.0773 13 19.5564 13 19V14C13 12.3431 11.6569 11 10 11H5ZM5 22C4.44364 22 3.92266 21.8486 3.47602 21.5846L6.96967 18.091C7.26256 17.7981 7.73744 17.7981 8.03033 18.091L11.524 21.5846C11.0773 21.8486 10.5564 22 10 22H5ZM10 15C9.44772 15 9 14.5523 9 14C9 13.4477 9.44772 13 10 13C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15Z" 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/tab_desktop_image_24_regular.svg";

Details

Keywords

tabmobilerectanglebrowser