Table Offset Settings icon
Used to represent a data table specifically around conditional formatting of the rows & columns. The Table Offset Settings icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Table Offset 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 { TableOffsetSettings24Regular, TableOffsetSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <TableOffsetSettings24Regular aria-label="Table Offset Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_table_offset_settings_24_regular.svg" width="24" height="24" alt="Table Offset 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="M6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H12.0218C11.7253 20.5368 11.4858 20.0335 11.3135 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V15.5H11.3135C11.4858 14.9665 11.7253 14.4632 12.0218 14H10V10H19.5V11.3135C20.0335 11.4858 20.5368 11.7253 21 12.0218V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H14V8.5H4.5V6.25ZM4.5 10H8.5V14H4.5V10ZM19.5 8.5H15.5V4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V8.5ZM14.2772 13.9759C14.592 15.0661 13.9376 16.1995 12.836 16.4721L12.2518 16.6166C12.2069 16.9043 12.1836 17.1995 12.1836 17.5003C12.1836 17.815 12.2091 18.1235 12.2582 18.4237L12.7976 18.5536C13.9102 18.8216 14.5715 19.9666 14.2476 21.0641L14.0613 21.6954C14.5005 22.081 15.0009 22.3942 15.5455 22.6169L16.0388 22.0982C16.8273 21.269 18.1496 21.2692 18.9379 22.0987L19.4366 22.6235C19.9801 22.4032 20.4801 22.093 20.9194 21.7106L20.7214 21.0247C20.4066 19.9344 21.061 18.801 22.1626 18.5285L22.7463 18.384C22.7912 18.0963 22.8145 17.8011 22.8145 17.5003C22.8145 17.1856 22.789 16.877 22.7399 16.5767L22.2009 16.4469C21.0884 16.179 20.4271 15.034 20.751 13.9364L20.9371 13.3056C20.498 12.9198 19.9975 12.6066 19.4529 12.3838L18.9598 12.9023C18.1713 13.7316 16.849 13.7313 16.0607 12.9018L15.5619 12.377C15.0184 12.5972 14.5184 12.9073 14.0791 13.2897L14.2772 13.9759ZM17.4991 19.0003C16.6984 19.0003 16.0494 18.3287 16.0494 17.5003C16.0494 16.6719 16.6984 16.0003 17.4991 16.0003C18.2997 16.0003 18.9487 16.6719 18.9487 17.5003C18.9487 18.3287 18.2997 19.0003 17.4991 19.0003Z" 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_offset_settings_24_regular.svg";Details
| Name | Table Offset Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_table_offset_settings_24_regular.svg |
| Filled file | ic_fluent_table_offset_settings_24_filled.svg |
| React components | TableOffsetSettings24Regular, TableOffsetSettings24Filled |
| License | MIT (© Microsoft Corporation) |