Tab Desktop Multiple Bottom icon

Use the Tab Desktop Multiple Bottom 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 { TabDesktopMultipleBottom24Regular, TabDesktopMultipleBottom24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TabDesktopMultipleBottom24Regular aria-label="Tab Desktop Multiple Bottom" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M6.00932 5H7.51758C7.63889 4.15193 8.36825 3.5 9.24988 3.5H17.25C19.0449 3.5 20.5 4.95507 20.5 6.75V14.75C20.5 15.6316 19.8481 16.361 19 16.4823V17.9905C20.6781 17.8629 22 16.4608 22 14.75V6.75C22 4.12665 19.8733 2 17.25 2H9.24988C7.53905 2 6.13697 3.32189 6.00932 5ZM2 9.25C2 7.45507 3.45509 6 5.25003 6H14.7501C16.5451 6 18.0002 7.45507 18.0002 9.25V18.75C18.0002 20.5449 16.5451 22 14.7501 22H5.25003C3.45509 22 2 20.5449 2 18.75V9.25ZM5.25003 7.5C4.28352 7.5 3.50001 8.2835 3.50001 9.25V16.5H9.25C10.4926 16.5 11.5 17.5074 11.5 18.75V20.5H14.7501C15.7166 20.5 16.5001 19.7165 16.5001 18.75V9.25C16.5001 8.2835 15.7166 7.5 14.7501 7.5H5.25003ZM10 20.5V18.75C10 18.3358 9.66421 18 9.25 18H3.50001V18.75C3.50001 19.7165 4.28352 20.5 5.25003 20.5H10Z" 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_multiple_bottom_24_regular.svg";

Details

Keywords

tabmobilerectanglebrowser