Rectangle Landscape Sync Off icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L3.4698 4.53048C2.5846 5.11111 2 6.11229 2 7.25V16.75C2 18.5449 3.45507 20 5.25 20H12.0218C11.7253 19.5368 11.4858 19.0335 11.3135 18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.25C3.5 6.52296 3.94335 5.89948 4.57445 5.63516L12.7188 13.7796C12.2613 14.5819 12 15.5104 12 16.5C12 19.5376 14.4624 22 17.5 22C18.4895 22 19.418 21.7387 20.2203 21.2813L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM18.7203 19.7813C18.3403 19.9227 17.9292 20 17.5 20C16.5203 20 15.6349 19.5973 15 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 17H15.9391L16.8218 17.8827C16.7348 17.9559 16.6226 18 16.5 18H15.4998C15.9564 18.608 16.6827 19 17.5 19C17.6383 19 17.774 18.9888 17.9062 18.9672L18.7203 19.7813ZM14.8572 11.6754L16.3687 13.187C16.7236 13.0658 17.1041 13 17.5 13C18.4798 13 19.3651 13.4027 20 14.0506V13.5C20 13.2239 20.2239 13 20.5 13C20.7761 13 21 13.2239 21 13.5V15.5C21 15.7761 20.7761 16 20.5 16H19.1817L22.3246 19.1429C22.7551 18.3586 23 17.4579 23 16.5C23 13.4624 20.5376 11 17.5 11C16.5421 11 15.6415 11.2449 14.8572 11.6754ZM18.2491 15.0674L17.1996 14.0178C17.2981 14.0061 17.3983 14 17.5 14C18.3174 14 19.0436 14.392 19.5003 15H18.5C18.4086 15 18.3229 15.0245 18.2491 15.0674ZM7.18195 4L8.68192 5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V10.7322C21.051 11.0194 21.5557 11.3832 22 11.8096V7.25C22 5.45507 20.5449 4 18.75 4H7.18195Z" 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_off_24_regular.svg";

Details

Keywords

shareviewshapearrowsarrowclockwise