Table Insert Column icon

Use the Table Insert Column 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 { TableInsertColumn24Regular, TableInsertColumn24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TableInsertColumn24Regular aria-label="Table Insert Column" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_table_insert_column_24_regular.svg" width="24" height="24" alt="Table Insert Column">

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="M4.5 3.75L4.5 20.25C4.5 20.6642 4.16421 21 3.75 21C3.33579 21 3 20.6642 3 20.25V3.75C3 3.33579 3.33579 3 3.75 3C4.16421 3 4.5 3.33579 4.5 3.75ZM14.25 3C15.4926 3 16.5 4.00736 16.5 5.25L16.5 18.75C16.5 19.9926 15.4926 21 14.25 21H9.75C8.50736 21 7.5 19.9926 7.5 18.75L7.5 5.25C7.5 4.00736 8.50736 3 9.75 3H14.25ZM15 5.25C15 4.83579 14.6642 4.5 14.25 4.5L9.75 4.5C9.33578 4.5 9 4.83579 9 5.25V8.5L15 8.5V5.25ZM9 14L15 14V10L9 10V14ZM9 15.5V18.75C9 19.1642 9.33578 19.5 9.75 19.5H14.25C14.6642 19.5 15 19.1642 15 18.75V15.5L9 15.5ZM21 20.25V3.75C21 3.33579 20.6642 3 20.25 3C19.8358 3 19.5 3.33579 19.5 3.75V20.25C19.5 20.6642 19.8358 21 20.25 21C20.6642 21 21 20.6642 21 20.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/table_insert_column_24_regular.svg";

Details

Keywords

cellrowcolumninformationchart