Aspect Ratio Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Download SVG

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: aspect ratio

The Aspect Ratio icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/321042.svg" alt="Aspect Ratio icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321042.svg" alt="Aspect Ratio icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321042.svg"
  alt="Aspect Ratio icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-aspect-ratio {
  background-image: url('https://proicons.com/icon/321042.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<svg width="640" height="360" viewBox="0 0 640 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="aspect-ratio">
<rect id="Rectangle" x="144" y="80" width="352" height="200" fill="#F6F2FF"/>
<rect id="Rectangle Copy 30" x="144" y="80" width="350" height="198" stroke="#8A3FFC"/>
<g id="16:9">
<path id="Path" d="M386.84 234V232.52H390.74V221.28H390.6L387.08 224.56L386.1 223.5L389.8 220.04H392.42V232.52H396.02V234H386.84Z" fill="#8A3FFC"/>
<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M401.15 233.87C401.73 234.117 402.38 234.24 403.1 234.24C403.793 234.24 404.427 234.127 405 233.9C405.573 233.673 406.063 233.357 406.47 232.95C406.877 232.543 407.19 232.057 407.41 231.49C407.63 230.923 407.74 230.3 407.74 229.62C407.74 228.967 407.637 228.373 407.43 227.84C407.223 227.307 406.94 226.853 406.58 226.48C406.22 226.107 405.787 225.82 405.28 225.62C404.773 225.42 404.22 225.32 403.62 225.32C402.767 225.32 402.077 225.51 401.55 225.89C401.023 226.27 400.593 226.747 400.26 227.32L400.16 227.28C400.347 226.467 400.593 225.737 400.9 225.09C401.207 224.443 401.58 223.837 402.02 223.27C402.46 222.703 402.973 222.16 403.56 221.64C404.147 221.12 404.813 220.587 405.56 220.04H403.4C402.84 220.4 402.267 220.87 401.68 221.45C401.093 222.03 400.557 222.697 400.07 223.45C399.583 224.203 399.187 225.037 398.88 225.95C398.573 226.863 398.42 227.84 398.42 228.88C398.42 229.707 398.527 230.453 398.74 231.12C398.953 231.787 399.263 232.35 399.67 232.81C400.077 233.27 400.57 233.623 401.15 233.87ZM405.23 232.02C404.717 232.527 404 232.78 403.08 232.78C402.16 232.78 401.443 232.527 400.93 232.02C400.417 231.513 400.16 230.787 400.16 229.84V229.68C400.16 228.733 400.417 228.007 400.93 227.5C401.443 226.993 402.16 226.74 403.08 226.74C404 226.74 404.717 226.993 405.23 227.5C405.743 228.007 406 228.733 406 229.68V229.84C406 230.787 405.743 231.513 405.23 232.02Z" fill="#8A3FFC"/>
<path id="Shape_2" fill-rule="evenodd" clip-rule="evenodd" d="M411.069 225.699C411.263 225.913 411.573 226.019 411.999 226.019C412.426 226.019 412.736 225.913 412.929 225.699C413.123 225.486 413.219 225.206 413.219 224.859V224.599C413.219 224.253 413.123 223.973 412.929 223.759C412.736 223.546 412.426 223.439 411.999 223.439C411.573 223.439 411.263 223.546 411.069 223.759C410.876 223.973 410.779 224.253 410.779 224.599V224.859C410.779 225.206 410.876 225.486 411.069 225.699ZM411.069 233.919C411.263 234.133 411.573 234.239 411.999 234.239C412.426 234.239 412.736 234.133 412.929 233.919C413.123 233.706 413.219 233.426 413.219 233.079V232.819C413.219 232.473 413.123 232.193 412.929 231.979C412.736 231.766 412.426 231.659 411.999 231.659C411.573 231.659 411.263 231.766 411.069 231.979C410.876 232.193 410.779 232.473 410.779 232.819V233.079C410.779 233.426 410.876 233.706 411.069 233.919Z" fill="#8A3FFC"/>
<path id="Shape_3" fill-rule="evenodd" clip-rule="evenodd" d="M425.12 228.09C425.426 227.176 425.58 226.2 425.58 225.16C425.58 224.333 425.473 223.586 425.26 222.92C425.046 222.253 424.736 221.69 424.33 221.23C423.923 220.77 423.43 220.416 422.85 220.17C422.27 219.923 421.62 219.8 420.9 219.8C420.193 219.8 419.556 219.913 418.99 220.14C418.423 220.366 417.936 220.683 417.53 221.09C417.123 221.496 416.81 221.983 416.59 222.55C416.37 223.116 416.26 223.74 416.26 224.42C416.26 225.086 416.363 225.683 416.57 226.21C416.776 226.736 417.06 227.186 417.42 227.56C417.78 227.933 418.213 228.22 418.72 228.42C419.226 228.62 419.78 228.72 420.38 228.72C421.233 228.72 421.923 228.53 422.45 228.15C422.976 227.77 423.406 227.293 423.74 226.72L423.84 226.76C423.653 227.573 423.406 228.303 423.1 228.95C422.793 229.596 422.42 230.203 421.98 230.77C421.54 231.336 421.026 231.88 420.44 232.4C419.853 232.92 419.186 233.453 418.44 234H420.6C421.16 233.64 421.733 233.17 422.32 232.59C422.906 232.01 423.443 231.343 423.93 230.59C424.416 229.836 424.813 229.003 425.12 228.09ZM423.07 226.54C422.556 227.046 421.84 227.3 420.92 227.3C420 227.3 419.283 227.046 418.77 226.54C418.256 226.033 418 225.306 418 224.36V224.2C418 223.253 418.256 222.526 418.77 222.02C419.283 221.513 420 221.26 420.92 221.26C421.84 221.26 422.556 221.513 423.07 222.02C423.583 222.526 423.84 223.253 423.84 224.2V224.36C423.84 225.306 423.583 226.033 423.07 226.54Z" fill="#8A3FFC"/>
</g>
<g id="16:9_2">
<path id="Path_2" d="M212.84 234V232.52H216.74V221.28H216.6L213.08 224.56L212.1 223.5L215.8 220.04H218.42V232.52H222.02V234H212.84Z" fill="#8A3FFC"/>
<path id="Shape_4" fill-rule="evenodd" clip-rule="evenodd" d="M227.15 233.87C227.73 234.117 228.38 234.24 229.1 234.24C229.793 234.24 230.427 234.127 231 233.9C231.573 233.673 232.063 233.357 232.47 232.95C232.877 232.543 233.19 232.057 233.41 231.49C233.63 230.923 233.74 230.3 233.74 229.62C233.74 228.967 233.637 228.373 233.43 227.84C233.223 227.307 232.94 226.853 232.58 226.48C232.22 226.107 231.787 225.82 231.28 225.62C230.773 225.42 230.22 225.32 229.62 225.32C228.767 225.32 228.077 225.51 227.55 225.89C227.023 226.27 226.593 226.747 226.26 227.32L226.16 227.28C226.347 226.467 226.593 225.737 226.9 225.09C227.207 224.443 227.58 223.837 228.02 223.27C228.46 222.703 228.973 222.16 229.56 221.64C230.147 221.12 230.813 220.587 231.56 220.04H229.4C228.84 220.4 228.267 220.87 227.68 221.45C227.093 222.03 226.557 222.697 226.07 223.45C225.583 224.203 225.187 225.037 224.88 225.95C224.573 226.863 224.42 227.84 224.42 228.88C224.42 229.707 224.527 230.453 224.74 231.12C224.953 231.787 225.263 232.35 225.67 232.81C226.077 233.27 226.57 233.623 227.15 233.87ZM231.23 232.02C230.717 232.527 230 232.78 229.08 232.78C228.16 232.78 227.443 232.527 226.93 232.02C226.417 231.513 226.16 230.787 226.16 229.84V229.68C226.16 228.733 226.417 228.007 226.93 227.5C227.443 226.993 228.16 226.74 229.08 226.74C230 226.74 230.717 226.993 231.23 227.5C231.743 228.007 232 228.733 232 229.68V229.84C232 230.787 231.743 231.513 231.23 232.02Z" fill="#8A3FFC"/>
<path id="Shape_5" fill-rule="evenodd" clip-rule="evenodd" d="M237.069 225.699C237.263 225.913 237.573 226.019 237.999 226.019C238.426 226.019 238.736 225.913 238.929 225.699C239.123 225.486 239.219 225.206 239.219 224.859V224.599C239.219 224.253 239.123 223.973 238.929 223.759C238.736 223.546 238.426 223.439 237.999 223.439C237.573 223.439 237.263 223.546 237.069 223.759C236.876 223.973 236.779 224.253 236.779 224.599V224.859C236.779 225.206 236.876 225.486 237.069 225.699ZM237.069 233.919C237.263 234.133 237.573 234.239 237.999 234.239C238.426 234.239 238.736 234.133 238.929 233.919C239.123 233.706 239.219 233.426 239.219 233.079V232.819C239.219 232.473 239.123 232.193 238.929 231.979C238.736 231.766 238.426 231.659 237.999 231.659C237.573 231.659 237.263 231.766 237.069 231.979C236.876 232.193 236.779 232.473 236.779 232.819V233.079C236.779 233.426 236.876 233.706 237.069 233.919Z" fill="#8A3FFC"/>
<path id="Shape_6" fill-rule="evenodd" clip-rule="evenodd" d="M251.12 228.09C251.426 227.176 251.58 226.2 251.58 225.16C251.58 224.333 251.473 223.586 251.26 222.92C251.046 222.253 250.736 221.69 250.33 221.23C249.923 220.77 249.43 220.416 248.85 220.17C248.27 219.923 247.62 219.8 246.9 219.8C246.193 219.8 245.556 219.913 244.99 220.14C244.423 220.366 243.936 220.683 243.53 221.09C243.123 221.496 242.81 221.983 242.59 222.55C242.37 223.116 242.26 223.74 242.26 224.42C242.26 225.086 242.363 225.683 242.57 226.21C242.776 226.736 243.06 227.186 243.42 227.56C243.78 227.933 244.213 228.22 244.72 228.42C245.226 228.62 245.78 228.72 246.38 228.72C247.233 228.72 247.923 228.53 248.45 228.15C248.976 227.77 249.406 227.293 249.74 226.72L249.84 226.76C249.653 227.573 249.406 228.303 249.1 228.95C248.793 229.596 248.42 230.203 247.98 230.77C247.54 231.336 247.026 231.88 246.44 232.4C245.853 232.92 245.186 233.453 244.44 234H246.6C247.16 233.64 247.733 233.17 248.32 232.59C248.906 232.01 249.443 231.343 249.93 230.59C250.416 229.836 250.813 229.003 251.12 228.09ZM249.07 226.54C248.556 227.046 247.84 227.3 246.92 227.3C246 227.3 245.283 227.046 244.77 226.54C244.256 226.033 244 225.306 244 224.36V224.2C244 223.253 244.256 222.526 244.77 222.02C245.283 221.513 246 221.26 246.92 221.26C247.84 221.26 248.556 221.513 249.07 222.02C249.583 222.526 249.84 223.253 249.84 224.2V224.36C249.84 225.306 249.583 226.033 249.07 226.54Z" fill="#8A3FFC"/>
</g>
<g id="16:9_3">
<path id="Path_3" d="M386.84 138V136.52H390.74V125.28H390.6L387.08 128.56L386.1 127.5L389.8 124.04H392.42V136.52H396.02V138H386.84Z" fill="#8A3FFC"/>
<path id="Shape_7" fill-rule="evenodd" clip-rule="evenodd" d="M401.15 137.87C401.73 138.117 402.38 138.24 403.1 138.24C403.793 138.24 404.427 138.127 405 137.9C405.573 137.673 406.063 137.357 406.47 136.95C406.877 136.543 407.19 136.057 407.41 135.49C407.63 134.923 407.74 134.3 407.74 133.62C407.74 132.967 407.637 132.373 407.43 131.84C407.223 131.307 406.94 130.853 406.58 130.48C406.22 130.107 405.787 129.82 405.28 129.62C404.773 129.42 404.22 129.32 403.62 129.32C402.767 129.32 402.077 129.51 401.55 129.89C401.023 130.27 400.593 130.747 400.26 131.32L400.16 131.28C400.347 130.467 400.593 129.737 400.9 129.09C401.207 128.443 401.58 127.837 402.02 127.27C402.46 126.703 402.973 126.16 403.56 125.64C404.147 125.12 404.813 124.587 405.56 124.04H403.4C402.84 124.4 402.267 124.87 401.68 125.45C401.093 126.03 400.557 126.697 400.07 127.45C399.583 128.203 399.187 129.037 398.88 129.95C398.573 130.863 398.42 131.84 398.42 132.88C398.42 133.707 398.527 134.453 398.74 135.12C398.953 135.787 399.263 136.35 399.67 136.81C400.077 137.27 400.57 137.623 401.15 137.87ZM405.23 136.02C404.717 136.527 404 136.78 403.08 136.78C402.16 136.78 401.443 136.527 400.93 136.02C400.417 135.513 400.16 134.787 400.16 133.84V133.68C400.16 132.733 400.417 132.007 400.93 131.5C401.443 130.993 402.16 130.74 403.08 130.74C404 130.74 404.717 130.993 405.23 131.5C405.743 132.007 406 132.733 406 133.68V133.84C406 134.787 405.743 135.513 405.23 136.02Z" fill="#8A3FFC"/>
<path id="Shape_8" fill-rule="evenodd" clip-rule="evenodd" d="M411.069 129.699C411.263 129.913 411.573 130.019 411.999 130.019C412.426 130.019 412.736 129.913 412.929 129.699C413.123 129.486 413.219 129.206 413.219 128.859V128.599C413.219 128.253 413.123 127.973 412.929 127.759C412.736 127.546 412.426 127.439 411.999 127.439C411.573 127.439 411.263 127.546 411.069 127.759C410.876 127.973 410.779 128.253 410.779 128.599V128.859C410.779 129.206 410.876 129.486 411.069 129.699ZM411.069 137.919C411.263 138.133 411.573 138.239 411.999 138.239C412.426 138.239 412.736 138.133 412.929 137.919C413.123 137.706 413.219 137.426 413.219 137.079V136.819C413.219 136.473 413.123 136.193 412.929 135.979C412.736 135.766 412.426 135.659 411.999 135.659C411.573 135.659 411.263 135.766 411.069 135.979C410.876 136.193 410.779 136.473 410.779 136.819V137.079C410.779 137.426 410.876 137.706 411.069 137.919Z" fill="#8A3FFC"/>
<path id="Shape_9" fill-rule="evenodd" clip-rule="evenodd" d="M425.12 132.09C425.426 131.176 425.58 130.2 425.58 129.16C425.58 128.333 425.473 127.586 425.26 126.92C425.046 126.253 424.736 125.69 424.33 125.23C423.923 124.77 423.43 124.416 422.85 124.17C422.27 123.923 421.62 123.8 420.9 123.8C420.193 123.8 419.556 123.913 418.99 124.14C418.423 124.366 417.936 124.683 417.53 125.09C417.123 125.496 416.81 125.983 416.59 126.55C416.37 127.116 416.26 127.74 416.26 128.42C416.26 129.086 416.363 129.683 416.57 130.21C416.776 130.736 417.06 131.186 417.42 131.56C417.78 131.933 418.213 132.22 418.72 132.42C419.226 132.62 419.78 132.72 420.38 132.72C421.233 132.72 421.923 132.53 422.45 132.15C422.976 131.77 423.406 131.293 423.74 130.72L423.84 130.76C423.653 131.573 423.406 132.303 423.1 132.95C422.793 133.596 422.42 134.203 421.98 134.77C421.54 135.336 421.026 135.88 420.44 136.4C419.853 136.92 419.186 137.453 418.44 138H420.6C421.16 137.64 421.733 137.17 422.32 136.59C422.906 136.01 423.443 135.343 423.93 134.59C424.416 133.836 424.813 133.003 425.12 132.09ZM423.07 130.54C422.556 131.046 421.84 131.3 420.92 131.3C420 131.3 419.283 131.046 418.77 130.54C418.256 130.033 418 129.306 418 128.36V128.2C418 127.253 418.256 126.526 418.77 126.02C419.283 125.513 420 125.26 420.92 125.26C421.84 125.26 422.556 125.513 423.07 126.02C423.583 126.526 423.84 127.253 423.84 128.2V128.36C423.84 129.306 423.583 130.033 423.07 130.54Z" fill="#8A3FFC"/>
</g>
<g id="16:9_4">
<path id="Path_4" d="M212.84 138V136.52H216.74V125.28H216.6L213.08 128.56L212.1 127.5L215.8 124.04H218.42V136.52H222.02V138H212.84Z" fill="#8A3FFC"/>
<path id="Shape_10" fill-rule="evenodd" clip-rule="evenodd" d="M227.15 137.87C227.73 138.117 228.38 138.24 229.1 138.24C229.793 138.24 230.427 138.127 231 137.9C231.573 137.673 232.063 137.357 232.47 136.95C232.877 136.543 233.19 136.057 233.41 135.49C233.63 134.923 233.74 134.3 233.74 133.62C233.74 132.967 233.637 132.373 233.43 131.84C233.223 131.307 232.94 130.853 232.58 130.48C232.22 130.107 231.787 129.82 231.28 129.62C230.773 129.42 230.22 129.32 229.62 129.32C228.767 129.32 228.077 129.51 227.55 129.89C227.023 130.27 226.593 130.747 226.26 131.32L226.16 131.28C226.347 130.467 226.593 129.737 226.9 129.09C227.207 128.443 227.58 127.837 228.02 127.27C228.46 126.703 228.973 126.16 229.56 125.64C230.147 125.12 230.813 124.587 231.56 124.04H229.4C228.84 124.4 228.267 124.87 227.68 125.45C227.093 126.03 226.557 126.697 226.07 127.45C225.583 128.203 225.187 129.037 224.88 129.95C224.573 130.863 224.42 131.84 224.42 132.88C224.42 133.707 224.527 134.453 224.74 135.12C224.953 135.787 225.263 136.35 225.67 136.81C226.077 137.27 226.57 137.623 227.15 137.87ZM231.23 136.02C230.717 136.527 230 136.78 229.08 136.78C228.16 136.78 227.443 136.527 226.93 136.02C226.417 135.513 226.16 134.787 226.16 133.84V133.68C226.16 132.733 226.417 132.007 226.93 131.5C227.443 130.993 228.16 130.74 229.08 130.74C230 130.74 230.717 130.993 231.23 131.5C231.743 132.007 232 132.733 232 133.68V133.84C232 134.787 231.743 135.513 231.23 136.02Z" fill="#8A3FFC"/>
<path id="Shape_11" fill-rule="evenodd" clip-rule="evenodd" d="M237.069 129.699C237.263 129.913 237.573 130.019 237.999 130.019C238.426 130.019 238.736 129.913 238.929 129.699C239.123 129.486 239.219 129.206 239.219 128.859V128.599C239.219 128.253 239.123 127.973 238.929 127.759C238.736 127.546 238.426 127.439 237.999 127.439C237.573 127.439 237.263 127.546 237.069 127.759C236.876 127.973 236.779 128.253 236.779 128.599V128.859C236.779 129.206 236.876 129.486 237.069 129.699ZM237.069 137.919C237.263 138.133 237.573 138.239 237.999 138.239C238.426 138.239 238.736 138.133 238.929 137.919C239.123 137.706 239.219 137.426 239.219 137.079V136.819C239.219 136.473 239.123 136.193 238.929 135.979C238.736 135.766 238.426 135.659 237.999 135.659C237.573 135.659 237.263 135.766 237.069 135.979C236.876 136.193 236.779 136.473 236.779 136.819V137.079C236.779 137.426 236.876 137.706 237.069 137.919Z" fill="#8A3FFC"/>
<path id="Shape_12" fill-rule="evenodd" clip-rule="evenodd" d="M251.12 132.09C251.426 131.176 251.58 130.2 251.58 129.16C251.58 128.333 251.473 127.586 251.26 126.92C251.046 126.253 250.736 125.69 250.33 125.23C249.923 124.77 249.43 124.416 248.85 124.17C248.27 123.923 247.62 123.8 246.9 123.8C246.193 123.8 245.556 123.913 244.99 124.14C244.423 124.366 243.936 124.683 243.53 125.09C243.123 125.496 242.81 125.983 242.59 126.55C242.37 127.116 242.26 127.74 242.26 128.42C242.26 129.086 242.363 129.683 242.57 130.21C242.776 130.736 243.06 131.186 243.42 131.56C243.78 131.933 244.213 132.22 244.72 132.42C245.226 132.62 245.78 132.72 246.38 132.72C247.233 132.72 247.923 132.53 248.45 132.15C248.976 131.77 249.406 131.293 249.74 130.72L249.84 130.76C249.653 131.573 249.406 132.303 249.1 132.95C248.793 133.596 248.42 134.203 247.98 134.77C247.54 135.336 247.026 135.88 246.44 136.4C245.853 136.92 245.186 137.453 244.44 138H246.6C247.16 137.64 247.733 137.17 248.32 136.59C248.906 136.01 249.443 135.343 249.93 134.59C250.416 133.836 250.813 133.003 251.12 132.09ZM249.07 130.54C248.556 131.046 247.84 131.3 246.92 131.3C246 131.3 245.283 131.046 244.77 130.54C244.256 130.033 244 129.306 244 128.36V128.2C244 127.253 244.256 126.526 244.77 126.02C245.283 125.513 246 125.26 246.92 125.26C247.84 125.26 248.556 125.513 249.07 126.02C249.583 126.526 249.84 127.253 249.84 128.2V128.36C249.84 129.306 249.583 130.033 249.07 130.54Z" fill="#8A3FFC"/>
</g>
<rect id="Rectangle_2" x="318" y="80" width="2" height="196" fill="#8A3FFC"/>
<rect id="Rectangle Copy 2" x="496" y="178" width="2" height="352" transform="rotate(90 496 178)" fill="#8A3FFC"/>
</g>
</svg>