Dock icon
Used to represent physical device docking scenarios. The Dock 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 Dock 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 { Dock24Regular, Dock24Filled } from "@fluentui/react-icons";
export function Example() {
return <Dock24Regular aria-label="Dock" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dock_24_regular.svg" width="24" height="24" alt="Dock"> 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.79354 9.99677H9.49194C9.90615 9.99677 10.2419 10.3326 10.2419 10.7468C10.2419 11.1265 9.95978 11.4403 9.59371 11.4899L9.49194 11.4968H4.79354C4.12186 11.4968 3.59079 11.9464 3.52702 12.4981L3.5206 12.6097L3.5 17.3862C3.5 17.947 3.98909 18.4316 4.64056 18.49L4.77293 18.4959H19.2271C19.8987 18.4959 20.4298 18.0463 20.4936 17.4946L20.5 17.383L20.5206 12.6065C20.5206 12.0457 20.0315 11.561 19.38 11.5027L19.2477 11.4968H14.5528C14.1386 11.4968 13.8028 11.161 13.8028 10.7468C13.8028 10.3671 14.0849 10.0533 14.451 10.0036L14.5528 9.99677H19.2477C20.7073 9.99677 21.9237 11.0634 22.0151 12.4427L22.0206 12.6097L22 17.3862C22 18.7863 20.8398 19.9067 19.401 19.9909L19.2271 19.9959H4.77293C3.3133 19.9959 2.09692 18.9293 2.00551 17.55L2 17.383L2.0206 12.6065C2.0206 11.2064 3.18084 10.086 4.61961 10.0018L4.79354 9.99677H9.49194H4.79354ZM12.4462 3.14705L12.5303 3.21967L16.4554 7.14473C16.7483 7.43763 16.7483 7.9125 16.4554 8.20539C16.1891 8.47166 15.7725 8.49587 15.4788 8.27801L15.3947 8.20539L12.7383 5.54581L12.7397 15.2539C12.7397 15.6681 12.4039 16.0039 11.9897 16.0039C11.5755 16.0039 11.2397 15.6681 11.2397 15.2539L11.2409 5.569L8.60526 8.20539C8.33899 8.47166 7.92233 8.49587 7.62872 8.27801L7.5446 8.20539C7.27833 7.93913 7.25413 7.52246 7.47198 7.22885L7.5446 7.14473L11.4697 3.21967C11.7359 2.9534 12.1526 2.9292 12.4462 3.14705Z" 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_24_regular.svg";Details
| Name | Dock |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dock_24_regular.svg |
| Filled file | ic_fluent_dock_24_filled.svg |
| React components | Dock24Regular, Dock24Filled |
| License | MIT (© Microsoft Corporation) |