Dock Row icon

Use the Dock Row 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 { DockRow24Regular, DockRow24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M20.25 11.9922C21.2165 11.9922 22 12.7757 22 13.7422V16.2422C22 17.2087 21.2165 17.9922 20.25 17.9922H17.75C16.7835 17.9922 16 17.2087 16 16.2422V13.7422C16 12.7757 16.7835 11.9922 17.75 11.9922H20.25ZM6.25 11.9922C7.2165 11.9922 8 12.7757 8 13.7422V16.2422C8 17.2087 7.2165 17.9922 6.25 17.9922H3.75C2.7835 17.9922 2 17.2087 2 16.2422V13.7422C2 12.7757 2.7835 11.9922 3.75 11.9922H6.25ZM13.25 11.9922C14.2165 11.9922 15 12.7757 15 13.7422V16.2422C15 17.2087 14.2165 17.9922 13.25 17.9922H10.75C9.7835 17.9922 9 17.2087 9 16.2422V13.7422C9 12.7757 9.7835 11.9922 10.75 11.9922H13.25ZM20.25 13.4922H17.75C17.6119 13.4922 17.5 13.6041 17.5 13.7422V16.2422C17.5 16.3803 17.6119 16.4922 17.75 16.4922H20.25C20.3881 16.4922 20.5 16.3803 20.5 16.2422V13.7422C20.5 13.6041 20.3881 13.4922 20.25 13.4922ZM6.25 13.4922H3.75C3.61193 13.4922 3.5 13.6041 3.5 13.7422V16.2422C3.5 16.3803 3.61193 16.4922 3.75 16.4922H6.25C6.38807 16.4922 6.5 16.3803 6.5 16.2422V13.7422C6.5 13.6041 6.38807 13.4922 6.25 13.4922ZM13.25 13.4922H10.75C10.6119 13.4922 10.5 13.6041 10.5 13.7422V16.2422C10.5 16.3803 10.6119 16.4922 10.75 16.4922H13.25C13.3881 16.4922 13.5 16.3803 13.5 16.2422V13.7422C13.5 13.6041 13.3881 13.4922 13.25 13.4922ZM13.25 4.99219C14.2165 4.99219 15 5.77569 15 6.74219V9.24219C15 10.2087 14.2165 10.9922 13.25 10.9922H10.75C9.7835 10.9922 9 10.2087 9 9.24219V6.74219C9 5.77569 9.7835 4.99219 10.75 4.99219H13.25ZM20.25 4.99219C21.2165 4.99219 22 5.77569 22 6.74219V9.24219C22 10.2087 21.2165 10.9922 20.25 10.9922H17.75C16.7835 10.9922 16 10.2087 16 9.24219V6.74219C16 5.77569 16.7835 4.99219 17.75 4.99219H20.25ZM6.25 4.99219C7.2165 4.99219 8 5.77569 8 6.74219V9.24219C8 10.2087 7.2165 10.9922 6.25 10.9922H3.75C2.7835 10.9922 2 10.2087 2 9.24219V6.74219C2 5.82401 2.70711 5.071 3.60647 4.99799L3.75 4.99219H6.25ZM13.25 6.49219H10.75C10.6119 6.49219 10.5 6.60412 10.5 6.74219V9.24219C10.5 9.38026 10.6119 9.49219 10.75 9.49219H13.25C13.3881 9.49219 13.5 9.38026 13.5 9.24219V6.74219C13.5 6.60412 13.3881 6.49219 13.25 6.49219ZM20.25 6.49219H17.75C17.6119 6.49219 17.5 6.60412 17.5 6.74219V9.24219C17.5 9.38026 17.6119 9.49219 17.75 9.49219H20.25C20.3881 9.49219 20.5 9.38026 20.5 9.24219V6.74219C20.5 6.60412 20.3881 6.49219 20.25 6.49219ZM6.25 6.49219H3.75L3.69268 6.49879C3.58223 6.5247 3.5 6.62384 3.5 6.74219V9.24219C3.5 9.38026 3.61193 9.49219 3.75 9.49219H6.25C6.38807 9.49219 6.5 9.38026 6.5 9.24219V6.74219C6.5 6.60412 6.38807 6.49219 6.25 6.49219Z" 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/dock_row_24_regular.svg";

Details

Keywords

gridanalognote