Rectangle Landscape Hint Copy icon
Used in Loop to copy a Loop component. The Rectangle Landscape Hint Copy icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Rectangle Landscape Hint Copy 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 { RectangleLandscapeHintCopy24Regular, RectangleLandscapeHintCopy24Filled } from "@fluentui/react-icons";
export function Example() {
return <RectangleLandscapeHintCopy24Regular aria-label="Rectangle Landscape Hint Copy" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_rectangle_landscape_hint_copy_24_regular.svg" width="24" height="24" alt="Rectangle Landscape Hint Copy"> 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="M7.50076 6.25C7.50076 5.2835 8.28426 4.5 9.25076 4.5H10.2508C10.665 4.5 11.0008 4.16421 11.0008 3.75C11.0008 3.33579 10.665 3 10.2508 3H9.25076C7.45583 3 6.00076 4.45507 6.00076 6.25V6.74C6.00076 7.15421 6.33655 7.49 6.75076 7.49C7.16497 7.49 7.50076 7.15421 7.50076 6.74V6.25ZM6.00076 9.25C6.00076 8.83579 6.33655 8.5 6.75076 8.5C7.16497 8.5 7.50076 8.83579 7.50076 9.25V10.75C7.50076 11.1642 7.16497 11.5 6.75076 11.5C6.33655 11.5 6.00076 11.1642 6.00076 10.75V9.25ZM20.5008 9.25C20.5008 8.83579 20.8365 8.5 21.2508 8.5C21.665 8.5 22.0008 8.83579 22.0008 9.25V10.75C22.0008 11.1642 21.665 11.5 21.2508 11.5C20.8365 11.5 20.5008 11.1642 20.5008 10.75V9.25ZM18.7508 4.5C19.7173 4.5 20.5008 5.2835 20.5008 6.25V6.74C20.5008 7.15421 20.8365 7.49 21.2508 7.49C21.665 7.49 22.0008 7.15421 22.0008 6.74V6.25C22.0008 4.45507 20.5457 3 18.7508 3H17.7508C17.3365 3 17.0008 3.33579 17.0008 3.75C17.0008 4.16421 17.3365 4.5 17.7508 4.5H18.7508ZM12.7508 3C12.3365 3 12.0008 3.33579 12.0008 3.75C12.0008 4.16421 12.3365 4.5 12.7508 4.5H15.2508C15.665 4.5 16.0008 4.16421 16.0008 3.75C16.0008 3.33579 15.665 3 15.2508 3H12.7508ZM9.25076 15.5C8.28426 15.5 7.50076 14.7165 7.50076 13.75V13.2502C7.50076 12.836 7.16497 12.5002 6.75076 12.5002C6.33655 12.5002 6.00076 12.836 6.00076 13.2502V13.75C6.00076 15.5449 7.45583 17 9.25076 17H10.2508C10.665 17 11.0008 16.6642 11.0008 16.25C11.0008 15.8358 10.665 15.5 10.2508 15.5H9.25076ZM20.5008 13.75C20.5008 14.7165 19.7173 15.5 18.7508 15.5H17.7508C17.3365 15.5 17.0008 15.8358 17.0008 16.25C17.0008 16.6642 17.3365 17 17.7508 17H18.7508C20.5457 17 22.0008 15.5449 22.0008 13.75V13.2502C22.0008 12.836 21.665 12.5002 21.2508 12.5002C20.8365 12.5002 20.5008 12.836 20.5008 13.2502V13.75ZM12.0008 16.25C12.0008 16.6642 12.3365 17 12.7508 17H15.2508C15.665 17 16.0008 16.6642 16.0008 16.25C16.0008 15.8358 15.665 15.5 15.2508 15.5H12.7508C12.3365 15.5 12.0008 15.8358 12.0008 16.25ZM2 9.6C2 8.1885 2.57341 6.91093 3.5 5.98752L3.5 13.75C3.5 16.9256 6.07436 19.5 9.25 19.5H20.0125C19.0891 20.4266 17.8115 21 16.4 21H9.25C5.24594 21 2 17.7541 2 13.75L2 9.6Z" 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_hint_copy_24_regular.svg";Details
| Name | Rectangle Landscape Hint Copy |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_rectangle_landscape_hint_copy_24_regular.svg |
| Filled file | ic_fluent_rectangle_landscape_hint_copy_24_filled.svg |
| React components | RectangleLandscapeHintCopy24Regular, RectangleLandscapeHintCopy24Filled |
| License | MIT (© Microsoft Corporation) |