Square Text Arrow Repeat All icon

Use the Square Text 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 { SquareTextArrowRepeatAll24Regular, SquareTextArrowRepeatAll24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SquareTextArrowRepeatAll24Regular aria-label="Square Text Arrow Repeat All" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_square_text_arrow_repeat_all_24_regular.svg" width="24" height="24" alt="Square Text 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="M20.9557 14.8577C20.9704 14.8502 20.9852 14.8429 21 14.8359V6.25C21 4.45507 19.5449 3 17.75 3H6.25C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H12.2243C12.0714 20.8894 11.9339 20.752 11.8192 20.5891C11.585 20.2566 11.3946 19.8905 11.2566 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V13.0251L20.4874 14.0126C20.7287 14.2538 20.8848 14.548 20.9557 14.8577ZM11.1115 17C11.235 16.456 11.457 15.9494 11.7578 15.5H7.75L7.64823 15.5068C7.28215 15.5565 7 15.8703 7 16.25C7 16.6642 7.33579 17 7.75 17H11.1115ZM16.5126 12.5126C16.6525 12.3726 16.8103 12.2613 16.9786 12.1787C16.9926 12.1214 17 12.0616 17 12C17 11.5858 16.6642 11.25 16.25 11.25H7.75L7.64823 11.2568C7.28215 11.3065 7 11.6203 7 12C7 12.4142 7.33579 12.75 7.75 12.75H16.25L16.3166 12.7455C16.3741 12.6637 16.4394 12.5857 16.5126 12.5126ZM17 7.75C17 8.1297 16.7178 8.44349 16.3518 8.49315L16.25 8.5H7.75C7.33579 8.5 7 8.16421 7 7.75C7 7.3703 7.28215 7.05651 7.64823 7.00685L7.75 7H16.25C16.6642 7 17 7.33579 17 7.75ZM19.7803 14.7197L18.2803 13.2197C17.9874 12.9268 17.5126 12.9268 17.2197 13.2197C16.9268 13.5126 16.9268 13.9874 17.2197 14.2803L17.4393 14.5H15.5C13.567 14.5 12 16.067 12 18C12 18.7483 12.2357 19.4438 12.6368 20.0134C12.8753 20.352 13.3432 20.4332 13.6818 20.1947C14.0205 19.9563 14.1017 19.4884 13.8632 19.1497C13.6343 18.8247 13.5 18.4291 13.5 18C13.5 16.8954 14.3954 16 15.5 16H17.4393L17.2197 16.2197C16.9268 16.5126 16.9268 16.9874 17.2197 17.2803C17.5126 17.5732 17.9874 17.5732 18.2803 17.2803L19.7803 15.7803C20.0732 15.4874 20.0732 15.0126 19.7803 14.7197ZM22.3624 15.9856C22.1238 15.647 21.6559 15.5659 21.3173 15.8046C20.9788 16.0432 20.8977 16.5111 21.1364 16.8497C21.3655 17.1748 21.5 17.5706 21.5 18C21.5 19.1046 20.6046 20 19.5 20H17.5607L17.7803 19.7803C18.0732 19.4874 18.0732 19.0126 17.7803 18.7197C17.4874 18.4268 17.0126 18.4268 16.7197 18.7197L15.2197 20.2197C14.9268 20.5126 14.9268 20.9874 15.2197 21.2803L16.7197 22.7803C17.0126 23.0732 17.4874 23.0732 17.7803 22.7803C18.0732 22.4874 18.0732 22.0126 17.7803 21.7197L17.5607 21.5H19.5C21.433 21.5 23 19.933 23 18C23 17.2512 22.764 16.5554 22.3624 15.9856Z" 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/square_text_arrow_repeat_all_24_regular.svg";

Details

Keywords

paperworkfileanalogarrowrepeatall