Table Link icon

Use the Table Link 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 { TableLink24Regular, TableLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.25V14.3328C20.5319 14.1472 20.0273 14.0338 19.5 14.0065V10H15.5L15.5 14.0065C15.1082 14.0268 14.729 14.0946 14.3679 14.2042C14.243 14.2421 14.1203 14.2851 14 14.3328C13.3444 14.5927 12.7604 14.9944 12.2859 15.5H10V19.5H11.0589C11.1437 20.035 11.3179 20.5402 11.5657 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM14 10H10L10 14H14L14 10ZM6.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.5ZM19.25 15C21.3211 15 23 16.6789 23 18.75C23 20.7543 21.4276 22.3913 19.4523 22.4948L19.2534 22.5V22.5046C18.8392 22.5065 18.5019 22.1722 18.5 21.758C18.4983 21.3783 18.779 21.0633 19.1448 21.0119L19.2466 21.0046L19.25 21C20.4926 21 21.5 19.9926 21.5 18.75C21.5 17.5591 20.5748 16.5844 19.404 16.5052L19.25 16.5C18.8358 16.5 18.5 16.1642 18.5 15.75C18.5 15.3703 18.7822 15.0565 19.1482 15.0068L19.25 15ZM15.75 15C16.1642 15 16.5 15.3358 16.5 15.75C16.5 16.1297 16.2178 16.4435 15.8518 16.4932L15.75 16.5C14.5074 16.5 13.5 17.5074 13.5 18.75C13.5 19.9409 14.4252 20.9156 15.596 20.9948L15.75 21C16.1642 21 16.5 21.3358 16.5 21.75C16.5 22.1297 16.2178 22.4435 15.8518 22.4932L15.75 22.5C13.6789 22.5 12 20.8211 12 18.75C12 16.7457 13.5724 15.1087 15.5508 15.0052L15.75 15ZM19.25 18C19.6642 18 20 18.3358 20 18.75C20 19.1297 19.7178 19.4435 19.3518 19.4932L19.25 19.5H15.75C15.3358 19.5 15 19.1642 15 18.75C15 18.3703 15.2822 18.0565 15.6482 18.0068L15.75 18H19.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_link_24_regular.svg";

Details

Keywords

cellrowcolumninformationchartshare