Table Simple Include icon

Use the Table Simple Include 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 { TableSimpleInclude24Regular, TableSimpleInclude24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M3 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V11.4232C20.6108 10.9552 20.0926 10.5982 19.5 10.4067V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H12.75V10.337C12.1763 10.4725 11.6613 10.7601 11.25 11.1548V4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V11.25H11.1548C10.7601 11.6613 10.4725 12.1763 10.337 12.75H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H10.4067C10.5982 20.0926 10.9552 20.6108 11.4232 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM11.25 13.5C11.25 12.2574 12.2574 11.25 13.5 11.25H18.5C19.7426 11.25 20.75 12.2574 20.75 13.5V18.5C20.75 19.7426 19.7426 20.75 18.5 20.75H13.5C12.2574 20.75 11.25 19.7426 11.25 18.5V13.5Z" 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_include_24_regular.svg";

Details

Keywords

gridmeetinglayoutvideosettingsme