Question 1

How do I use this icon in React, Vue, or Svelte?

Accepted Answer

Copy ready-to-use component code for React, Vue, Svelte, or raw SVG

Question 2

How do I download this icon in different formats?

Accepted Answer

Download the icon in SVG, PNG, WebP, JPEG, or ICO formats

Question 3

What is the license for this icon?

Accepted Answer

This icon is licensed under ISC

Question 4

Where is this icon commonly used?

Accepted Answer

In design tools like Figma and Adobe Photoshop, users encounter this icon when locking aspect ratios during image resizing and maintaining proportional scaling. Video editing software including Adobe Premiere Pro and DaVinci Resolve implements it for aspect ratio selection, while responsive design frameworks and CSS tools display it for viewport ratio controls and responsive breakpoint configuration.

Question 5

What does this icon communicate to users?

Accepted Answer

From a design perspective, the overlapping rectangle configuration communicates more than basic proportions - it specifically represents intentional dimensional relationships, professional scaling practices, and the visual consistency that distinguishes polished designs from distorted or improperly scaled content. This control helps users maintain design integrity across various contexts.

Question 6

How do I implement this icon?

Accepted Answer

This icon works naturally in image editing interfaces and responsive design panels where it represents aspect ratio controls and proportional scaling options. Combine it with shadcn/ui's Toggle components for ratio locking or Slider components for dimension adjustment. The dual rectangle pattern should convey dimensional relationships when used in design tools to help users maintain proper proportions.

Ratio Icon

Install with shadcn CLI

Frequently Asked Questions

Similar Icons