Row Triple icon

Use the Row Triple 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 { RowTriple24Regular, RowTriple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <RowTriple24Regular aria-label="Row Triple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_row_triple_24_regular.svg" width="24" height="24" alt="Row Triple">

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="M4 3.76953C4 2.80303 4.7835 2.01953 5.75 2.01953H18.25C19.2165 2.01953 20 2.80303 20 3.76953V6.26953C20 7.23603 19.2165 8.01953 18.25 8.01953H5.75C4.7835 8.01953 4 7.23603 4 6.26953V3.76953ZM5.75 3.51953C5.61193 3.51953 5.5 3.63146 5.5 3.76953V6.26953C5.5 6.4076 5.61193 6.51953 5.75 6.51953H18.25C18.3881 6.51953 18.5 6.4076 18.5 6.26953V3.76953C18.5 3.63146 18.3881 3.51953 18.25 3.51953H5.75ZM4 10.7695C4 9.80303 4.7835 9.01953 5.75 9.01953H18.25C19.2165 9.01953 20 9.80303 20 10.7695V13.2695C20 14.236 19.2165 15.0195 18.25 15.0195H5.75C4.7835 15.0195 4 14.236 4 13.2695V10.7695ZM5.75 10.5195C5.61193 10.5195 5.5 10.6315 5.5 10.7695V13.2695C5.5 13.4076 5.61193 13.5195 5.75 13.5195H18.25C18.3881 13.5195 18.5 13.4076 18.5 13.2695V10.7695C18.5 10.6315 18.3881 10.5195 18.25 10.5195H5.75ZM5.75 16.0195C4.7835 16.0195 4 16.803 4 17.7695V20.2695C4 21.236 4.7835 22.0195 5.75 22.0195H18.25C19.2165 22.0195 20 21.236 20 20.2695V17.7695C20 16.803 19.2165 16.0195 18.25 16.0195H5.75ZM5.5 17.7695C5.5 17.6315 5.61193 17.5195 5.75 17.5195H18.25C18.3881 17.5195 18.5 17.6315 18.5 17.7695V20.2695C18.5 20.4076 18.3881 20.5195 18.25 20.5195H5.75C5.61193 20.5195 5.5 20.4076 5.5 20.2695V17.7695Z" 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/row_triple_24_regular.svg";

Details

Keywords

columnuicontent