Rectangle Landscape Sync icon

Use the Rectangle Landscape Sync 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 { RectangleLandscapeSync24Regular, RectangleLandscapeSync24Filled } from "@fluentui/react-icons";

export function Example() {
  return <RectangleLandscapeSync24Regular aria-label="Rectangle Landscape Sync" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_rectangle_landscape_sync_24_regular.svg" width="24" height="24" alt="Rectangle Landscape Sync">

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="M2 7.25C2 5.45507 3.45507 4 5.25 4H18.75C20.5449 4 22 5.45507 22 7.25V11.8096C21.5557 11.3832 21.051 11.0194 20.5 10.7322V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5H5.25C4.2835 5.5 3.5 6.2835 3.5 7.25V16.75C3.5 17.7165 4.2835 18.5 5.25 18.5H11.3135C11.4858 19.0335 11.7253 19.5368 12.0218 20H5.25C3.45507 20 2 18.5449 2 16.75V7.25ZM12 16.5C12 19.5376 14.4624 22 17.5 22C20.5376 22 23 19.5376 23 16.5C23 13.4624 20.5376 11 17.5 11C14.4624 11 12 13.4624 12 16.5ZM20.5 13C20.7761 13 21 13.2239 21 13.5V15.5C21 15.7761 20.7761 16 20.5 16H18.5C18.2239 16 18 15.7761 18 15.5C18 15.2239 18.2239 15 18.5 15H19.5003C19.0436 14.392 18.3174 14 17.5 14C16.6666 14 15.9283 14.4073 15.4733 15.036C15.3113 15.2597 14.9987 15.3098 14.775 15.1478C14.5514 14.9859 14.5013 14.6733 14.6632 14.4496C15.2982 13.5724 16.3323 13 17.5 13C18.4798 13 19.3651 13.4027 20 14.0506V13.5C20 13.2239 20.2239 13 20.5 13ZM15 18.9494V19.5C15 19.7761 14.7761 20 14.5 20C14.2239 20 14 19.7761 14 19.5V17.5C14 17.2239 14.2239 17 14.5 17H16.5C16.7761 17 17 17.2239 17 17.5C17 17.7761 16.7761 18 16.5 18H15.4998C15.9564 18.608 16.6827 19 17.5 19C18.2663 19 18.9518 18.6558 19.4112 18.1118C19.5893 17.9008 19.9048 17.8742 20.1158 18.0523C20.3268 18.2305 20.3534 18.546 20.1752 18.7569C19.534 19.5164 18.5732 20 17.5 20C16.5203 20 15.6349 19.5973 15 18.9494Z" 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/rectangle_landscape_sync_24_regular.svg";

Details

Keywords

shareviewshapearrowsarrowclockwise