Table Cell Cross Brush icon
Used to represent a cell in a table with the ability to apply a brush. The Table Cell Cross Brush 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 Cell Cross Brush 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 { TableCellCrossBrush24Regular, TableCellCrossBrush24Filled } from "@fluentui/react-icons";
export function Example() {
return <TableCellCrossBrush24Regular aria-label="Table Cell Cross Brush" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_table_cell_cross_brush_24_regular.svg" width="24" height="24" alt="Table Cell Cross Brush"> 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="M21.9248 10.0938C22.4033 9.96541 23.1184 9.88074 23.6162 10.3779C24.1139 10.8757 24.0297 11.5916 23.9014 12.0703C23.7559 12.6122 23.4541 13.2357 23.0605 13.8857C22.2668 15.1965 21.0026 16.7708 19.4766 18.2969C19.0475 18.7259 18.3846 19.4012 17.6152 19.751C17.4201 19.8396 17.208 19.9105 16.9834 19.9531C17.0663 20.8772 16.7565 21.8296 16.0508 22.5381L15.8457 22.7344C14.7942 23.6789 13.4073 24.0538 12.0732 23.9795C10.6533 23.9002 9.22423 23.3096 8.21094 22.2656C8.03177 22.0806 7.96042 21.8167 8.02148 21.5664C8.08283 21.3164 8.26751 21.1147 8.51172 21.0332C9.89148 20.5732 10.2491 20.1187 10.4326 19.7773C10.5638 19.5331 10.6054 19.364 10.7607 18.999C10.8996 18.6728 11.0938 18.3037 11.4512 17.9463C12.1599 17.2378 13.1144 16.926 14.04 17.0088C14.0828 16.7852 14.1558 16.5743 14.2441 16.3799C14.594 15.6103 15.2702 14.9476 15.6992 14.5186C17.2253 12.9926 18.7987 11.7274 20.1094 10.9336C20.7594 10.54 21.3829 10.2392 21.9248 10.0938ZM14.9863 19.0068C14.303 18.3238 13.1951 18.3239 12.5117 19.0068C12.3402 19.1783 12.2391 19.3578 12.1416 19.5869C12.0606 19.7772 11.922 20.1725 11.7529 20.4873C11.4617 21.0291 11.0188 21.5087 10.2295 21.9326C10.8124 22.2524 11.4801 22.4436 12.1562 22.4814C13.236 22.5416 14.2688 22.2103 14.9824 21.4854L14.9863 21.4814C15.6693 20.798 15.6696 19.6901 14.9863 19.0068ZM13.75 2C14.9926 2 16 3.00736 16 4.25V8H19.75C20.5803 8 21.3035 8.45096 21.6934 9.12012L21.666 9.12695C21.2093 9.24957 20.7326 9.45326 20.2588 9.70117C20.125 9.57706 19.9469 9.5 19.75 9.5H16V12.8477C15.6633 13.1565 15.3255 13.4772 14.9922 13.8105C14.8627 13.94 14.6901 14.1114 14.5 14.3154V9.5H9.5V14.5H14.333C13.9772 14.9012 13.5908 15.4033 13.335 15.9658C13.3299 15.977 13.3244 15.9886 13.3193 16H9.5V19.3828C9.46448 19.4323 9.41376 19.4914 9.32031 19.5615C9.19206 19.6577 8.97579 19.7861 8.61133 19.9326C8.42 20.0027 8.22336 20.0644 8.03711 20.1475C8.01407 20.0183 8 19.8858 8 19.75V16H4.25C3.00736 16 2 14.9926 2 13.75V10.25C2 9.00736 3.00736 8 4.25 8H8V4.25C8 3.00736 9.00736 2 10.25 2H13.75ZM4.25 9.5C3.83579 9.5 3.5 9.83579 3.5 10.25V13.75C3.5 14.1642 3.83579 14.5 4.25 14.5H8V9.5H4.25ZM10.25 3.5C9.83579 3.5 9.5 3.83579 9.5 4.25V8H14.5V4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H10.25Z" 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_cell_cross_brush_24_regular.svg";Details
| Name | Table Cell Cross Brush |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_table_cell_cross_brush_24_regular.svg |
| Filled file | ic_fluent_table_cell_cross_brush_24_filled.svg |
| React components | TableCellCrossBrush24Regular, TableCellCrossBrush24Filled |
| License | MIT (© Microsoft Corporation) |