Ratio One To One icon
Used to represent a ratio. The Ratio One To One 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 Ratio One To One 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 { RatioOneToOne24Regular, RatioOneToOne24Filled } from "@fluentui/react-icons";
export function Example() {
return <RatioOneToOne24Regular aria-label="Ratio One To One" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ratio_one_to_one_24_regular.svg" width="24" height="24" alt="Ratio One To One"> 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="M8.50008 8.75C8.50008 8.4734 8.34784 8.21926 8.10397 8.08875C7.86011 7.95823 7.5642 7.97254 7.33405 8.12596L5.83405 9.12596C5.48941 9.35573 5.39628 9.82138 5.62604 10.166C5.85581 10.5107 6.32146 10.6038 6.6661 10.374L7.00008 10.1514V15.25C7.00008 15.6642 7.33587 16 7.75008 16C8.16429 16 8.50008 15.6642 8.50008 15.25V8.75ZM17.5 8.75005C17.5 8.47345 17.3478 8.21931 17.1039 8.08879C16.86 7.95828 16.5641 7.97258 16.334 8.12601L14.834 9.12601C14.4893 9.35578 14.3962 9.82143 14.626 10.1661C14.8557 10.5107 15.3214 10.6039 15.666 10.3741L16 10.1514V15.25C16 15.6643 16.3358 16 16.75 16C17.1642 16 17.5 15.6643 17.5 15.25V8.75005ZM13.0001 14C13.0001 14.5523 12.5524 15 12.0001 15C11.4478 15 11.0001 14.5523 11.0001 14C11.0001 13.4477 11.4478 13 12.0001 13C12.5524 13 13.0001 13.4477 13.0001 14ZM12.0001 11C12.5524 11 13.0001 10.5523 13.0001 10C13.0001 9.44772 12.5524 9 12.0001 9C11.4478 9 11.0001 9.44772 11.0001 10C11.0001 10.5523 11.4478 11 12.0001 11ZM5.25 4C3.45507 4 2 5.45507 2 7.25V16.75C2 18.5449 3.45507 20 5.25 20H18.75C20.5449 20 22 18.5449 22 16.75V7.25C22 5.45507 20.5449 4 18.75 4H5.25ZM3.5 7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V16.75C20.5 17.7165 19.7165 18.5 18.75 18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.25Z" 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/ratio_one_to_one_24_regular.svg";Details
| Name | Ratio One To One |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ratio_one_to_one_24_regular.svg |
| Filled file | ic_fluent_ratio_one_to_one_24_filled.svg |
| React components | RatioOneToOne24Regular, RatioOneToOne24Filled |
| License | MIT (© Microsoft Corporation) |