Table Simple Multiple icon

Use the Table Simple Multiple 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 { TableSimpleMultiple24Regular, TableSimpleMultiple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TableSimpleMultiple24Regular aria-label="Table Simple Multiple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_table_simple_multiple_24_regular.svg" width="24" height="24" alt="Table Simple Multiple">

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.25 2C3.45507 2 2 3.45508 2 5.25V15.75C2 17.5449 3.45508 19 5.25 19H15.75C17.5449 19 19 17.5449 19 15.75V5.25C19 3.45507 17.5449 2 15.75 2H5.25ZM3.5 5.25C3.5 4.2835 4.2835 3.5 5.25 3.5H10V10H3.5V5.25ZM11.5 10V3.5H15.75C16.7165 3.5 17.5 4.2835 17.5 5.25V10H11.5ZM3.5 11.5H10V17.5H5.25C4.2835 17.5 3.5 16.7165 3.5 15.75V11.5ZM11.5 11.5H17.5V15.75C17.5 16.7165 16.7165 17.5 15.75 17.5H11.5V11.5ZM8.25092 21.9999C6.89894 21.9999 5.73978 21.1744 5.25 19.9999H7.02617C7.3418 20.3092 7.77409 20.4999 8.25092 20.4999H16.5009C18.7101 20.4999 20.5009 18.7091 20.5009 16.4999V8.24994C20.5009 7.77311 20.3102 7.34083 20.0009 7.02519V5.24994C21.1754 5.73972 22.0009 6.89796 22.0009 8.24994V16.4999C22.0009 19.5375 19.5385 21.9999 16.5009 21.9999H8.25092Z" 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/table_simple_multiple_24_regular.svg";

Details

Keywords

tab