Table Column Top Bottom Arrow Repeat All icon

Use the Table Column Top Bottom Arrow Repeat All 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 { TableColumnTopBottomArrowRepeatAll24Regular, TableColumnTopBottomArrowRepeatAll24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TableColumnTopBottomArrowRepeatAll24Regular aria-label="Table Column Top Bottom Arrow Repeat All" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_table_column_top_bottom_arrow_repeat_all_24_regular.svg" width="24" height="24" alt="Table Column Top Bottom Arrow Repeat All">

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.1856C20.6506 14.135 20.2855 14.1894 19.9558 14.3576C19.934 14.2625 19.9045 14.1702 19.8679 14.0817C19.7846 13.8799 19.662 13.6905 19.5 13.5253V10H15.5L15.5 12.0253C15.2296 12.3011 15.0689 12.6442 15.0178 13H14.5C14.331 13 14.1642 13.0093 14 13.0275L14 10H10L10 14H11.6713C10.6518 14.825 10 16.0864 10 17.5C10 18.116 10.1245 18.7045 10.3494 19.2403C10.4757 19.5413 10.6337 19.8257 10.8192 20.0891L10.8264 20.0993C10.8916 20.1913 10.9601 20.2808 11.0318 20.3675C11.3589 20.7628 11.8232 20.9776 12.2983 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.5ZM4.5 15.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H8.5V15.5H4.5ZM17.2803 12.7197C16.9874 12.4268 16.5126 12.4268 16.2197 12.7197C15.9268 13.0126 15.9268 13.4874 16.2197 13.7803L16.4393 14H14.5C12.567 14 11 15.567 11 17.5C11 18.2483 11.2357 18.9438 11.6368 19.5134C11.8753 19.852 12.3432 19.9332 12.6818 19.6947C13.0205 19.4563 13.1017 18.9884 12.8632 18.6497C12.6343 18.3247 12.5 17.9291 12.5 17.5C12.5 16.3954 13.3954 15.5 14.5 15.5H16.4393L16.2197 15.7197C15.9268 16.0126 15.9268 16.4874 16.2197 16.7803C16.5126 17.0732 16.9874 17.0732 17.2803 16.7803L18.7803 15.2803C19.0732 14.9874 19.0732 14.5126 18.7803 14.2197L17.2803 12.7197ZM21.3624 15.4856C21.1238 15.147 20.6559 15.0659 20.3173 15.3046C19.9788 15.5432 19.8977 16.0111 20.1364 16.3497C20.3655 16.6748 20.5 17.0706 20.5 17.5C20.5 18.6046 19.6046 19.5 18.5 19.5H16.5607L16.7803 19.2803C17.0732 18.9874 17.0732 18.5126 16.7803 18.2197C16.4874 17.9268 16.0126 17.9268 15.7197 18.2197L14.2197 19.7197C13.9268 20.0126 13.9268 20.4874 14.2197 20.7803L15.7197 22.2803C16.0126 22.5732 16.4874 22.5732 16.7803 22.2803C17.0732 21.9874 17.0732 21.5126 16.7803 21.2197L16.5607 21H18.5C20.433 21 22 19.433 22 17.5C22 16.7512 21.764 16.0554 21.3624 15.4856Z" 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_column_top_bottom_arrow_repeat_all_24_regular.svg";

Details