Table Delete Column icon

Use the Table Delete 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 { TableDeleteColumn24Regular, TableDeleteColumn24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_table_delete_column_24_regular.svg" width="24" height="24" alt="Table Delete 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="M22 3.75C22 3.33579 21.6642 3 21.25 3L20.25 3C18.4551 3 17 4.45508 17 6.25V17.75C17 19.5449 18.4551 21 20.25 21H21.25C21.6642 21 22 20.6642 22 20.25C22 19.8358 21.6642 19.5 21.25 19.5H20.25C19.2835 19.5 18.5 18.7165 18.5 17.75V15.5H21.25C21.6642 15.5 22 15.1642 22 14.75C22 14.3358 21.6642 14 21.25 14H18.5V10H21.25C21.6642 10 22 9.66421 22 9.25C22 8.83579 21.6642 8.5 21.25 8.5H18.5V6.25C18.5 5.2835 19.2835 4.5 20.25 4.5H21.25C21.6642 4.5 22 4.16421 22 3.75ZM2 3.75C2 3.33579 2.33579 3 2.75 3L3.75 3C5.54493 3 7 4.45507 7 6.25L7 17.75C7 19.5449 5.54493 21 3.75 21H2.75C2.33579 21 2 20.6642 2 20.25C2 19.8358 2.33579 19.5 2.75 19.5H3.75C4.7165 19.5 5.5 18.7165 5.5 17.75L5.5 15.5H2.75C2.33579 15.5 2 15.1642 2 14.75C2 14.3358 2.33579 14 2.75 14H5.5L5.5 10H2.75C2.33579 10 2 9.66421 2 9.25C2 8.83579 2.33579 8.5 2.75 8.5H5.5L5.5 6.25C5.5 5.2835 4.7165 4.5 3.75 4.5H2.75C2.33579 4.5 2 4.16421 2 3.75ZM10.9393 12L9.46967 13.4697C9.17678 13.7626 9.17678 14.2374 9.46967 14.5303C9.76256 14.8232 10.2374 14.8232 10.5303 14.5303L12 13.0607L13.4697 14.5303C13.7626 14.8232 14.2374 14.8232 14.5303 14.5303C14.8232 14.2374 14.8232 13.7626 14.5303 13.4697L13.0607 12L14.5303 10.5303C14.8232 10.2374 14.8232 9.76256 14.5303 9.46967C14.2374 9.17678 13.7626 9.17678 13.4697 9.46967L12 10.9393L10.5303 9.46967C10.2374 9.17678 9.76256 9.17678 9.46967 9.46967C9.17678 9.76256 9.17678 10.2374 9.46967 10.5303L10.9393 12ZM11.25 8.72739C11.2758 8.75048 11.3011 8.77441 11.3258 8.79918L12 9.47335L12.6742 8.79917C12.6989 8.77441 12.7242 8.75048 12.75 8.72739V2.75C12.75 2.33579 12.4142 2 12 2C11.5858 2 11.25 2.33579 11.25 2.75L11.25 8.72739ZM11.25 15.5226V21.25C11.25 21.6642 11.5858 22 12 22C12.4142 22 12.75 21.6642 12.75 21.25V15.5226C12.7242 15.4995 12.6989 15.4756 12.6742 15.4508L12 14.7767L11.3258 15.4508C11.3011 15.4756 11.2758 15.4995 11.25 15.5226Z" 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_delete_column_24_regular.svg";

Details

Keywords

cellrowcolumninformationchart