Ratio Icon
Free SVG icon from the Arcticons collection. Download or copy for use in any project.
The 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/331941.svg" alt="Ratio icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/331941.svg" alt="Ratio icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/331941.svg" alt="Ratio icon" :width="24" :height="24" />
CSS background
.icon-ratio {
background-image: url('https://proicons.com/icon/331941.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48">
<defs>
<style>
.cls-1 {
fill: none;
stroke:#000;
stroke-linecap: round;
stroke-linejoin: round;
}
.cls-2 {
fill:#000;
}
</style>
</defs>
<path class="cls-1" d="M35.1,20.4h0c1.6,0,2.9,1.3,2.9,2.9v1.9c0,1.6-1.3,2.9-2.9,2.9h0c-1.6,0-2.9-1.3-2.9-2.9v-1.9c0-1.6,1.3-2.9,2.9-2.9Z"/>
<path class="cls-1" d="M10,23.3c0-1.6,1.3-2.9,2.9-2.9h0"/>
<line class="cls-1" x1="10" y1="20.4" x2="10" y2="28.1"/>
<circle class="cls-2" cx="29.3" cy="16.9" r=".8"/>
<line class="cls-1" x1="29.3" y1="20.4" x2="29.3" y2="28.1"/>
<line class="cls-1" x1="25" y1="18.1" x2="25" y2="28.1"/>
<line class="cls-1" x1="23.5" y1="20.4" x2="26.5" y2="20.4"/>
<path class="cls-1" d="M20.6,25.2c0,1.6-1.3,2.9-2.9,2.9h0c-1.6,0-2.9-1.3-2.9-2.9h0v-1.9c0-1.6,1.3-2.9,2.9-2.9h0c1.6,0,2.9,1.3,2.9,2.9h0"/>
<line class="cls-1" x1="20.6" y1="28.1" x2="20.6" y2="20.4"/>
<path class="cls-1" d="M38.5,5.5H9.5c-2.2,0-4,1.8-4,4v29c0,2.2,1.8,4,4,4h29c2.2,0,4-1.8,4-4V9.5c0-2.2-1.8-4-4-4Z"/>
</svg>
Ratio in other icon packs
Copied!