Table Edit icon

Use the Table Edit 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 { TableEdit24Regular, TableEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TableEdit24Regular aria-label="Table Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_table_edit_24_regular.svg" width="24" height="24" alt="Table Edit">

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.24971C3 4.45495 4.45495 3 6.24971 3H17.7487C19.5435 3 20.9984 4.45495 20.9984 6.24971V11.0115C20.492 10.9678 19.9774 11.0412 19.4985 11.2317V9.99938H15.4989L15.4989 13.999H16.3539L13.999 16.3539V15.4989H9.99938V19.4985H11.5402C11.5333 19.5241 11.5266 19.5497 11.5202 19.5754L11.1644 20.9984H6.24971C4.45495 20.9984 3 19.5435 3 17.7487V6.24971ZM6.24971 4.49987C5.2833 4.49987 4.49987 5.2833 4.49987 6.24971V8.49952H8.49952V4.49987H6.24971ZM4.49987 9.99938V13.999H8.49951L8.49952 9.99938H4.49987ZM9.99938 9.99938L9.99938 13.999H13.999L13.999 9.99938H9.99938ZM15.4989 8.49952H19.4985V6.24971C19.4985 5.2833 18.7151 4.49987 17.7487 4.49987H15.4989V8.49952ZM13.999 4.49987H9.99938V8.49952H13.999V4.49987ZM4.49987 15.4989V17.7487C4.49987 18.7151 5.2833 19.4985 6.24971 19.4985H8.49951V15.4989H4.49987ZM19.7649 12.2051C19.6737 12.2467 19.5847 12.2947 19.4985 12.3489C19.3565 12.4383 19.2221 12.5449 19.0984 12.6686L13.1965 18.5705C12.9317 18.8353 12.7261 19.1517 12.5917 19.4985C12.5514 19.6024 12.5174 19.7091 12.4902 19.8179L12.0327 21.6484C11.8336 22.4445 12.5547 23.1656 13.3508 22.9666L15.1813 22.5089C15.6534 22.3909 16.0846 22.1468 16.4287 21.8027L22.3306 15.9008C23.2231 15.0082 23.2231 13.5611 22.3306 12.6686C21.6789 12.0169 20.7316 11.8411 19.9203 12.141C19.9072 12.1459 19.8941 12.1508 19.8811 12.1559C19.842 12.1712 19.8033 12.1876 19.7649 12.2051Z" 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_edit_24_regular.svg";

Details

Keywords

cellrowcolumninformationchartpencil