Layout Row Two Settings icon

Use the Layout Row Two Settings 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 { LayoutRowTwoSettings24Regular, LayoutRowTwoSettings24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LayoutRowTwoSettings24Regular aria-label="Layout Row Two Settings" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_layout_row_two_settings_24_regular.svg" width="24" height="24" alt="Layout Row Two Settings">

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="M3 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V11.25H15.7086C14.7067 11.5366 13.8037 12.0577 13.0629 12.75H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM14.2772 13.9759C14.592 15.0661 13.9376 16.1995 12.836 16.4721L12.2518 16.6166C12.2069 16.9043 12.1836 17.1995 12.1836 17.5003C12.1836 17.815 12.2091 18.1235 12.2582 18.4237L12.7976 18.5536C13.9102 18.8216 14.5715 19.9666 14.2476 21.0641L14.0613 21.6954C14.5005 22.081 15.0009 22.3942 15.5455 22.6169L16.0388 22.0982C16.8273 21.269 18.1496 21.2692 18.9379 22.0987L19.4366 22.6235C19.9801 22.4032 20.4801 22.093 20.9194 21.7106L20.7214 21.0247C20.4066 19.9344 21.061 18.801 22.1626 18.5285L22.7463 18.384C22.7912 18.0963 22.8145 17.8011 22.8145 17.5003C22.8145 17.1856 22.789 16.877 22.7399 16.5767L22.2009 16.4469C21.0884 16.179 20.4271 15.034 20.751 13.9364L20.9371 13.3056C20.498 12.9198 19.9975 12.6066 19.4529 12.3838L18.9598 12.9023C18.1713 13.7316 16.849 13.7313 16.0607 12.9018L15.5619 12.377C15.0184 12.5972 14.5184 12.9073 14.0791 13.2897L14.2772 13.9759ZM17.4991 19.0003C16.6984 19.0003 16.0494 18.3287 16.0494 17.5003C16.0494 16.6719 16.6984 16.0003 17.4991 16.0003C18.2997 16.0003 18.9487 16.6719 18.9487 17.5003C18.9487 18.3287 18.2997 19.0003 17.4991 19.0003Z" 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/layout_row_two_settings_24_regular.svg";

Details

Keywords

uilayoutstructurecustomizeribbon