Table Switch icon
Used to represent a data table. The Table Switch 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 Switch 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 { TableSwitch24Regular, TableSwitch24Filled } from "@fluentui/react-icons";
export function Example() {
return <TableSwitch24Regular aria-label="Table Switch" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_table_switch_24_regular.svg" width="24" height="24" alt="Table Switch"> 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="M8.78033 1.21967C8.48744 0.926777 8.01256 0.926777 7.71967 1.21967C7.42678 1.51256 7.42678 1.98744 7.71967 2.28033L8.43934 3H6.25C4.45507 3 3 4.45507 3 6.25V8.43934L2.28033 7.71967C1.98744 7.42678 1.51256 7.42678 1.21967 7.71967C0.926777 8.01256 0.926777 8.48744 1.21967 8.78033L3.21967 10.7803C3.24482 10.8055 3.27132 10.8285 3.29892 10.8493C3.3115 10.8588 3.32431 10.8678 3.33732 10.8764C3.59987 11.0498 3.9474 11.0407 4.20108 10.8493C4.22868 10.8285 4.25518 10.8055 4.28033 10.7803L6.28033 8.78033C6.3622 8.69846 6.42119 8.60236 6.45729 8.5C6.55034 8.23617 6.49135 7.93069 6.28033 7.71967C5.98744 7.42678 5.51256 7.42678 5.21967 7.71967L4.5 8.43934V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H8.43934L7.71967 5.21967C7.42678 5.51256 7.42678 5.98744 7.71967 6.28033C7.93069 6.49135 8.23617 6.55034 8.5 6.45729C8.50021 6.45722 8.49979 6.45737 8.5 6.45729C8.60212 6.42117 8.69863 6.36203 8.78033 6.28033L10.7803 4.28033C11.0732 3.98744 11.0732 3.51256 10.7803 3.21967L8.78033 1.21967ZM11.8317 3C12.0561 3.47336 12.0561 4.02664 11.8317 4.5H14V8.5H10V6.47487L9.48744 6.98744C9.20948 7.26539 8.86129 7.4303 8.5 7.48216V8.5H7.48216C7.4303 8.86129 7.26539 9.20948 6.98744 9.48744L6.47487 10H8.5L8.5 14H4.5V11.8317C4.02664 12.0561 3.47336 12.0561 3 11.8317V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H11.8317ZM10 14V10H14L14 14H10ZM15.5 14L15.5 10H19.5V14H15.5ZM14 15.5V19.5H10V15.5H14ZM15.5 19.5V15.5H19.5V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H15.5ZM15.5 8.5V4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V8.5H15.5ZM4.5 15.5H8.5V19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V15.5Z" 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_switch_24_regular.svg";Details
| Name | Table Switch |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_table_switch_24_regular.svg |
| Filled file | ic_fluent_table_switch_24_filled.svg |
| React components | TableSwitch24Regular, TableSwitch24Filled |
| License | MIT (© Microsoft Corporation) |