Tab Group icon

Use the Tab Group 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 { TabGroup24Regular, TabGroup24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TabGroup24Regular aria-label="Tab Group" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tab_group_24_regular.svg" width="24" height="24" alt="Tab Group">

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="M2 7.75C2 6.23122 3.23122 5 4.75 5H17.25C18.7688 5 20 6.23122 20 7.75V13.25C20 14.7688 18.7688 16 17.25 16H4.75C3.23122 16 2 14.7688 2 13.25V7.75ZM4.75 6.5C4.05964 6.5 3.5 7.05964 3.5 7.75V13.25C3.5 13.9404 4.05964 14.5 4.75 14.5H17.25C17.9404 14.5 18.5 13.9404 18.5 13.25V7.75C18.5 7.05964 17.9404 6.5 17.25 6.5H4.75ZM4.79688 17C5.25217 17.8901 6.17828 18.4994 7.2467 18.4994H17.2467C20.1462 18.4994 22.4967 16.1489 22.4967 13.2494V10.2494C22.4967 9.18191 21.8885 8.25651 20.9997 7.80078V13.25C20.9997 15.3211 19.3208 17 17.2497 17H4.79688ZM7.25 9.75C6.83579 9.75 6.5 10.0858 6.5 10.5C6.5 10.9142 6.83579 11.25 7.25 11.25H14.75C15.1642 11.25 15.5 10.9142 15.5 10.5C15.5 10.0858 15.1642 9.75 14.75 9.75H7.25Z" 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_group_24_regular.svg";

Details

Keywords

tabmobiledesktoprectanglebrowsergroup