Table Settings icon

Use the Table Settings 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 { TableSettings24Regular, TableSettings24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V10H15.5V11.3135C14.9665 11.4858 14.4632 11.7253 14 12.0218L14 10H10L10 14H12.0218C11.7253 14.4632 11.4858 14.9665 11.3135 15.5H10V19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V8.5H8.5V4.5H6.25ZM4.5 10V14H8.5L8.5 10H4.5ZM15.5 8.5H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H15.5V8.5ZM14 4.5H10V8.5H14V4.5ZM4.5 15.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H8.5V15.5H4.5ZM14.2782 13.9754C14.593 15.0656 13.9386 16.1991 12.837 16.4716L12.2528 16.6161C12.2079 16.9038 12.1846 17.199 12.1846 17.4998C12.1846 17.8145 12.2101 18.123 12.2592 18.4232L12.7986 18.5532C13.9111 18.8211 14.5725 19.9661 14.2486 21.0636L14.0623 21.6949C14.5014 22.0805 15.0019 22.3937 15.5464 22.6165L16.0397 22.0977C16.8283 21.2685 18.1506 21.2687 18.9388 22.0982L19.4375 22.623C19.9811 22.4027 20.4811 22.0925 20.9204 21.7101L20.7223 21.0242C20.4076 19.9339 21.062 18.8005 22.1635 18.528L22.7472 18.3835C22.7922 18.0958 22.8155 17.8006 22.8155 17.4998C22.8155 17.1851 22.7899 16.8765 22.7409 16.5762L22.2019 16.4464C21.0894 16.1785 20.4281 15.0335 20.7519 13.9359L20.9381 13.3051C20.499 12.9193 19.9985 12.6061 19.4539 12.3833L18.9608 12.9018C18.1722 13.7311 16.85 13.7309 16.0617 12.9013L15.5629 12.3765C15.0193 12.5967 14.5194 12.9068 14.0801 13.2892L14.2782 13.9754ZM17.5 18.9998C16.6994 18.9998 16.0504 18.3282 16.0504 17.4998C16.0504 16.6714 16.6994 15.9998 17.5 15.9998C18.3007 15.9998 18.9497 16.6714 18.9497 17.4998C18.9497 18.3282 18.3007 18.9998 17.5 18.9998Z" 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_settings_24_regular.svg";

Details

Keywords

cellrowcolumninformationchartgearoptions